how do I pass the Ajax response data in my highcharts

Question

I want to draw a Line Graph with irregular Time interval . I want to pass the data to it via my Ajax calls. How do I do it?

My data is of the following format-

result = {u'New Delhi': [[1383741000000L, 54.2], [1383741900000L, 59.34], [1383742800000L, 64.3]], u'Bangalore': [[1383741000000L, 1608.2], [1383741900000L, 1611.3], [1383742800000L, 1612.29]]}

ie

result = {'name1':[[time1(in secs), value1][time1(in secs), value1]], 'name2':[[time1(in secs), value1][time2(in secs), value2]] }

as in like this.

series: [{
    name: result.keys(),
    data: result.values()
}]

I should get two lines and thier respective values.

How do I pass my values to the data.?

Here is my code This is how my result looks like .

var result = [{  // this value is to be passed downwards.
    'data': [
        [1383741000000, 1608.3000000000002],
        [1383741900000, 1611.9999999999973],
        [1383742800000, 1612.299999999997]
    ],
    'name': 'Bangalore'
}, {
    'data': [
        [1383741000000, 54.2],
        [1383741900000, 54.300000000000004],
        [1383742800000, 54.300000000000004]
    ],
    'name': 'New Delhi'
}]

$(function () {
        $('#container').highcharts({
            title: {
                text: 'Monthly Average Temperature',
                x: -20 //center
            },
            subtitle: {
                text: 'Source: WorldClimate.com',
                x: -20
            },
            xAxis: {
                categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
                    'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
            },
            yAxis: {
                title: {
                    text: 'Temperature (°C)'
                },
                plotLines: [{
                    value: 0,
                    width: 1,
                    color: '#808080'
                }]
            },
            tooltip: {
                valueSuffix: '°C'
            },
            legend: {
                layout: 'vertical',
                align: 'right',
                verticalAlign: 'middle',
                borderWidth: 0
            },
            series: result,  // over here. I'm not getting the line.
        });
    });

how can I do it?

Answer 1

in success callback of the ajax call pass the response to a method that will parse the data for you as per the required format.

now pass that to the highcharts and build the chart

Answer 2

The problem is that you are setting categories ( one category = 1 value ) and then you are using timestamps to display line. Let's consider: 1383741000000 - that would be mean to display 1383741000000th category and display 1383741000000 ticks and names. This is not possible.

Solution: Remove categories and set xAxis.type = "datetime"

Working example: http://jsfiddle.net/3bQne/707/