Highcharts Demo

author(s): Torstein Hønsi

by eorozco

HTML

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

<div id="container" style="height: 400px"></div>
<button id="button" class="autocompare">Set new data</button>

JavaScript

var categories = ["2014-APR","2014-MAY","2014-JUN","2014-JUL","2014-AUG","2014-SEP"]; 
    var series_area = [
        {"name":"Voice","data":[562,567,562,567,567,587]},
        {"name":"Transfer","data":[0,0,0,0,0,327.64999999999997726]},
        {"name":"Mancx","data":[0,344.81,0,344.88,1379.27,172.40]},
        {"name":"Serv Plus","data":[12.48,9.11,24.46,21.10,9.11,721.60]}
    ];

    var categories_detail = {
        "Voice":[
            {"name":"PLAIN S 1","data":[412,412,412,412,412,412]},
            {"name":"PLAIN S 2","data":[150,155,150,155,155,150]},
            {"name":"PLAIN S 3","data":[0,0,0,0,0,25]}
        ],
        "Transfer":[
            {"name":"ROUTES","data":[0,0,0,0,0,327.64]}
        ],
        "Mancx":[
            {"name":"ANUAL FS","data":[0,344.81,0,344.81,1379.27,172.40]}
        ],
        "Serv Plus":[
            {"name":"PLAIN S 1","data":[0,0,0,0,0,14.44]},
            {"name":"PLAIN S 2","data":[0,0,0,0,0,684.30]},
            {"name":"PLAIN S 3","data":[7.16,0,16.10,8.94,0,8.94]},
            {"name":"PLAIN S 4","data":[5.32,9.11,8.35,12.16,9.11,12.16]},
            {"name":"PLAIN S 5","data":[0,0,0,0,0,1.72]}
        ]
    };


$(function () {
    
     
    $('#container').highcharts({
        chart: {
            type: 'area',
            height: 300
        },

        title: {
            text: null
        },

        xAxis: {
            categories: categories,
            tickmarkPlacement: 'on',
            title: {
                enabled: false
            },
            lineWidth: 1,
            lineColor: '#dedede',
            tickColor: '#dedede'
        },

        yAxis: {
            title: {
                text: '($)'
            },
            labels: {
                formatter: function () {
                    return this.value;
                }
            },
            lineWidth: 1,
            lineColor: '#dedede',
            tickColor: '#dedede',
            gridLineDashStyle: 'ShortDot' 
   ...