Highcharts Demo

author(s): Torstein Hønsi

HTML

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

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

JavaScript

$(function () {
    var chart = new Highcharts.Chart({
        chart:{
            renderTo: 'container',
			type: 'areaspline',
			plotBorderWidth: 1,
			spacingTop:2,
			spacingRight:5,
			spacingBottom:5,
			spacingLeft:2,
			borderWidth:1,
			borderRadius:0,
			borderColor:'#999'
		},
		credits: {
			enabled: false
		},
		title: {
            text: 'Total spam in the last 7 days'
        },
		legend: {
			verticalAlign: 'bottom',
			borderWidth: 1,
			backgroundColor: '#FFFFFF'
		},
		xAxis: {
			allowDecimals:false,
            minPadding:0,
            maxPadding:0,
			/*categories: [
				'Thu 2/14',
				'Fri 2/15',
				'Sat 2/16',
				'Sun 2/17',
				'Mon 2/18',
				'Tue 2/19',
				'Wed 2/20'
			],*/
			labels: {
                staggerLines: 2
            },
			tickmarkPlacement: 'on',
		},
		yAxis: {
			allowDecimals:false,
			alternateGridColor: '#F7F7F7',
			title: {
				text: 'Number of Emails',
				margin:5
			}
		},
		tooltip: {
			formatter: function() {
				var isSpam = this.series.name === _chartOptions.series[1].name
				return ''+this.x +': <strong>'+ this.y +(isSpam ? " Spam" : "") +' Emails</strong>';
			}
		},

		plotOptions: {
			areaspline: {
				fillOpacity: 0.5
			}
		},
        
        series:  [{
                "name": "Total Mail",
                "color":"#339999",
                "data": [2,3,4,7,8,8,8]
            },{
                "name": "Spam",
                "color":"#003399",
                "data": [2,2,4,4,4,6,8]
        }]
    });
});