Highcharts Stock Demo

author(s): Torstein Hønsi

HTML

<div id="container" style="height: 400px; min-width: 600px"></div>

<script type="text/javascript" src="http://highcharts.com/js/testing-stock.js"></script>
<script type="text/javascript" src="http://highcharts.com/samples/data/usdeur.js"></script>

JavaScript

$(function() {
(function(data) {
      
      var list = [];
      for(var n in data){
         list.push(JSON.parse(data[n]));
      }
      window.chart = new Highcharts.StockChart({
         chart : {
            renderTo : 'container'
         },

         title : {
            text : 'num_count'
         },
         yAxis: {
            title: {
               text: 'num'
            }
         },
         /*
         scrollbar: {
            barBackgroundColor: 'rgb(104,180,222)',
            barBorderRadius: 7,
            barBorderWidth: 0,
            buttonBackgroundColor: 'rgb(104,180,222)',
            buttonBorderWidth: 0,
            buttonBorderRadius: 7,
            trackBackgroundColor: 'none',
            trackBorderWidth: 1,
            trackBorderRadius: 8,
            trackBorderColor: '#CCC'
         },
         */
         legend: {
            enabled: false
         },
         xAxis : {
            maxZoom : 24 * 3600000, 
            title: {
               text: 'time'
            }
         },
         series : [{
            name : "num",
            data : list,
            type : 'areaspline',
            marker : {
                     enabled : true,
                     radius : 4,
                     fillColor:'blue'
                  },
            threshold : null,
            fillColor : {
               linearGradient:{
                  x1: 0, 
                  y1: 0, 
                  x2: 0, 
                  y2: 1
               },
               stops : [[0, Highcharts.getOptions().colors[0]], [1, 'rgba(0,0,0,0)']]
            },
            tooltip: {
               yDecimals: 2
            }
         }]
      });
  ...