Chapter 6: Mood Swing Detector (1)

No radial gradient - Ugly

by JoeKuan

HTML

<link href='http://fonts.googleapis.com/css?family=Courgette' rel='stylesheet' type='text/css'>
<script type="text/javascript" src="http://code.highcharts.com/highcharts.js"></script>
<script type="text/javascript" src="http://code.highcharts.com/highcharts-more.js"></script>
<body>
<div style="margin: 5px 60px 5px 5px; " id='container'></div>
</body>

JavaScript

$(document).ready(function() {
        var chart = new Highcharts.Chart({
            chart: {
                renderTo: 'container',
                defaultSeriesType: 'gauge'
            },
            title: {
                text: null
            },
            credits: { 
                enabled: false
            },
            yAxis: {
                min: 0,
                max: 2,
                allowDecimals: false,
                labels: {
                    rotation: 'auto',
                    formatter: function() {
                              switch(this.value) {
                                  case 0:
                                     return 'Good';
                                  case 1:
                                     return 'Bad';
                                  case 2: 
                                     return '<span style="font-size:20">Ugly</span>';
                                     // return 'Ugly';
                              }
                     },
                    style: {
                        fontFamily: 'Courgette',
                        fontSize: 16,
                        color: '#8C8C8C'
                    }
                },
                lineWidth: 0,
                minorTickLength: 0,               
                tickLength: 0,
                offset: 5 
            },
            pane: {
                startAngle: -60,
                endAngle: 60,
                background: [{ 
                   backgroundColor: '#002E59',
                   //backgroundColor: '#BEC0BF',
                   borderWidth: 2,
                   borderColor: '#7F7F7F'    
                }],
                size: 180 
            },
            series: [ { 
               data: [ 2 ],
               dataLabels: {
                  enabled: false
               },
               dial: {
                  radius: '60%',
                  baseWidth: 5,
                  topWidth: 2,
                 ...