Chapter 6: Fiat 500 Speedometer (5)

Setup two dials, add third axis to 2nd pane. Add plotband to the 3rd axis

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 = '#474355';
    var rpmColor = '#BBB59C';
    var kmhArr = [ 0, 20, 40, 60, 90, 120, 150, 180, 210 ];
    var hiRef = '#A41E80';
    var dialColor = '#FA3421';
    var currentRpm = 0;

        chart = new Highcharts.Chart({
            chart: {
                renderTo: 'container',
                alignTicks: false
            },
            title: {
                text: 'Fiat 500 Speedometer'
            },
            pane: [{
                startAngle: -120,
                endAngle: 120,
                size: 300,
                background: [{
                    backgroundColor: { 
                       radialGradient: {
                                    cx: 0.5,
                                    cy: 0.6,
                                    r: 1.0 
                                },
                         stops: [
                             [0.3, '#A7A9A4'],
                             [0.45, '#DDD'],
                             [0.7, '#EBEDEA'],
                         ]
                    },
                    innerRadius: '72%',
                    outerRadius: '105%'
                 }, {
                    // BG color in between speed and rpm
                    backgroundColor: '#38392F',
                    outerRadius: '72%',
                    innerRadius: '67%'
                 }, {
                    // BG color for rpm
                    backgroundColor: '#1A1815',
                    outerRadius: '68%',
                    innerRadius: '48%'
                 }, {
                    // Below rpm bg color
                    // backgroundColor: '#909090',
                    zIndex: 1,
                    backgroundColor: { 
                       radialGradient: {
                                    cx: 0.5,
                                    cy: 0.55,
                                    r: 0.5 
                                },
                        ...