how to plot the data value from JSON in Highcharts

Question

I have wrote a jquery as :

$(function () {
var data = [
{"series_name":"Actual","period_name":"Q1 / 2013","period_final_value":"17"},
{"series_name":"Actual","period_name":"Q2 / 2013","period_final_value":"15"},
{"series_name":"Actual","period_name":"Q3 / 2013","period_final_value":"13"},

{"series_name":"Alarm","period_name":"Q1 / 2013","period_final_value":"14.103"},
{"series_name":"Alarm","period_name":"Q2 / 2013","period_final_value":"14.404499999999999"},
{"series_name":"Alarm","period_name":"Q3 / 2013","period_final_value":"14.966999999999999"},

{"series_name":"Target","period_name":"Q1 / 2013","period_final_value":"15.67"},
{"series_name":"Target","period_name":"Q2 / 2013","period_final_value":"16.005"},
{"series_name":"Target","period_name":"Q3 / 2013","period_final_value":"16.63"}
];
var seriesData = [];
var xCategories = [];
var i, cat;
for(i = 0; i < data.length; i++){
     cat = '' + data[i].period_name;
     if(xCategories.indexOf(cat) === -1){
        xCategories[xCategories.length] = cat;
     }
}
for(i = 0; i < data.length; i++){
    if(seriesData){
      var currSeries = seriesData.filter(function(seriesObject){ return seriesObject.name == data[i].series_name;});
      if(currSeries.length === 0){
          seriesData[seriesData.length] = currSeries = {name: data[i].series_name, data: []};
      } else {
          currSeries = currSeries[0];
      }
      var index = currSeries.data.length;
      currSeries.data[index] = data[i].period_final_value;
    } else {
       seriesData[0] = {name: data[i].series_name, data: [data[i].period_final_value]}
    }
}
var chart;
$(document).ready(function() {
    chart = new Highcharts.Chart({
        chart: {
            renderTo: 'container',
            type: 'column'
        },
        title: {
            text: 'Stacked column chart'
        },
        xAxis: {
            categories: xCategories
        },
        yAxis: {
            min: 0,
            max: 30,
            title: {
                text: 'Total fruit consumption'
            },
            stackLabels: {
                enabled: false,
                style: {
                    fontWeight: 'bold',
                    color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
                }
            }
        },
        legend: {
            align: 'right',
            x: -100,
            verticalAlign: 'top',
            y: 20,
            floating: true,
            backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColorSolid) || 'white',
            borderColor: '#CCC',
            borderWidth: 1,
            shadow: false
        },
        tooltip: {
            formatter: function() {
                return '<b>'+ this.x +'</b><br/>'+
                    this.series.name +': '+ this.y +'<br/>'+
                    'Total: '+ this.point.stackTotal;
            }
        },

        series: seriesData
    });
});

});

the code above also consists of the JSON data format. but the values are not showing up. the code plots X axis with Q1 Q2 and Q3 and the Y axis, also the Series are displayed in the Legend but the code does't have any columns on screen. any help appreciated. Thank You.

Check if you got the seriesData in the correct format for highcharts — Manu M, Nov 13 '13 at 09:31
@ManuM thanks . it works ................... check Fiddle @ http://jsfiddle.net/PrasadSS/UMeGS/55/ — PrasadSS, Nov 13 '13 at 09:37
hope this helps http://stackoverflow.com/questions/4210879/reload-chart-data-via-json-with-highcharts?rq=1 — Barun, Nov 13 '13 at 10:33

score 0 · Answer 1 · answered Nov 14 '13 at 12:37

0

You need to use numbers, instead of strings, so each point y value should be parsed by parseFloat() to achieve correct value.

How your seriesData[0] looks like on output?

answered Nov 14 '13 at 12:37

Sebastian Bochan

37,348
3
49
75

Please look at my [here](http://stackoverflow.com/questions/27983248/need-help-in-plotting-a-chart-using-highcharts-in-angularjs) – AabinGunz Jan 17 '15 at 19:04
Im sorry, im not familar with the moment.js. Dates can be parsed by spliting text and use Date.UTC() or Date.parse(). – Sebastian Bochan Jan 19 '15 at 11:10
Thanks for your response, I am able to convert my date using `var st = new Date(moment(start_temp).valueOf()).getTime();` under getOperationReportChartSeriesData function. I am even getting some bars but looks like the difference is very low.. in seconds so the bar is almost invisible.. Trying to fix the same now. Any help would be appreciated. Thanks – AabinGunz Jan 19 '15 at 11:39

how to plot the data value from JSON in Highcharts

1 Answers1