Highcharts Demo

author(s): Torstein Hønsi

by mark47

HTML

<script src="http://code.highcharts.com/highcharts.js"></script>

<div id="container1" style="height: 200px; margin-bottom: 20px"></div>

<div id="container2" style="height: 200px; margin-bottom: 20px"></div>

<div id="container3" style="height: 200px; margin-bottom: 20px"></div>

JavaScript

$(document).ready(function() {
        // Defaults for HighCharts
        Highcharts.setOptions({
            legend: { enabled: false },
            credits: { enabled: false },
            xAxis: {
                categories: ['7/1', '7/15', '8/1', '8/15']
            },
            title: { text: null },
            tooltip: { crosshairs: true, shared: true },
            yAxis: {
               title: {
                    text: ''
                },
                labels: {
                    formatter: function() {
                        return this.value;
                    }
                },
                min: 0,
                max: 10.25,
                endOnTick: false,
                startOnTick: false,
                showLastLabel: true,
                showFirstLabel: true,
                tickInterval: 2,
                plotBands: [{
                    color: '#ffd9d9',
                    from: 7,
                    to: 10
                }]  
            },
            plotOptions: {
                spline: {
                    marker: {
                        radius: 4,
                        lineColor: '#666666',
                        lineWidth: 1
                    }
                }
            }   
        });
        chart1 = new Highcharts.Chart({
            chart: {
                renderTo: 'container1',
                type: 'spline'
            },
            series: [{
                name: 'Fatigue',
                marker: {
                    symbol: 'square'
                },
                data: [6, 4, 7, 9]
            }]
        });// chart1 = new Highcharts.Chart({
        chart2 = new Highcharts.Chart({
            chart: {
                renderTo: 'container2',
                type: 'spline'
            },
            series: [{
                name: 'Nausea & Vomiting',
                marker: {
                    symbol: 'square'
                },
                data: [5, 2, 8, 6]
           ...