CODEWITHSUNDEEP
javascriptphpjsonhighcharts
schlomm
schlomm

Reputation: 571

Use server-side json with Highchart

I've searched for a few hours and looked for tons of examples, but in the end noting has worked for me.
My problem: I want to use a server-side json for a Line-Highchart. In the examples, which I've found the json comes either from a database or in an already preformated json-file.
For my use case it looks like the following: I want to visualize the value "depending" on their timestamp.

sampleData.json

[{
    "timestamp": "2014-05-22T02:15:00+02:00",
    "value": 235.0
}, {
    "timestamp": "2014-05-22T02:30:00+02:00",
    "value": 234.0
}, {
    "timestamp": "2014-05-22T02:45:00+02:00",
    "value": 234.0
}, {
    "timestamp": "2014-05-22T03:00:00+02:00",
    "value": 234.0
}, {
    "timestamp": "2014-05-22T03:15:00+02:00",
    "value": 234.0
}, {
    "timestamp": "2014-05-22T03:30:00+02:00",
    "value": 234.0
}, {
    "timestamp": "2014-05-22T03:45:00+02:00",
    "value": 234.0
}, {
    "timestamp": "2014-05-22T04:00:00+02:00",
    "value": 234.0
}, {
    "timestamp": "2014-05-22T04:15:00+02:00",
    "value": 234.0
}, {
    "timestamp": "2014-05-22T04:30:00+02:00",
    "value": 235.0
}, {
    "timestamp": "2014-05-22T04:45:00+02:00",
    "value": 235.0
}, {
    "timestamp": "2014-05-22T05:00:00+02:00",
    "value": 235.0
}]

This json file is read by my getData.php

<?php
// It reads a json formatted text file and outputs it.
$json_o = file_get_contents("sampledata.json");
echo $json_o;
?>

The output looks exactly like the input, so exactly like the sampleData.json itself.

Now I use my highchart.html to create a Highchart.

    <!DOCTYPE html>
    <html>
    <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <title> - jsFiddle demo</title>
    <script type='text/javascript' src='//code.jquery.com/jquery-1.9.1.js'></script>
    <script src="http://code.highcharts.com/highcharts.js"></script>
    <script src="http://code.highcharts.com/modules/data.js"></script>
    <script src="http://code.highcharts.com/modules/exporting.js"></script>
    <!-- Additional files for the Highslide popup effect -->
    <script type="text/javascript" src="http://www.highcharts.com/media/com_demo/highslide-full.min.js"></script>
    <script type="text/javascript" src="http://www.highcharts.com/media/com_demo/highslide.config.js" charset="utf-8"></script>
    <link rel="stylesheet" type="text/css" href="http://www.highcharts.com/media/com_demo/highslide.css" />
    <div id="container" style="min-width: 310px; height: 400px; margin: 0 auto">
    </div><style type='text/css'></style>

    <script type='text/javascript'>
    $(function () {
        $(document).ready(function () {

            $(document).ready(function () {
                function requestData() {
                    $.ajax({
                        url : 'getData.php',
                        datatype : 'json',
                        success : function (data) {
                            alert(data);
                            chart.series[0].setData(data[0]);
                        },
                        cache : false
                    });
                }

                var chart;
                //Chart bits
                chart = new Highcharts.Chart({
                        chart : {
                            renderTo : 'container',
                            type : 'line',
                            events : {
                                load : requestData
                            }
                        },
                        title: {
                            text: 'Line Chart'
                        },
                        xAxis: {
                            type: 'datetime',
                            minRange: 1 * 24 * 3600000 // one day
                        },
                        yAxis : {
                            title : {
                                text : 'Value'
                            }
                        },
                        legend: {
                            enabled: true
                        },
                        series : [{
                                name : 'Random data',
                                data : [0]
                            }
                        ]
                    });
            });
        });
    });
  </script>
  </head>
  <body></body>
</html>

I've also put all of it in a JsFiddle (unfortunately with a "XMLHttpRequest cannot load"-Error) but maybe it is useful: http://jsfiddle.net/ft8hc/1/

Now we come to my actual questions:

  1. Until now I get no data into my Chart. Although it is created, but there is no data loaded. The json itself is loaded - alert(data) shows me the sampleData.json.
  2. Although I've looked through existing examples, I could not figured out, how to define the attributes, which should be used to draw the line and the axes. For me timestamp and value should be used.
  3. Additionally I am not sure, if the json Format is the right one that can be used by Highchart. Is it okay like this or do I have to parse it differently?

Would be absolutely awesome if someone could help me. I've tried it for hours without success :-(

Upvotes: 1

Views: 791

Answers (2)

Sebastian Bochan
Sebastian Bochan

Reputation: 37578

Your json should - use values x/y instead of your custom names - date should be timestamp (time in miliseconds) [number type] - value should be number

Upvotes: 0

Ash
Ash

Reputation: 2595

This is because you have no data specified in your chart definition. See:

series : [{
          name : 'Random data',
           data : [0]
         }]

Upon getting the JSON data, you must PUSH that data into this Series.data and generate the chart thereafter. You can refer to this solution : https://stackoverflow.com/a/8169187/3660930

Upvotes: 1

Related Questions