Chapter 2, Adjusting Intervals and Background (1)

reference: chart8.html

by JoeKuan

HTML

<script type="text/javascript" src="http://code.highcharts.com/highcharts.js"></script>
  <body>
  <div style="border: 2px solid #a1a1a1; width:350; height: 150; border-radius: 3px; " >
     <div id="container" ></div>
  </div>
  </body>

JavaScript

var chart;
$(document).ready(function() {
    chart = new Highcharts.Chart({
        chart: {
            renderTo: 'container',
            height: 250,
            spacingRight: 30
        },
        title: {
            text: 'Market Data: Nasdaq 100'
        },
        subtitle: {
            text: 'May 11, 2012'
        },
        xAxis: {
            type: 'datetime',
            labels: {
                formatter: function() {
                    return Highcharts.dateFormat('%I:%M %P', this.value);
                },
                y: 17
            },
            gridLineDashStyle: 'dot',
            gridLineWidth: 1,
            tickInterval: 60 * 60 * 1000,
            lineWidth: 2,
            lineColor: '#92A8CD',
            tickWidth: 3,
            tickLength: 6,
            tickColor: '#92A8CD',
            minPadding: 0.02,
            offset: 1
        },
        yAxis: {
            title: {
                text: null
            },
            tickInterval: 10,
            minorTickInterval: 5,
            minorGridLineColor: '#D8D8D8',
            minorGridLineDashStyle: 'dashdot',
            gridLineColor: '#8AB8E6',
            alternateGridColor: {
                linearGradient: { x1: 0, y1: 1, x2: 1, y2: 1 },
                stops: [[0, '#FAFCFF'],
                                                                       [0.5, '#F5FAFF'],
                                                                    [0.8, '#E0F0FF'],
                                                                    [1, '#D6EBFF']]
            },
            lineWidth: 2,
            lineColor: '#92A8CD',
            tickWidth: 3,
            tickLength: 6,
            tickColor: '#92A8CD',
            minorTickLength: 3,
            minorTickWidth: 1,
            minorTickColor: '#D8D8D8'
        },
        legend: {
            enabled: false
        },
        credits: {
            enabled: false
        },
        series: [{
            name: 'Nasdaq',
     ...