Hi sugar developers,
Thanks for looking on my issues I am facing.
I have created custom dashlet. I can able to get data from API query and then show it to dashlet in table format. which works fine.
But now I want to show same thing in Bar/multibarchart ....I have written the javascript code based on sugarcrm code which uses sucrose library to generate multibarChart. code is as below and the error I am getting.
Please help me find the issue or direction to make sucrose.charts.multibarChart() work on custom dashlet.
/** * @class View.Views.Base.CustomerJourneyDashletView * @alias SUGAR.App.view.views.BaseCustomerJourneyDashletView * @extends View.View */ ({ plugins: ['Dashlet', 'Chart'], css: ["custom/include/css/wage-stream-access.css"], wages: undefined, wagesByCategory: {}, _groupWagesByCategory: function(wages) { const wagesByCategory = {}; wages.forEach(wage => { const category = wage.category || 'Other'; if (!wagesByCategory[category]) { wagesByCategory[category] = []; } wagesByCategory[category].push(wage); }); return wagesByCategory; }, _countWagesByCategory: function(wagesByCategory) { const categoryCounts = {}; for (const category in wagesByCategory) { categoryCounts[category] = wagesByCategory[category].length; } return categoryCounts; }, _retrieveData: function() { var cntrlr = this; app.api.call('GET', app.api.buildURL('wagestreamaccess'), null, { success: function(data) { console.log("data: ", data); if (data.length > 0) { cntrlr.wages = cntrlr._groupWagesByCategory(data); cntrlr.categoryCounts = cntrlr._countWagesByCategory(cntrlr.wages); _.extend(cntrlr, cntrlr.wages); cntrlr.render(); cntrlr.renderChart(); } }, error: function(e) { throw e; } }); }, renderChart: function() { if (this.wages) { const chartData = []; for (const category in this.categoryCounts) { chartData.push({ name: category, value: this.categoryCounts[category] }); } const chartOptions = { height: 300, margin: { top: 20, right: 20, bottom: 50, left: 50 }, x: function(d) { return d.name; }, y: function(d) { return d.value; }, xAxis: { axisLabel: 'Category' }, yAxis: { axisLabel: 'Count', axisLabelDistance: -10 } }; this.chart = sucrose.charts.multibarChart() .options(chartOptions) .data(chartData) .selector('#chart-container') .render(); } }, initialize: function(options) { this.wages = []; this.categoryCounts = {}; this._super('initialize', [options]); this._retrieveData(); } })
<div class="control-group dashlet-options"> <div class="controls controls-two btn-group-fit"> <div class="row-fluid"> <div class=""> <p>Report to show the number of customers who:</p> <ol> <li>have purchased streamed wage access (closed won, or on current/active subscription)</li> <li>who have an open opportunity for streamed wage access, new sale, not an increase to existing component</li> <li>who have declined streamed wage access (closed lost)</li> <li>who are yet to be sold (no opportunity, no closed won/lost)</li> </ol> </div> </div> </div> </div> <div id="chart-container"></div>
<?php /** * Metadata for the wage-stream-access dashlet view */ $viewdefs['base']['view']['wage-stream-access'] = array( 'dashlets' => array( array( 'label' => 'Streamed Wage Access Report', 'description' => 'Lists Streamed Wage Access report', 'config' => array(), 'preview' => array(), 'filter' => array( 'module' => array( 'Home', 'Accounts', 'Leads', ), 'view' => array( 'record', ) ) ), ), );
working custom dashlet screenshot with table