CODEWITHSUNDEEP
jqueryjsonhighcharts
Randall Sexton
Randall Sexton

Reputation: 101

Dynamic jSON into Highcharts Pie Chart

I'm fighting with Highcharts right now trying to get data into it. If I hard-code the options and series, I can get it to work - so it's not my configuration (i.e. scripts, css, etc.)

I looked at the following question here on SO as it was related: Ajax JSON in to Highcharts Pie Chart

Unfortunately, it didn't help. Can someone take a look and see what it is that I'm doing wrong?

(This code is directly related to the previously-mentioned SO post)

function renderChart(divId, chartType, chartTitle){
    var options = createOption(divId, chartType, chartTitle);
    var series = createSeries();
    options.series = series;    
    var chart = new Highcharts.Chart(options);
}

function createOption(divId, chartType, chartTitle){
    var options = {
        chart: {
            renderTo: divId,
            defaultSeriesType: 'pie'
        },
        title: {
            text: chartTitle
        },
        plotOptions: {
            pie: {
                allowPointSelect: true,
                cursor: 'pointer',
                dataLabels: {
                    enabled: false
                },
                showInLegend: true
            }
        },
        series: []
        };
        return options; 
}

function createSeries(){
    var series = [];
    series.push('[');
    series.push('{');
    series.push('"type" : "pie",');
    series.push('"name" : "fruits",');
    series.push('"data" : [');
    series.push('[');
    series.push('"Apple",')
    series.push('43.0');
    series.push('],');
    series.push('[');
    series.push('"Pear",')
    series.push('57.0');
    series.push(']');
    series.push(']');
    series.push('}');
    series.push(']');
    return series.join('');
}

Thanks in advance.

Disregard. Easiest way - have the server cook up the series object. See this post: iterate JSON response with jQuery for Highcharts

Upvotes: 0

Views: 10716

Answers (2)

aungye
aungye

Reputation: 2389

You can bind chart with JSON data, directly. You just need to set the json property names as highchart standard. 'Y' for value and 'name' for label.

Your JSON should be as like follow:

[ { name: "Apple", y: 25 }, { name: "Pear", y: 20 } ]

Upvotes: 0

eolsson
eolsson

Reputation: 12727

You are feeding Highcharts a string:

'[{"type" : "pie","name" : "fruits","data" : [["Apple",43.0],["Pear",57.0]]}]'

where it expects an array of configuration object for the series like:

[{
    type : "pie",
    name : "fruits",
    data : [["Apple",43.0],["Pear",57.0]]
}]

Upvotes: 3

Related Questions