ElementStacks

by brenjt

HTML

<script src="http://highcharts.com/js/testing.js"></script>
<div id="container" style="height: 400px"></div>

JavaScript

var initialData = [{
    "name": "sales",
    "pointInterval": 3600000,
    "tickInterval": 3600000,
    "data": [[1334268000000, 460], [1334354400000, 651], [1334440800000, 76], [1334527200000, 392], [1334613600000, 154], [1334700000000, 961], [1334786400000, 449], [1334872800000, 502]]}];
var chart = new Highcharts.Chart({
    chart: {
        renderTo: 'container',
        defaultSeriesType: 'area',
    },

    xAxis: {
        type: 'datetime',
        tickmarkPlacement: 'on',
        showFirstLabel: true,
        showLastLabel: true,
        endOnTick: true,
        second: '%H:%M:%S',
        dateTimeLabelFormats: {
            minute: '%H:%M',
            hour: '%H:%M',
            day: '%d. %b',
            week: '%d. %b',
            month: '%b \'%y',
            year: '%Y'
        },
        labels: {
            formatter: function() {
                return Highcharts.dateFormat('%b %d', this.value);
            }
        }
        //,tickInterval : null
    },
    yAxis: {
        title: {
            text: 'Visitors'
        }
    },
    tooltip: {
        shared: true,
        formatter: function() {
            var d = new Date(this.x);
            //Date.UTC(d.getFullYear(), d.getMonth(), d.getDate())
            var s = '<b>' + Highcharts.dateFormat('%b %e, %Y', this.x) + '</b>';

            $.each(this.points, function(i, point) {
                s += '<br/>' + point.series.name + ': ' + point.y;
            });

            return s;
        }
    },
    legend: {
        enabled: true
    },
    plotOptions: {
        area: {
            fillOpacity: .5,
            marker: {
                radius: 4
            },
            stacking: 'normal'
        }
    },
    global: {
        useUTC: true
    },
    series: initialData
});