Hello,
I'm trying to generate a bar chart dashlet in the Contacts record view, but I'm having some issues when rendering the chart. I obtain the data with a custom endpoint and then format it to what I think the chart expects, but it's not working.
These are my dashlet files:
comisiones-dashlet.php (I have no issue with this)
<?php
$viewdefs['base']['view']['comisiones-dashlet'] = array(
'dashlets' => array(
array(
'label' => 'Comisiones',
'description' => 'Comisiones',
'config' => array(
),
'preview' => array(
),
'filter' => array(
'module' => array(
'Contacts',
),
'view' => array(
'record',
)
)
),
),
'panels' => array(
array(
'name' => 'panel_body',
'columns' => 2,
'labelsOnTop' => true,
'placeholders' => true,
'fields' => array(
array(
'name' => 'tipo',
'label' => 'Tipo de Análisis',
'type' => 'enum',
'searchBarThreshold' => -1,
'options' => array(
'com_porc_c' => 'Porcentaje',
'com_pesos_c' => 'Pesos'
)
),
array(
'name' => 'filtro',
'label' => 'Filtrar por',
'type' => 'enum',
'searchBarThreshold' => -1,
'options' => array(
'ramo_c' => 'Ramo',
'producto_c' => 'Producto',
'negocio_c' => 'Negocio',
'linea_negocio_c' => 'Línea de Negocio'
)
),
),
),
),
);
?>comisiones-dashlet.hbs
<svg></svg>comisiones-dashlet.js
({
plugins: ['Dashlet', 'Chart'],
initialize: function(options) {
this._super('initialize', [options]);
this.chart = nv.models.multiBarChart();
// I ended up commenting all this to see if I could make it work
/*.x(function(d) {
return d.filtro;
})
.y(function(d) {
return d.total;
})*/
/*.vertical(false)
.margin({
top: 0,
right: 0,
bottom: 5,
left: 0
})
.showTitle(false)
.tooltips(false)
.showLegend(false)
.colorData('default')
//.direction(app.lang.direction)
/*.tooltipContent(function(key, x, y, e, graph) {
return '<p><b>' + key + ' ' + parseInt(y, 10) + '</b></p>';
})
.strings({
noData: app.lang.get('LBL_CHART_NO_DATA')
});*/
},
loadData: function(options) {
var self = this;
var id = this.model.get("id");
var myData = "";
var tipo = this.settings.get("tipo");
var filtro = this.settings.get("filtro");
console.log(tipo);
console.log(filtro);
if (filtro && tipo) {
$.ajax({
async: false,
beforeSend: function(request) {
request.setRequestHeader("OAuth-Token", SUGAR.App.api.getOAuthToken());
},
url: "rest/v10/Contacts/getComisiones/" + id + "/" + tipo + "/" + filtro,
type: "GET",
success: function(data) {
if (data[0] != "no_values") {
// So far, so good. I receive the data and send it to evaluateResult, where it will be formatted.
self.evaluateResult(data);
self.render();
}
},
error: function(error) {
console.log(error);
self.displayNoData(true);
}
});
}
},
evaluateResult: function(data) {
this.total = 1;
this.data = [
{
key: "Comisiones",
values: _.map(data, function(value, key) {
return {
'x': value.filtro,
'y': parseFloat(value.total)
};
}),
}
];
this.chartCollection = this.data;
},
renderChart: function() {
console.log("renderChart");
if (!this.isChartReady()) {
console.log("return renderChart"); // This is not being logged, so the chart is ready.
return;
}
console.log(this.chartCollection); // I log my chart data to see its format
d3.select(this.el).select('svg')
.datum(this.chartCollection)
.call(this.chart);
this.chart_loaded = _.isFunction(this.chart.update);
},
render: function() {
this._super('render');
},
})This is the value of this.chartCollection at the end of the function evaluateResult:
[
{
"key":"Comisiones",
"values":[
{
"x":"1",
"y":12.5
},
{
"x":"8",
"y":15
}
]
}
]This is what the dashlet shows:
I've also tried with this value for this.chartCollection, but I'm getting an error and the dashlet doesn't even show the 'No Data Available' message:
{
"data":[
{
"key":"Comisiones",
"values":[
{
"x":"1",
"y":12.5,
"series":0,
"active":""
},
{
"x":"8",
"y":15,
"series":0,
"active":""
}
],
"series":0,
"total":27.5,
"_values":[
{
"x":"1",
"y":12.5,
"series":0,
"active":""
},
{
"x":"8",
"y":15,
"series":0,
"active":""
}
]
}
]
}I must be missing something but I don't know what that is. I've made some other chart types work in the past (line charts and donut charts) but there's something about this one that is keeping me from making it work and I'm becoming really frustrated. I would really appreciate a helping hand here.
Regards,
Rodrigo Morchio