CODEWITHSUNDEEP
javascriptjqueryjsonhighchartscallback
Tibo M
Tibo M

Reputation: 15

Highcharts - Can't run example

I'm a beginner with HIGHCHARTS.

I want to start from this example : http://people.canonical.com/~bradf/media/highstock/examples/basic-line/index.htm

I downloaded the corresponding JSON file :

http://www.highcharts.com/samples/data/jsonp.php?filename=aapl-c.json

And I want to run it locally (and after test it with my own JSON files). But it doesn't works!

I use the source code of the example, I've just modified the getJSON line.

I have this :

$.getJSON('./data/json/'+ name+'-c.json&callback=?', function(data) { ... }

I think that the issue comes from the callback. Any ideas?

Upvotes: 1

Views: 715

Answers (2)

Rahul Gupta
Rahul Gupta

Reputation: 10141

To make the example working on your local you will have to follow the below steps:

  1. I assume that the json source code you have downloaded from the url http://www.highcharts.com/samples/data/jsonp.php?filename=aapl-c.json is stored in a file data.json

  2. Now as you would have noticed, the json source in the file data.json would be like as below:

    ?(/* AAPL historical OHLC data from the Google Finance API */
[

/* May 2006 */
[1147651200000,67.79],
[1147737600000,64.98],
[1147824000000,65.26],
[1147910400000,63.18],
.......
....

So now as you would have noticed there are code lines ?(/* AAPL historical OHLC data from the Google Finance API */ and /* May 2006 */ in the json source which are causing the things to go wrong by generating a parse error because the data source with such code lines is not a valid json string.

So you will have to remove each and every such invalid code line from the whole json file to make the things working correctly.

After removing all the invalid line of code your json file should look like:

[
[1147651200000,67.79],
[1147737600000,64.98],
[1147824000000,65.26],
....
...
]

3. Now till this step you are ready with a valid json data source for the Highstock chart, so finally to display the chart you will have to use the code like:

$(function() {
        $.getJSON('data.json', function(data) {

        // Create the chart
        window.chart = new Highcharts.StockChart({
            chart : {
                renderTo : 'container'
            },

            rangeSelector : {
                selected : 1
            },

            title : {
                text : 'AAPL Stock Price'
            },

            series : [{
                name : 'AAPL',
                data : data,
                tooltip: {
                    valueDecimals: 2
                }
            }]
        });
    });

 });

The whole page source code:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="http://code.highcharts.com/stock/highstock.js"></script>
<script src="http://code.highcharts.com/stock/modules/exporting.js"></script>
<script>
    $(function() {
        $.getJSON('data.json', function(data) {

        // Create the chart
        window.chart = new Highcharts.StockChart({
            chart : {
                renderTo : 'container'
            },

            rangeSelector : {
                selected : 1
            },

            title : {
                text : 'AAPL Stock Price'
            },

            series : [{
                name : 'AAPL',
                data : data,
                tooltip: {
                    valueDecimals: 2
                }
            }]
        });
    });

     });
    </script>
    <body>
        <div id="container" style="height: 500px; min-width: 500px"></div>
    </body>

Upvotes: 3

Davie Brown
Davie Brown

Reputation: 717

&callback=? is normally appended for jsonp which is a technique used for cross domain calls (to other websites for example.)

From what I can see you should try removing it from the call. In your case:

$.getJSON('./data/json/'+ name+'-c.json, function(data) { ... }

Upvotes: 0

Related Questions