Highcharts Demo

author(s): Torstein Hønsi

by no1uknow

HTML

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

<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>

<!-- Data from www.netmarketshare.com. Select Browsers => Desktop share by version. Download as tsv. -->
<pre id="tsv" style="display:none">Browser Version	Total Market Share
Microsoft Internet Explorer 8.0	26.61%
Microsoft Internet Explorer 9.0	16.96%
Chrome 18.0	8.01%
Chrome 19.0	7.73%
Firefox 12	6.72%
Microsoft Internet Explorer 6.0	6.40%
Firefox 11	4.72%
Microsoft Internet Explorer 7.0	3.55%
Safari 5.1	3.53%
Firefox 13	2.16%
Firefox 3.6	1.87%
Opera 11.x	1.30%
Chrome 17.0	1.13%
Firefox 10	0.90%
Safari 5.0	0.85%
Firefox 9.0	0.65%
Firefox 8.0	0.55%
Firefox 4.0	0.50%
Chrome 16.0	0.45%
Firefox 3.0	0.36%
Firefox 3.5	0.36%
Firefox 6.0	0.32%
Firefox 5.0	0.31%
Firefox 7.0	0.29%
Proprietary or Undetectable	0.29%
Chrome 18.0 - Maxthon Edition	0.26%
Chrome 14.0	0.25%
Chrome 20.0	0.24%
Chrome 15.0	0.18%
Chrome 12.0	0.16%
Opera 12.x	0.15%
Safari 4.0	0.14%
Chrome 13.0	0.13%
Safari 4.1	0.12%
Chrome 11.0	0.10%
Firefox 14	0.10%
Firefox 2.0	0.09%
Chrome 10.0	0.09%
Opera 10.x	0.09%
Microsoft Internet Explorer 8.0 - Tencent Traveler Edition	0.09%</pre>

JavaScript

$(function () {
        $('#container').highcharts({
            chart: {
                height: 600,
                type: 'column'
            },
            credits: {
                enabled: false
            },
            title: {
                text: '<strong>S3100 SPEC Status</strong>',
                userHTML: true
            },
            xAxis: {
                
                labels: {
                    style: {
                        fontSize: '1.2em',
                        fontWeight: 'bold',
                        color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
                    },
                    formatter: function() {
                        var val = String(this.value);
                        return val;
                    }
                },
                categories: ['In Queue', 'In Work', 'No Issue', 'PRR']
            },
            yAxis: {
                min: 0,
                tickInterval: 100,
                title: {
                    text: 'Total SPECs',
                    style: {
                        fontSize: '1.2em',
                        fontWeight: 'bold'
                    }
                },

                stackLabels: {
                    enabled: true,
                    style: {
                        fontSize: '1.2em',
                        fontWeight: 'bold',
                        color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
                    }
                }
            },

            legend: {
                // align: 'right',
                // x: -70,
                // verticalAlign: 'top',
                // y: 20,
                // floating: true,
                padding: 12,
                style: {
                  fontSize: '1.2em'
                },
                backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColorSolid) || 'white',
                borderColor: '#CCC',
               ...