Highcharts Demo

author(s): Torstein Hønsi

HTML

<script src="http://code.highcharts.com/highcharts.js"></script>
<script type="text/javascript">
    window.onload = makeRun;

</script>
<div id="container" style="height: 400px"></div>

JavaScript

function makeRun() {
    var divId = "container";
    var current = new Array(99.95,99.96,99.97,99.98);
    var goal = new Array(99.965, 99.965,99.965,99.965);
    var quarters = new Array("Q1", "Q2", "Q3", "Q4");
        var width = 495; var SizeOfFont = '14px'; var currentName = 'Quarterly %';

        preprocessData = function (data, goal) {
            var nData = [];
            var colorGood = '#348017'; var colorBad = '#E42217'; var colorUse;
            for (var i = 0; i < data.length; i++) {
                if (data[i] >= goal[i]) { colorUse = colorGood; }
                else { colorUse = colorBad; }
                nData.push({
                    y: data[i],
                    x: i,
                    color: colorUse
                });
            }
            return nData;
        };

        var chart = new Highcharts.Chart({
            chart: {
                renderTo: divId,
                height: 275, //little bigger than alotted height to make more readable
                width: width //dependent on #gauges
            },
            title: {
                text: 'Title', //should all be the same, can make a parameter if need to be different
                style: { //size of text above
                    fontSize: SizeOfFont
                }
            },
            xAxis: {
                categories: quarters,
                labels: { //size of the Text above^^
                    style: {
                        fontSize: '10px'
                    }
                }
            },
            yAxis: {
                min: 99.8,
                max: 100,	        
                title: {
                    text: 'Percent', //parameter since some are days, percents, etc
                    style: {//size of y axis title
                        fontSize: SizeOfFont
                    }
                },
                labels: {
                    style: {//size of the y axis tick labels
                        fontSize:...