highchart bubble chart dynamic- json format

Question

need to have json format for bubble chart. data came from database in json format. there is some issue in json format i use. heres my code and json format

$(function() {

$.getJSON("scatter.json", function(json3) {




var chart;
    chart = new Highcharts.Chart({

        chart: {
            type: 'bubble',
            renderTo: 'container4',
            plotBorderWidth: 1,
            zoomType: 'xy'
        },

        title: {
            text: 'Cost, Profit and Revenue'
        },
        subtitle: {
                text: 'for 2012'
            },
        xAxis: {
            gridLineWidth: 1,
                title: {
                    style: {
                        fontSize: '9px',            
                    }            
                },            
        },

        yAxis: {
            startOnTick: false,
            endOnTick: false,
            title: {
                    text: 'In Dollars'
                },
            max:500000,
            min:0
        },

        series: [{
                    name: 'companyA',
                    data: json3[0]
                    }, {
                    name: 'companyB',
                    data: json3[1]
                }]



    });
});
});

and heres json data:

[[ { "Month": "Jul", "Cost": "632678", "Profit": "457695", "Revenue": "637845" }, { "Month": "Aug", "Cost": "776344", "Profit": 356179", "Revenue": "593207" }, { "Month": "Sep", "Cost": "248527", "Profit": "70855", "Revenue": "532231" }, { "Month": "Oct", "Cost": "286024", "Profit": "451776", "Revenue": "217594" } ],[ { "Month": "Aug", "Cost": "776344", "Profit": "356179", "Revenue": "593207" }, { "Month": "Sep", "Cost": "248527", "Profit": "70855", "Revenue": "532231" }, { "Month": "Oct", "Cost": "286024", "Profit": "451776", "Revenue": "217594" }]]

pawel_d · Answer 1 · 2016-07-04T15:46:14.753

There is a mistake in your JSON. Inside the second array, before the value of property ‘Profit’, there is lack of the first quotation mark. To validate your JSONs you can use this page: http://jsonlint.com/. Please, look at this example: http://jsfiddle.net/tbb71s88/3/.

series: [{
    name: 'companyA',
    data: results[0]
}, {
    name: 'companyB',
    data: results[1]
}]

Did you want to achieve something like this? To make this work, you need to change your JSON structure, to fit bubble series data, as described here: http://api.highcharts.com/highcharts#plotOptions.bubble.

highchart bubble chart dynamic- json format

1 Answers1