jsonhighcharts

Highcharts stock chart based on data from Quandl API


I would like to use the "Highstock" charting tool from HighCharts.com to create a stock chart based on price data from Quandl's API.

By using Quandl's API, I can get price information on a stock for each trading day. For instance, the following URL would give me Microsoft's stock price each day since January 3rd 2015 to February 3rd 2015 in a Json format.

Quandl.com Json link

The problem is that this Json format does not correspond to the format that Highstock expects. The format that Highstock expects looks like this:

Highcharts Json link

So the question is can I convert the Json output from Quandl to correspond to the Json format that Highstock expects? Or can I modify the Highstock code to accept the Quandl Json format?


Solution

  • It's a pretty easy conversion in JavaScript:

      var hiJson = quandlJson.dataset.data.map(function(d){
        return [new Date(d[0]).getTime(), d[4]];
      });
    

    This would return an array of arrays of date in milliseconds and close price.


    Full example:

    <!DOCTYPE html>
    <html>
    
    <head>
      <script data-require="jquery@2.1.4" data-semver="2.1.4" src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
      <script data-require="highstock@0.0.1" data-semver="0.0.1" src="http://code.highcharts.com/stock/highstock.js"></script>
      <script data-require="highstock@0.0.1" data-semver="0.0.1" src="http://code.highcharts.com/stock/modules/exporting.js"></script>
    </head>
    
    <body>
      <div id="container"></div>
      <script>
        var json = {
          "dataset": {
            "id": 9775138,
            "dataset_code": "MSFT",
            "database_code": "YAHOO",
            "name": "MSFT: Microsoft Corporation -",
            "description": "Exchange : . Key Statistics",
            "refreshed_at": "2015-10-18T19:49:01.957Z",
            "newest_available_date": "2015-10-16",
            "oldest_available_date": "1986-03-13",
            "column_names": ["Date", "Open", "High", "Low", "Close", "Volume", "Adjusted Close"],
            "frequency": "daily",
            "type": "Time Series",
            "premium": false,
            "limit": null,
            "transform": null,
            "column_index": null,
            "start_date": "2015-01-03",
            "end_date": "2015-02-03",
            "data": [
              ["2015-01-05", 46.369999, 46.73, 46.25, 46.330002, 39673900.0, 45.406156],
              ["2015-01-06", 46.380001, 46.75, 45.540001, 45.650002, 36447900.0, 44.739715],
              ["2015-01-07", 45.98, 46.459999, 45.490002, 46.23, 29114100.0, 45.308148],
              ["2015-01-08", 46.75, 47.75, 46.720001, 47.59, 29645200.0, 46.641029],
              ["2015-01-09", 47.610001, 47.82, 46.900002, 47.189999, 23942800.0, 46.249004],
              ["2015-01-12", 47.419998, 47.540001, 46.360001, 46.599998, 23651900.0, 45.670769],
              ["2015-01-13", 46.970001, 47.91, 46.060001, 46.360001, 35270600.0, 45.435556],
              ["2015-01-14", 45.959999, 46.240002, 45.619999, 45.959999, 29719600.0, 45.043531],
              ["2015-01-15", 46.220001, 46.380001, 45.41, 45.48, 32742300.0, 44.573103],
              ["2015-01-16", 45.310001, 46.279999, 45.169998, 46.240002, 35695300.0, 45.31795],
              ["2015-01-20", 46.299999, 46.650002, 45.57, 46.389999, 36161900.0, 45.464957],
              ["2015-01-21", 45.939999, 46.139999, 45.48, 45.919998, 39081100.0, 45.004328],
              ["2015-01-22", 46.380001, 47.139999, 46.080002, 47.130001, 35898000.0, 46.190203],
              ["2015-01-23", 47.360001, 47.389999, 46.799999, 47.18, 26211600.0, 46.239205],
              ["2015-01-26", 47.0, 47.130001, 46.240002, 47.009998, 42525500.0, 46.072593],
              ["2015-01-27", 42.950001, 43.200001, 42.110001, 42.66, 169164000.0, 41.809336],
              ["2015-01-28", 42.740002, 42.790001, 41.16, 41.189999, 84507100.0, 40.368647],
              ["2015-01-29", 40.93, 42.119999, 40.790001, 42.009998, 63585300.0, 41.172296],
              ["2015-01-30", 41.549999, 41.580002, 40.349998, 40.400002, 78004900.0, 39.594403],
              ["2015-02-02", 40.59, 41.369999, 40.23, 41.279999, 50352500.0, 40.456853],
              ["2015-02-03", 41.630001, 41.93, 41.049999, 41.599998, 52082400.0, 40.770471]
            ],
            "collapse": null,
            "order": "asc",
            "database_id": 394
          }
        };
    
        var hiJson = json.dataset.data.map(function(d) {
          return [new Date(d[0]).getTime(), d[4]]
        });
    
        // Create the chart
        $('#container').highcharts('StockChart', {
          rangeSelector: {
            selected: 1
          },
          title: {
            text: 'MS Stock Price'
          },
          series: [{
            name: 'MS',
            data: hiJson,
            tooltip: {
              valueDecimals: 2
            }
          }]
        });
      </script>
    </body>
    </html>


    Full example with AJAX:

    <!DOCTYPE html>
    <html>
    
    <head>
      <script data-require="jquery@2.1.4" data-semver="2.1.4" src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
      <script data-require="highstock@0.0.1" data-semver="0.0.1" src="http://code.highcharts.com/stock/highstock.js"></script>
      <script data-require="highstock@0.0.1" data-semver="0.0.1" src="http://code.highcharts.com/stock/modules/exporting.js"></script>
    </head>
    
    <body>
      <div id="container"></div>
      <script>
        $.getJSON('https://www.quandl.com/api/v3/datasets/YAHOO/MSFT.json?start_date=2015-01-03&end_date=2015-02-03&order=asc', function(json) {
            var hiJson = json.dataset.data.map(function(d) {
              return [new Date(d[0]).getTime(), d[4]]
            });
    
            // Create the chart
            $('#container').highcharts('StockChart', {
              rangeSelector: {
                selected: 1
              },
              title: {
                text: 'MS Stock Price'
              },
              series: [{
                name: 'MS',
                data: hiJson,
                tooltip: {
                  valueDecimals: 2
                }
              }]
            });
        });
      </script>
    </body>
    
    </html>