Highcharts Demo

author(s): Torstein Hønsi

HTML

<script src="http://code.highcharts.com/highcharts.js"></script>
<div id="container" style="height: 115px; width: 400px"></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": "March 17",
                "Value": 0.55
        },
            "data": [{
            "Identifier": "15133015478",
                "Value": 0.4,
                "Usage": "784KB",
                "Threshold": "2KB",
                "Ratio": 392.0705
        }, {
            "Identifier": "16145996176",
                "Value": 0.3,
                "Usage": "1.20MB",
                "Threshold": "2MB",
                "Ratio": 21.204189
        }, {
            "Identifier": "15132933188",
                "Value": 0.93,
                "Usage": "921KB",
                "Threshold": "2MB",
                "Ratio": 0.92174
        }, {
            "Identifier": "15135508626",
                "Value": 0.2,
                "Usage": "557KB",
                "Threshold": "2MB",
                "Ratio": 0.557824
        }, {
            "Identifier": "16145892213",
                "Value": 1.3455,
                "Usage": "2.2MB",
                "Threshold": "2MB",
                "Ratio": 0.272007
        }]
    };


    Highcharts.setOptions({
        chart: {
            style: {
                fontFamily: 'Roboto Condensed',
                fontWeight: 'bold'
            }
        }
    });
    
    var options = prepareData(data);
    
    var chart = new Highcharts.Chart({
        chart: {
        
        style :{
        fontFamily : 'Roboto'
        
        },
            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: {
           ...