CODEWITHSUNDEEP
javascriptphpjsonhighcharts
MacD
MacD

Reputation: 586

Formating my json for highcharts

I have this json array returned from an API.

[
{
    "localTimestamp": 1383091200,
    "swell": {
        "absMinBreakingHeight": 3.255
    }
},
{
    "localTimestamp": 1383102000,
    "swell": {
        "absMinBreakingHeight": 2.968
    }
}
]

I need to get this to work with highcharts and I am totally lost. The data comes from an external API.

Do I need to bring in the array and change it to fit highcharts, or point highcharts to the API's URL and adjust highchart's code to work with what they send out.

I have the sample code from Highcharts that I have been working with here:

html:

<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
</head>
<body>
<script>
$(document).ready(function() {
    var options = {
        chart: {
            renderTo: 'container',
           type: 'spline'
        },
        series: [{}]
    };

    var url =  "jsonp.php?callback=?";
    $.getJSON(url,  function(data) {
        options.series[0].data = data;
        var chart = new Highcharts.Chart(options);
    });
});



</script>

</script>
</head>
<body>

<div id="container" style="width: 100%; height: 400px; margin: 0 auto"></div>

</body>
</html>






<script type="text/javascript" src="/js/themes/gray.js"></script>

</body>
</html>

and my php code:

<?php
header("content-type: application/json"); 

$array = array(7,4,2,8,4,1,9,3,2,16,7,12);

echo $_GET['callback']. '('. json_encode($array) . ')';    

?>

I know the php is wrong (obviously) I just don't know how to format my json to talk to highcharts. Thanks in advance M

To be clear, I'm trying to get my data (top) into the php array (bottom) ina format that can be read by highcharts.

Upvotes: 0

Views: 449

Answers (1)

Sebastian Bochan
Sebastian Bochan

Reputation: 37588

You need to transform your data (from JSON) into correct format like array of object [{x:timestamp,waveheight},{timestamp,waveheight]] or array of arrays like 

[[timestamp,waveheight],[timestamp,waveheight]]

Generally in highcharts you need to use x/y parameter instead of you custom names.

Upvotes: 1

Related Questions