Skip to content Skip to sidebar Skip to footer

Populate Json Object To Highchart Bar Chart

I am newbie parsing JSON object to highchart and I would like to plot basic bar graph. I have done on the title of graph. The problem is that the series that I would like to show i

Solution 1:

You can pre-process the data to form like

var answers = ['Yes','No' ,'OK'];
var answer_counts= [
            {name: 'Yes', data : [2,0,0]},
            {name: 'No', data: [0,3,0]},
            {name: 'OK', data: [0,0,1]} ];

Then plot it with

varoptions={chart: {
                    renderTo:'container',
                    type:'column'
                },title: {
                    text:'QAAnswers'
                },xAxis:{categories:answers,title: {
                        text:'Answer'
                    }
                },yAxis: {
                    min:0,
                    title: {
                        text:'Answer Count'
                    }
                },series:answer_counts};varchart=newHighcharts.Chart(options);

I have done in the fiddle, http://jsfiddle.net/gwC2V/1/

Let us know if it helps.

Solution 2:

Below Example can help you

The JSON file

[
    [1,12],
    [2,5],
    [3,18],
    [4,13],
    [5,7],
    [6,4],
    [7,9],
    [8,10],
    [9,15],
    [10,22]
]

use getJSON() to retrive data from JSON file and Populate to CHART

$(document).ready(function() {

    var options = {
        chart: {
            renderTo: 'container',
            type: 'spline'
        },
        series: [{}]
    };

    $.getJSON('data.json', function(data) {
        options.series[0].data = data;
        var chart = newHighcharts.Chart(options);
    });

});

Here is link

Post a Comment for "Populate Json Object To Highchart Bar Chart"