Quandl is a really fantastic source for all kinds of really useful financial data. For example you can see historical data on Tata Steel stock prices here. We will use this data to plot a Google Candlestick chart that shows open, close, high, low data for the Tata Steel stock both in a regular HTML page and in the blog below.
There are couple of interesting things in the following code that are interesting to know about.
- While pulling the CSV data from Quandl, you can specify the start/end dates and the level of aggregation, that is daily, weekly, monthly
- Google Candlestick charts expect the data to be in a certain order. Quandl provides the data in a different order and the columns needs to be rearranged. Hence the data table called "data" is converted into a view called "view" where we select columns 0,1,2,3,5 and reorder them into 0,3,1,5,2
- This view and not the data is used to draw the chart
<head> <title>Google Chart Example</title> <script src="https://www.google.com/jsapi"></script> <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script> <script src="http://prithwis.x10.bz/charts/jquery.csv-0.71.js"></script> --><!--<script src="https://jquery-csv.googlecode.com/files/jquery.csv-0.71.js"></script>--><script type='text/javascript'> // load the visualization library from Google and set a listener google.load("visualization", "1", {packages:["corechart"]}); google.setOnLoadCallback(drawCandlefromQuandl); function drawCandlefromQuandl(){ // grab the CSV $.get("https://www.quandl.com/api/v3/datasets/NSE/TATASTEEL.csv?api_key=xxxxxx.xxxxx&collapse=weekly&start_date=2012-12-31&end_date=2014-12-31", function(csvString) { // transform the CSV string into a 2-dimensional array var arrayData = $.csv.toArrays(csvString, {onParseValue: $.csv.hooks.castToScalar}); // this new DataTable object holds all the data var data = new google.visualization.arrayToDataTable(arrayData); // this view can select a subset of the data at a time var view = new google.visualization.DataView(data); view.setColumns([0,3,1,5,2]); var options = { title: "Tata Steel NSE Stock Prices from Quandl", hAxis: {title: view.getColumnLabel(0), minValue: view.getColumnRange(0).min, maxValue: view.getColumnRange(0).max}, vAxis: {title: "Price in INR"}, legend: 'none' }; var chart = new google.visualization.CandlestickChart(document.getElementById('QuandlCandle')); chart.draw(view, options); }); } </script> </head> <body> <div id="QuandlCandle" style="width: 900px; height: 500px;"> </div> </body>
Quandl provides a huge amount of data and this makes the chart rather clumsy. Our next step would be to see how to provide a control so that you can specify the dates of your data rather than hardcoding the same into the java script.
No comments:
Post a Comment