Monthly Archives: August 2013

Candlestick.js project on github

Candlestick.js beautiful stock charts in HTML5 canvas, free and open source

Searching the web for a nice tool to display stock charts left me with the conclusion I need to start this myself.

The other libraries for this were not exactly what I wanted so this new github project is the result of that.

The demo page will be up soon. I wanted to let you know that it is out there as I know others need this for their web site too.

The project is very simple, you only need the main Candlestick.js file – the rest is for the demo around it.

Here are the steps to use it:

  1. Include the js file in your html page in the <head> section like this:
    <script src="Candlestick.js"></script>
  2. Add a canvas element where you want the chart to appear in the document body:
    <canvas id="myChart" width="600" height="400"></canvas>
  3. you need to have a data file for the stock you want to display in the format of yahoo’s finance site, go to finance.yahoo.com pick the ticker you want and click on “Historical Prices” then download your file using the link at the bottom called “Download to Spreadsheet”, put this file on your web server.
  4. call the js function that actually draws the chart:
    var options = {
      title: 'The title for the chart'
      , indicators : [
        ['EMA', 'c', 26]
        , ['SMA', 'c', 200]
      ]
    };
    $.get("theHistoryFileFromYahooFinance.txt",function(data) {
      Candlestick("myChart",data, options);
    }

Here is a picture of the demo chart as of right now.

Candlestick.js project on github