Highcharts Demo

author(s): Torstein Hønsi

by Denis Antonenko

HTML

<script src="http://code.highcharts.com/highcharts.js"></script>
<div class='chart-container'>
    <div class="totals">
        Some total: 1213 <br/>
        Some total: 1213 <br/>
        Some total: 1213 
    </div>
    <div class="chart" id="container">
       
    </div>   
    <div class='clear'></div>
</div>

CSS

.chart-container .chart
{
    margin-right:200px;
    height: 200px
}

.chart-container .totals
{
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    float: right;
    padding: 10px 20px;
    width: 200px;
}

.clear
{
    clear:both;
}

JavaScript

$(function () {
    $('#container').highcharts({
	    chart: {
            animation:false,
            plotBorderWidth: 1,
            plotShadow: false,
            spacingTop: 0,
            spacingBottom: 0,
            spacingLeft: 0,
            spacingRight: 0,
            marginTop: 15,
            marginBottom: 5
        },
        title: {
            text: null
        },
        credits: {
            enabled: false
        },
        plotOptions: {
            series: {
                step: true,
                marker: {
                    enabled: false
                },
                states: {
                    hover: {
                        enabled: false
                    }
                }
            }
        },
        yAxis: {
            min:0.5,
            max:4.5,
            maxPadding: 0.2,
            minPadding: 0.2,
            minorGridLineWidth: 0.1,
            minorTickInterval: 1,
            minorTickWidth: 0,
            tickPixelInterval: 30,
            showFirstLabel: true,
            showLastLabel: true,
            startOnTick: false,
            endOnTick: false,
            title: {
                text: null
            },
            labels: {
                style: {
                    fontsize: '8px'
                },
                formatter: function () {
                    switch (this.value) {
                        case 1:
                            return '4: ON DUTY';
                        case 2:
                            return '3: DRIVING';
                        case 3:
                            
                            return '2: SLEEPER BERTH';
                        case 4:
                            return '1: OFF DUTY';
                        default:
                            return undefined;
                    }
                }
            }
        },
        xAxis: {
            min:0,
            max:24,
            startOnTick: false,
           ...