Qerjiuthn Qerjiuthn - 2 months ago 11
Javascript Question

Simple Bar Graph Doesn't Show Graph

I was planning to display a bar chart using

HighCharts.js
. But data in the series attribute was not displaying. See image below:

enter image description here

See my code below:

exec_dashboard_load_graph(
'exec_dashboard_collection_disbursement_graph',
response,
['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
);

function exec_dashboard_load_graph(id,data, x){
var myChart = Highcharts.chart(id, {
chart: {type: 'column'},
title: {text: 'Annual Collection and Disbursement Summary'},
subtitle:{text: 'City Goverment of Butuan'},
xAxis: {categories: x,crosshair: true},
yAxis: {min: 0,title: {text: 'Amount (Peso Value)'}},
tooltip: {
headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
'<td style="padding:0"><b> {point.y:.1f} Php </b></td></tr>',
footerFormat: '</table>',
shared: true,
useHTML: true
},
plotOptions: {column: {pointPadding: 0.2,borderWidth: 0}},
series: data
});
}


The data variable contains the value below:

enter image description here

I wonder what's wrong with my data. Please help. Here's my jsfiddle.

Answer

It's because your numbers are in quotes, making them strings, and Highcharst doesn't know what to do with them.

Changing them to numbers like so will fix it:

var collections = new Array(11242282.20,7966734.89,5936262.58,7903113.53,6527188.99,20639705.75,14359971.15,6861212.08,0,0,0,0);
var disbursements = new Array(117015425.13,151452477.46,182264161.40,218257774.81,188822327.59,209183652.51,15081727.17,204713881.30,0,0,0,0);

https://jsfiddle.net/nnfbcuzr/1/

Also, in case you don't have control over how the data is formatted, you could always convert the array over into ints first by using a function like this:

function parsValuesToInts(arr) {
  var newArr = [];
  for(var i = 0; i < arr.length; i++){
    newArr.push(parseInt(arr[i],10));
  }
  return newArr;
}
Comments