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() {
  var chart = new Highcharts.StockChart({

    chart: {
      renderTo: 'container'
    },

    rangeSelector: {
      selected: 1
    },

    series: [{
      name: 'USD to EUR',
      id: 'dataseries',
      data: usdeur
    }, {
      type: 'flags',
      data: [{
        x: Date.UTC(2011, 1, 14),
        title: 'A',
        text: 'Shape: "squarepin"'
      }, {
        x: Date.UTC(2011, 3, 28),
        title: 'A',
        text: 'Shape: "squarepin"'
      }],
      shape: 'url(http://highcharts.com/demo/gfx/sun.png)',
      onSeries: 'dataseries',
      width: 16
    }, {
      type: 'flags',
      data: [{
        x: Date.UTC(2011, 2, 1),
        text: 'Shape: "circlepin"'
      }, {
        x: Date.UTC(2011, 3, 1),
        text: 'Shape: "circlepin"'
      }],
      shape: 'url(http://highcharts.com/demo/gfx/sun.png)',
      title: 'B',
      width: 16
    }, {
      type: 'flags',
      data: [{
        x: Date.UTC(2011, 2, 10),
        title: 'C',
        text: 'Shape: "flag"'
      }, {
        x: Date.UTC(2011, 3, 11),
        title: 'C',
        text: 'Shape: "flag"'
      }],
      color: '#5F86B3',
      fillColor: '#5F86B3',
      onSeries: 'dataseries',
      width: 16,
      shape: 'url(http://highcharts.com/demo/gfx/sun.png)',
      style: { // text style
        color: 'white'
      },
      states: {
        hover: {
          fillColor: '#395C84' // darker
        }
      }
    }]
  });
});