CODEWITHSUNDEEP
jsonparsinghighchartslinechart
Mikkel Gunvald
Mikkel Gunvald

Reputation: 369

Parsing json data to highcharts

I have searched and searched but i'm unable to find the solution yet.

I'm trying to load data into Highcharts with json from my server. This is the json returned from my server:

   [{
    "x": "\/Date(1352674800000)\/",
        "y": 621
}, {
    "x": "\/Date(1352761200000)\/",
        "y": 646
}, {
    "x": "\/Date(1352847600000)\/",
        "y": 690
}, {
    "x": "\/Date(1352934000000)\/",
        "y": 688
}, {
    "x": "\/Date(1353020400000)\/",
        "y": 499
}]

this is my highchart: (from my jsfiddle)

    var seriesData = [];
for (var i = 0; i < data.length; i++) {
   var dateString = data[i].x;
var x = dateString.replace(/\/Date\((\d+)\)\//, '$1');


    var y = data[i].y;


    seriesData.push([x, y]);

}
alert(seriesData);

var options = {
    chart: {
        renderTo: 'container'
    },
    xAxis: {        
        type: 'datetime',
        labels: {
            formatter: function() {
            var monthStr = Highcharts.dateFormat('%a', this.value);
            var firstLetter = monthStr.substring(0, 1);
            return firstLetter;
            }
        }
    },



    series: []
};

function myfunk() {
   options.series.push(seriesData);



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

but my data is not showing.

i made a jsfiddel: http://jsfiddle.net/grVFk/12105/

Edit:

Now it's working but is the data point showing the wrong dates? http://jsfiddle.net/dxCHB/18/

If someone could help me i would be very grateful ! :)

Upvotes: 1

Views: 1954

Answers (2)

Sebastian Bochan
Sebastian Bochan

Reputation: 37578

Your data should be number, so you can use parseFloat() function to transform string to number.

Upvotes: 0

SteveP
SteveP

Reputation: 19093

You were very close. The series array needs to contain an object with a data member:

 series: [
    {
       data:[]
    }
 ]

You can then set it using:

function myfunk() {
    options.series[0].data = seriesData;

I modified your jsfiddle: http://jsfiddle.net/dxCHB/

Format your date numerically

seriesData.push([x/1, y]);

Upvotes: 2

Related Questions