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.
The problem is that this Json format does not correspond to the format that Highstock expects. The format that Highstock expects looks like this:
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?
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>