highcharts JS datetime

by ajinkyax

HTML

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

<div id="chart_day" style="min-width: 310px; height: 400px; margin: 0 auto"></div>

JavaScript

$('#chart_day').highcharts({
    	chart:{
	    	className: 'chart',
	    	height: 400,
	    	width: 430,
	    	type: 'line',
            zoomType: 'x',
            spacingRight: 20
    	},
        title: {
            text: 'Inbound a Day',
            align: 'left',
            style: {
				color: '#413a38',
				fontSize: '16px'
			}
        },
        xAxis: {
            type: 'datetime',
            labels: {
                overflow: 'justify'
            }
        },
        yAxis: {
            title: {
                text: 'Calls'
            },
            plotLines: [{
                value: 0,
                width: 1,
                color: '#808080'
            }],
            type: 'category'
        },
        tooltip: {
            valueSuffix: ' calls'
        },
        legend: {
            layout: 'horizontal',
            align: 'right',
            verticalAlign: 'top',
            borderWidth: 0,
            floating: true
        },
        colors:[
            '#37FF00'
        ],
        credits: {
            enabled: false
        },
        plotOptions: {
            series: {
                pointStart: Date.UTC(2014, 2, 6),
                pointInterval: 1 * 3600 * 1000
                // one day
            }
        },
        series: [
        {
            name: 'Abandoned',
            data: [4.3, 5.1, 4.3, 5.2, 5.4, 4.7, 3.5, 4.1, 5.6, 7.4, 6.9, 7.1]
        }
        ]
    });