Installing and Using Highstock

Posted on Thursday, August 23, 2012



This is going to be a bare bones how to install and use Highstock.
But first of all what is Highstock?

To quote the site
Highstock lets you create stock or general timeline charts in pure JavaScript, including sophisticated navigation options like a small navigator series, preset date ranges, date picker, scrolling and panning. [1]

The site for Highstock is located here http://www.highcharts.com/products/highstock [1]

It is highly compatible with different browsers even going so far back as to support IE6.  Its free to use for non-commercial work.   For a commercial license you can go to this page http://shop.highsoft.com/highstock.html [3]. I think their licensing is very reasonable and gives you a lot of control.



To see a demo of what it can do go to this site.




Here is highcharts how to page http://www.highcharts.com/documentation/how-to-use [4] This document is based off this document.
Download Highstock from their web site  http://www.highcharts.com/download [4]




Click on highstock 1.1.6

The zip file downloaded has lots of examples as well as the code

Expand the zip folder and copy the js folder to a new folder.




In that folder create a new document called test.html


Highcharts requires JQuery, MooTools, or Prototype.   For this example I will keep it simple and use JQuery.


<!DOCTYPE HTML>
<html>
<head>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="js/highstock.js"></script>

</head>
<body>

</body>
</html>



Now within the body add in a div to place the graph in.



<!DOCTYPE HTML>
<html>
<head>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="js/highstock.js"></script>

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



Next add in the javascript code to add a highchart graph



<!DOCTYPE HTML>
<html>
<head>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="js/highstock.js"></script>

<script type="text/javascript">
//<![CDATA[

$(function() {
       // Create the chart
       window.chart = new Highcharts.StockChart({
              chart : {
                     renderTo : 'container'
              },

              rangeSelector : {
                     selected : 1
              },

              title : {
                     text : 'Example'
              },
             
              series : [{
                     name : 'Data',
                     data : [1, 2, 3, 4, 3, 1],
                     tooltip: {
                           valueDecimals: 2
                     }
              }]
       })
})
          
//]]>
</script>   
</head>
<body>
<div id="container" style="height: 500px; min-width: 500px"></div>
</body>
</html>



The chart is rendered to ‘container’  and its data points are [1, 2, 3, 4, 3, 1]




This makes a very uninteresting graph.  In fact the data is not really appropriate for Highchart.   It lacks dates for the data.


Looking at the API reference http://api.highcharts.com/highstock#series.data [5]


It does not specifically mention it in the API but if you feed in data with epoch time and data as shown below it will graph it with dates.


              series : [{
                     name : 'Data',
                     data : [
                            [1343779200000,1],
                            [1343865600000,2],
                            [1343952000000,3],
                            [1344211200000,4],
                            [1344297600000,3],
                            [1344384000000,1],
                            [1344470400000,2]
                            ],
                     tooltip: {
                           valueDecimals: 2
                     }
              }]



Hovering over a point now shows the date.
This gives you the barebones of Highchart.



References
[1]  Highstock page
       Visited 8/2012
[2]  Highstock demo
       Visited 8/2012
[3]  Highstock licensing
       Visited 8/2012
[3]  Download page
       Visited 8/2012
[4]  Highcharts – How to Use
       Visited 8/2012
[5]  Highcharts – Api reference
       Visited 8/2012

2 comments:

  1. dear sir.... good tutorial... but can you help me how to read data on mysql and show it on chart? thank you very much

    ReplyDelete