Because I am constantly busy working on something, I have never had time to actually put everything in words and pictures. But, since you got here, then you must have already seen some part of my work - and this is the way I’m talking. I'm 24, born in Romania, studied at UPG Romania in software development field. I started from 0, mostly with basic stuff, and I’m evolving every day to an expert. I'm focused on freelancing projects, from small websites, to really heavy stuff.

Sunday, August 26, 2012

Introducing Highstock JavaScript library



     If you ever need to create dynamic interactive charts for you’re projects and you don’t know exactly how to do it or what to use, then Highstock may be a good solution for you. Highstock is a charting library written in pure JavaScript that lets you create stock or general timeline charts with sophisticated navigation options, preset date ranges, date picker, scrolling and panning.

    Highstock needs only three JavaScript files to run: the highstock.js, exporting.js (if you want to export the chart as .PDF, .JPEG or .PNG file) and either jQuery, MooTools or Prototype framework. You don’t need to use PHP, ASP.NET or client side plugins like Flash or Java to make Highstock work.

    Highstock supports line, spline, area, areaspline, column, scatter, OHLC, candlestick and flags chart types. The best thing of Highstock is that you can combine any of these char types in one chart. To test it, I’ve use two CSV files with data statistics for two websites.

    The CSV files contain a date and a value per each row and it looks like this:
...
1-6-2012,10
2-6-2012,30
3-6-2012,50
4-6-2012,40
5-6-2012,67
6-6-2012,89
...

And the code is: 

<!DOCTYPE HTML>
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Highstock Example</title>
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  <script type="text/javascript">
   var site01 =[];
   var site02 = [];

   $(function() {

    jQuery.ajax({
     url: 'site02.csv',
     success: function(data) {
      // Split the lines
      var lines = data.split('\n');
      $.each(lines, function(lineNo, line) {
       var index = line.indexOf(",");
       var dm = line.substr(0,index);
       var valoare = line.substr(index+1);
       valoare = $.trim(valoare);
       var points = dm.split('-');
       if (valoare=='null'){
        site02.push([Date.UTC(points[2],(points[1]-1),points[0]),null]);
       }else{
        site02.push([Date.UTC(points[2],(points[1]-1),points[0]),parseFloat(valoare)]);
       }
      });
      if(data.isOk == false)
       alert("Error loading site02.csv !");
     },
     async: false
    });

    jQuery.ajax({
     url: 'site01.csv',
     success: function(data) {
      // Split the lines    
      var lines = data.split('\n');
      $.each(lines, function(lineNo, line) {
       var index = line.indexOf(",");
       var dm = line.substr(0,index);
       var valoare = line.substr(index+1);
       valoare = $.trim(valoare);
       var points = dm.split('-');
       if (valoare=='null'){
        site01.push([Date.UTC(points[2],(points[1]-1),points[0]),null]);
       }else{
        site01.push([Date.UTC(points[2],(points[1]-1),points[0]),parseFloat(valoare)]);
       }
      });
      if(data.isOk == false) {
       alert("Error loading site01.csv !");
      } else {
       createChart();
      }
     },
     async: false
    });

    // create the chart when all data is loaded
    function createChart() {
     chart = new Highcharts.StockChart({
      chart: {
       renderTo: 'container',
       zoomType: 'x'
      },
      plotOptions: {
       series: {
        marker: {
         enabled: true
        }
       }
      },
      credits: {
       enabled: false
      },
      navigation: {
       buttonOptions: {
        align: 'right'
       }
      },
      exporting: {
       width: 1000
      },
      title: {
       text: 'Highstock demo'
      },
      subtitle: {
       text: 'Introducing Highstock JavaScript library'
      },
      rangeSelector: {
       selected: 1
      },
      tooltip: {
       valueSuffix: ' views/day'
      },
      yAxis: {
       labels: {
        formatter: function() {
         return this.value +' views';
        }
       },
       title: {
        text: 'Values'
       }
      },
      series: [{
        name: 'www.site-01.com',
        data: site01,
        connectNulls: false,
        pointStart: Date.UTC(1970, 0, 1),
        pointInterval: 3600 * 1000
       },
       {
        name: 'www.site-02.com',
        data: site02,
        connectNulls: false,
        pointStart: Date.UTC(1970, 0, 1),
        pointInterval: 3600 * 1000
       }
      ]
     });
    }
   });
  </script>
  <script type="text/javascript" src="highstock.js"></script>
  <script type="text/javascript" src="exporting.js"></script>
 </head>
 <body>
  <div id="container" style="height: 450px; width: 1000px"></div>
 </body>
</html>

At the end, the chart will look like this: