Highcharts Demo

author(s): Torstein Hønsi

by mstefanko

HTML

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

<div id="container" style="height: 400px; width: 1500px"></div>

JavaScript

$(function () {      
var chart = new Highcharts.Chart({
	            chart: {
	                renderTo: 'container',
	                type: 'area'
	            },
	            title: {
	                text: null
	            },
	            credits: {
	            	enabled: false
	            },
	            legend: {
	                enabled: false
	            },
	            xAxis: {
	            	type: 'datetime',
                    //tickInterval: 24 * 3600 * 1000,
                    labels: {
                        formatter: function() {
                            var monthStr = Highcharts.dateFormat('%m\/%e', this.value);

                            var image = '';
                            var label = '';
                            if (this.value == '1356307200000') {
                                image = 'message.png';
                            } else if  (this.value == '1357516800000' || this.value == '1359936000000') {
                                image = 'meeting.png';
                            } else if  (this.value == '1359331200000') {
                                image = 'rss.png';
                            } else {
                                label = monthStr;
                            }
                            if (image != '') {
                                label = '<img style="position:absolute; top:-30px;left:5px;" src="/CORE/IMAGES/' + image + '"/>'+ monthStr;
                            }               
                            return label;
                        },
                        useHTML: true
                    },
                    plotBands: [{ // Ideas
                    from: Date.UTC(2012, 11, 18),
                    to: Date.UTC(2013, 0, 17),
                    color: 'rgba(0, 0, 0, 0)',
                    label: {
                        text: 'Ideas',
                        style: {
                            color: '#606060'
                        }
                   ...