cant work live stock graph in android using json data url

Question

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

$(function() {

  $.getJSON('http://www.highcharts.com/samples/data/jsonp.php?filename=aapl-c.json&callback=?', 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 src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.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>

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

I downloaded the corresponding JSON file :

http://chartapi.finance.yahoo.com/instrument/1.0/PTC/chartdata;type=quote;range=1d/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?

Could you try to change `callback=?` to `callback= finance_charts_json_callback`? You have JSONP, so that may be tha reason. Also, make sure you have some webserver as the backend - modern browsers don't allow to load local files. — Paweł Fus, Mar 29 '16 at 09:37

score 0 · Answer 1 · edited May 23 '17 at 11:45

I tweaked the code from the example you linked to get data in the right format for highcharts. Not sure this is the best way to do it but you can use JSON.stringify to view the JSON data and extract from it the fields you want (I used "Timestamp" and "close"). More in comments-- hope this helps!

$(function() {

  // add ?callback=? 

  $.getJSON('http://chartapi.finance.yahoo.com/instrument/1.0/PTC/chartdata;type=quote;range=1d/json/?callback=?', function(data) {
      // console.log(data.series);
      // console.log(JSON.stringify(data.series));
      // extract the data you need 
      myData = [];
      data.series.forEach(function(item) {
        myData.push([item.Timestamp, item.close]);

      });
      console.log(JSON.stringify(myData));
      // Create the chart
      window.chart = new Highcharts.StockChart({
        chart: {
          renderTo: 'container'
        },

        rangeSelector: {
          selected: 1
        },

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

        series: [{
          name: 'AAPL',
          // use extracted data 
          data: myData,
          tooltip: {
            valueDecimals: 2
          }
        }]
      });
    })
    // check for errors
    .done(function() {
      console.log('getJSON request succeeded!');
    })
    .fail(function() {
      console.log('getJSON request failed! ');
    })
    .always(function() {
      console.log('getJSON request ended!');
    });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.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>
<div id="container" style="height: 500px; min-width: 500px"></div>

EDIT: and I would recommend to check for error messages as in https://stackoverflow.com/a/19075640/2314737

    // check for errors
    .done(function() {
      console.log('getJSON request succeeded!');
    })
    .fail(function() {
      console.log('getJSON request failed! ');
    })
    .always(function() {
      console.log('getJSON request ended!');
    });

@sushant it's not clear what you need ... have you checked the console for error messages? — user2314737, Mar 29 '16 at 08:44

score 0 · Answer 2 · answered Mar 28 '16 at 10:02

0

Please manipulate your corresponding JSON format to something similar to what Highcharts consumes which is this.

answered Mar 28 '16 at 10:02

Wilts C

1,720
1
21
28

cant work live stock graph in android using json data url

2 Answers2