Chapter 6: Fiat 500 Speedometer (1)

First step towards a Fiat 500 speedometer - a single dial and a pane

HTML

<script type="text/javascript" src="http://code.highcharts.com/2.3.2/highcharts.js"></script>
<script type="text/javascript" src="http://code.highcharts.com/2.3.2/highcharts-more.js"></script>
<body>
<div style="margin: 5px 60px 5px 5px; " id='container'></div>
</body>

JavaScript

$(document).ready(function() {
    var chart;
    var speedColor = '#474337';
    var rpmColor = '#BBB59C';
    var kmhArr = [ 0, 20, 40, 60, 90, 120, 150, 180, 210 ];
    var hiRef = '#A41E09';
    var dialColor = '#FA3421';
    var currentRpm = 0;

        chart = new Highcharts.Chart({
            chart: {
                renderTo: 'container',
                type: 'gauge',
                alignTicks: false
            },
            title: {
                text: 'Fiat 500 Speedometer'
            },
            pane: [{
                startAngle: -120,
                endAngle: 120,
                size: 300,
                backgroundColor: '#E4E3DF'
            }],
            yAxis: [{
                min: 0,
                max: 140,
                labels: {
                   rotation: 'auto'
                }
            }],
            tooltip: { enabled: false },
            credits: {
               enabled: false 
            },
            series: [{
                name: 'Speed',
                data: [ 0 ],
            }]
        });
    });