Am trying to draw a pie chart with highcharts, after spending hours trying to figure out how process a JSON string into a javascript array. This is what i have
gateway_useage: function(usage_data) {
var options = {
chart: {
renderTo:'gateway-usage',
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false
},
title: { text: 'Gateway Usage' },
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage}%</b>',
percentageDecimals: 1
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
color: '#000000',
connectorColor: '#000000',
formatter: function() {
return '<b>'+ this.point.name +'</b>: '+ this.percentage +' %';
}
},
showInLegend: true
}
},
series: [{
type: 'pie',
name: 'Usage',
}]
}
var serie1 = usage_data.map( function(e) {
return [e.gateway, e.val];
});
options.series.push({data: serie1});
var chart = new Highcharts.Chart(options);
}
After loading the page and checking the error console saying "Uncaught Highcharts error #14: www.highcharts.com/errors/14 ". What am doing wrong, please help me out
Highcharts Error #14 clearly says
String value sent to series.data, expected Number his happens if you pass in a string as a data point
data point is the yValue, if your serie.data
is of the form
[y1,y2,y2]
or
[[x1,y1],[x2,y2],[x3,y3]]
or
[
{ x : x1 ,y : y1 },
{ x : x2 ,y : y2 },
{ x : x3 ,y : y3 }
]
In any of the above forms the type of data stored in y1
,y2
& y3
should be numeric. You can achieve this my simply using the parseFloat()
or parseInt()
in javascript
var serie1 = usage_data.map( function(e) {
return [e.gateway, parseFloat(e.val)];
});
or do it in the server technology that you are using
In (PHP 4 >= 4.2.0, PHP 5) floatval()
can be used
$float_value_of_var = floatval("123.456");
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With