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/errors/14 ". What am doing wrong, please help me out

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

• javascript
• highcharts

• 3 Did you check out the URL it gave you? Most likely your series data is not the right data type (should be numbers). – Paul Richter Commented Sep 18, 2012 at 21:50
• Yeah i checked out the url, but this bit of code is supposed to parse the json var serie1 = usage_data.map( function(e) { return [e.gateway, e.val]; }); options.series.push({data: serie1}); so highcharts can understand it – MrFoh Commented Sep 18, 2012 at 21:54
• 1 Yeah, I see that its returning the correct data structure as expected by high charts, but the data itself, meaning the e.val, is probably not a number (its probably a string), I'm guessing. I would set a breakpoint and inspect the value, OR just do a parseFloat(e.val) in your map function and see what happens. – Paul Richter Commented Sep 18, 2012 at 21:59

1 Answer 1

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");