Press Georgiev Press Georgiev - 4 months ago 47
Javascript Question

Highchart series from JSON array

I am currently doing a web application where I am trying to pass data from a servlet to a JSP so that it can be used in a Highchart. I am creating a JSON array of dynamic objects and I am passing it to my JSP using AJAX. An example JSON array looks like this:

[{"data":[2,4,6,6,0,0,0,0,0,0,0,0],"name":"DESIGN"},
{"data":[1,0,0,1,0,0,0,0,0,0,0,0],"name":"COLOUR"}]


I want each of those arrays to be used as a HighChart series, where
"name"
is the name of the series and
"data"
is an array representing monthly sales. After reading tons of examples, I am still unsuccessfully trying to parse the array from my AJAX success function with something along the lines of:

$.ajax({
type : 'GET',
url : '/InventoryManagement/dashboardData',
datatype : 'json',
success : function(data) {
var dataObj = JSON.parse(data);
var seriesArr = new Array();
$.each(dataObj, function(key, d) {
var series = {
name : key,
data : []
};
series.key = key;
series.d = d;

seriesArr.push(series);
});


$(function () {
var options = {
chart : {
renderTo : 'overallSales',
type : 'column'
},
title : {
text : 'Overal Unit Sales'
},
xAxis : {
categories : [ 'Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul',
'Aug', 'Sep', 'Oct', 'Nov', 'Dec' ]
},
yAxis : {
title : {
text : 'Units sold'
}
},
series : seriesArr

};
var chart = new Highcharts.Chart(options);
});
}


I know I am not passing the data in the
$.each
properly, but this is the first time I'm working with AJAX, JSON or Highcharts, so please tell me how to fix this!

Answer
$(function () {
        $('#container').highcharts({
            chart: {
                type: 'column'
            },
            title: {
                text: 'Overal Unit Sales'
            },
            xAxis: {
                categories: [ 'Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul',
                    'Aug', 'Sep', 'Oct', 'Nov', 'Dec' ],
                title: {
                    text: null
                }
            },
            yAxis: {
                min: 0,
                title: {
                    text: 'Value',
                    align: 'high'
                },
                labels: {
                    overflow: 'justify'
                }
            },
            tooltip: {
                valueSuffix: 'unit'
            },
            plotOptions: {
                bar: {
                    dataLabels: {
                        enabled: true
                    }
                }
            },
            legend: {
                layout: 'vertical',
                align: 'right',
                verticalAlign: 'top',
                x: -40,
                y: 80,
                floating: true,
                borderWidth: 1,
                backgroundColor: ((Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'),
                shadow: true
            },
            credits: {
                enabled: false
            },
            series: dataObj
        });
    });

container is id of div of you chart parent element.where you place your chart

just add your dataObj into series option in Highchart.In your code you didn't mentions where is to placed.

DEMO