How to load data from JSON to Highchart?

Question

my Json looks like this:

[{"1332879360000.0": 300.0, "1332797760000.0": 353.0,

"1332799320000.0": 358.0, "1332879780000.0": 302.0, 

"1332800160000.0": 359.0, "1332880200000.0": 299.0, 

"1332880620000.0": 298.0, "1332881040000.0": 301.0, 

"1332881460000.0": 402.0, "1332880020000.0": 330.0, 

"1332882300000.0": 466.0, "1332796620000.0": 519.0, 

"1332800520000.0": 447.0, "1332797460000.0": 359.0, 

"1332801000000.0": 442.0}]

And I want to show those data in Highchart, with X-axis is date format,

("1332801000000.0" in JSON) and Y-axis is data (300.0 in JSON),

just like a point.

I notice there is a demo in Highchart.com, and it is run live data. I copy that, but I don't want to show lively. Just show those points at once,and make up a chart. Any solution? I'm not very familiar with JavaScript. But I think this may use the same method.

<script type="text/javascript">
    var chart; // global

    /**
     * Request data from the server, add it to the graph and set a timeout to request again
     */
    function requestData() {
        $.ajax({
            url: '/get_data', 
            success: function(point) {
                var series = chart.series[0],
                    shift = series.data.length > 20; // shift if the series is longer than 20

                // add the point
                chart.series[0].addPoint(eval(point), true, shift);


                // call it again after one second
                setTimeout(requestData, 5000);  
            },
            cache: false
        });
    }

    $(document).ready(function() {
        chart = new Highcharts.Chart({
            chart: {
                renderTo: 'test',
                defaultSeriesType: 'spline',
                events: {
                    load: requestData
                }
            },
            title: {
                text: 'Live random data'
            },
            xAxis: {
                type: 'datetime',
                tickPixelInterval: 150,
                maxZoom: 20 * 1000
            },
            yAxis: {
                minPadding: 0.2,
                maxPadding: 0.2,
                title: {
                    text: 'Value',
                    margin: 80
                }
            },
            series: [{
                name: 'Random data',
                data: []
            }]
        });



    });
    </script>

Solution

I am not sure to have understood your question.... so if I misunderstood, please correct me.

You can just copy your json data in a file which name is example.json and then in your ajax request make the following:

function requestData() {
    $.ajax({
        url: './example.json',  // depending which directory you save your file
        // the other code
  });
};

Comments

[Stella X]

Thanks for giving me the answer! My json data is not static, it is tgenerated from database. I have solved the problem myself. Thank you anyway

[stpoa]

I also created an example using data fetching from server.