Highcharts Demo

author(s): BlackLabel

by Fusher

HTML

<script src="http://code.highcharts.com/highcharts.src.js"></script>
<div id="container" style="height: 175px; width: 500px"></div>
<link href='http://fonts.googleapis.com/css?family=Roboto+Condensed:300'
rel='stylesheet' type='text/css'>

JavaScript

$(function () {
    // Main part    

    // imitate AJAX
    var data = {
        "trendLine": {
            "Label": "September 30",
                "Value": 0.96
        },
            "data": [{
            "Identifier": "16145892213",
                "Value": 1.3455,
                "Usage": "2.2MB",
                "Threshold": "2MB"
        }, {
            "Identifier": "15132933188",
                "Value": 0.97,
                "Usage": "921KB",
                "Threshold": "2MB"
        }, {
            "Identifier": "15133015478",
                "Value": 0.55,
                "Usage": "784KB",
                "Threshold": "2KB"
        }, {
            "Identifier": "16145996176",
                "Value": 0.3,
                "Usage": "1.20MB",
                "Threshold": "2MB"
        }, {
            "Identifier": "15135508626",
                "Value": 0.2,
                "Usage": "557KB",
                "Threshold": "2MB"
        }]
    };


    Highcharts.setOptions({
        chart: {
            style: {
                fontFamily: 'Roboto Condensed',
                fontWeight: 'bold'
            }
        }
    });

    var options = prepareData(data);

    var chart = new Highcharts.Chart({
        chart: {
            renderTo: 'container',
            type: 'column',
            inverted: true,
            marginBottom: 15,
            marginTop: 15,
            events: {
                load: function () {
                    renderFlag(this, data);
                }
            }
        },
        legend: {
            enabled: false
        },
        title: {
            text: null
        },
        credits: {
            enabled: false
        },
        tooltip: {
            useHTML: true,
            shared: false,
            formatter: function () {
                if (this.series.name != 'bonus') {
                    var s = '';

                    s += '<div>' +
                            '<span style="color:black;">'...