Highcharts Demo

author(s): Torstein Hønsi

HTML

<script src="http://www.azgs.co.uk/js/highcharts/highcharts.js"></script>
<div id="status_chart" style="height: 200px"></div>

JavaScript

var chart;
    var y_axis = [' ', 'Status', 'Data', 'Edit', ' '];
    $(document).ready(function() {
        chart = new Highcharts.Chart({
            credits:false,
            chart: {
                renderTo: 'status_chart',
                type: 'scatter'
            },
             title: {text:'Status Change History'},

            xAxis: {
                    type: 'datetime',
                    endOnTick: false,
                    dateTimeLabelFormats: {
                        month: '%b'
                    },
                    max: 1336417200000, //1 gun de ustune gelirik
                    min: 1335639600000, //1 gun evvelden bashlasin
                    tickInterval: 86400000  // one day
                ,
                plotBands: [
                 {from: 1336330800000,to: 1338563464,color: "#44aad5"},{from: 1338563464,to: 1338563454,color: "#d58144"},{from: 1338563454,to: 1336131505,color: "#d5c644"},{from: 1336131505,to: 1335656853,color: "#d58144"},                ]
            },
                yAxis: {
                    title: {
                        text: 'Actions'
                    },
                    labels: {
                        formatter: function(){
                            return y_axis[this.value];
                        }
                    }
                },
            tooltip: {
                crosshairs: true,
                shared: true
            },
            plotOptions: {
                spline: {
                    marker: {
                        radius: 4,
                        lineColor: '#666666',
                        lineWidth: 1
                    }
                },
                series: {showInLegend:false}
            },
            series: [{
                name: 'data',
                marker: {
                    symbol: 'url(http://www.azgs.co.uk/css/images/flexigrid/add.png)'
                },
                data: [ {
                    y: 2,
                   ...