Highcharts Speedometer javascript will not run onload

Question

I've been working with Highcharts speedometer. I've set it up to check if the server is up, if so display a random number in the speedometer. If the server is down, display 0 in the speedometer. I've got it working (mostly). I load it, with Firebug running. I shut down the Apache server and it drops to zero. I start the server back up and it goes back to running random numbers. The problem is when I run it without firebug running....the javascript doesn't seem to fire as it just stays at zero. As soon as I start firebug again...it starts displaying random numbers again. Does anyone have any ideas?

<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="content-type" content="text/html; charset=UTF-8" >
        <title>Sales Meter</title>

        <script type="text/javascript" src="jquery-1.8.2.min.js"></script>
        <script type="text/javascript">
var flag;
var xmlhttp;
var url="http://192.168.0.5/ajax_info.txt";
//ajax call
function loadXMLDoc(url, cfunc){
   if(window.XMLHttpRequest){
      xmlhttp=new XMLHttpRequest();
   }
   else {
      xmlhttp=new ActiveObject("Microsoft.XMLHTTP");
   }
   xmlhttp.onreadystatechange=cfunc;
   xmlhttp.open("GET",url, true);
   xmlhttp.send();
}

function myFunction(){
   loadXMLDoc(url+'?_dc='+(new Date()).getTime(), function(){
      if(xmlhttp.readyState==4 && xmlhttp.status==200){
         flag = 1;
      }
      else {
         flag = 0;
      }
   });
}

$(function () {

    var chart = new Highcharts.Chart({

        chart: {
            renderTo: 'container',
            type: 'gauge',
            plotBackgroundColor: null,
            plotBackgroundImage: null,
            plotBorderWidth: 0,
            plotShadow: false
        },

        title: {
            text: 'Sales-O-Meter'
        },

        pane: {
            startAngle: -150,
            endAngle: 150,
            background: [{
                backgroundColor: {
                    linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
                    stops: [
                        [0, '#FFF'],
                        [1, '#333']
                    ]
                },
                borderWidth: 0,
                outerRadius: '109%'
            }, {
                backgroundColor: {
                    linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
                    stops: [
                        [0, '#333'],
                        [1, '#FFF']
                    ]
                },
                borderWidth: 1,
                outerRadius: '107%'
            }, {
                // default background
            }, {
                backgroundColor: '#DDD',
                borderWidth: 0,
                outerRadius: '105%',
                innerRadius: '103%'
            }]
        },

        // the value axis
        yAxis: {
            min: 0,
            max: 100,

            minorTickInterval: 'auto',
            minorTickWidth: 1,
            minorTickLength: 2.5,
            minorTickPosition: 'inside',
            minorTickColor: '#666',

            tickPixelInterval: 15,
            tickWidth: 1,
            tickPosition: 'inside',
            tickLength: 5,
            tickColor: '#666',
            labels: {
                step: 5,
                rotation: 'auto'
            },
            title: {
                text: 'sales/min'
            },
            plotBands: [{
                from: 0,
                to: 10,
                color: '#DF5353' // green
            }, {
                from: 10,
                to: 20,
                color: '#DDDF0D' // yellow
            }, {
                from:20,
                to: 100,
                color: '#55BF3B' // red
            }]        
        },

        series: [{
            name: 'Speed',
            data: [80],
            tooltip: {
                valueSuffix: ' sales/sec'
            }
        }]

    }, 
    // Add some life
    function (chart) {
        setInterval(function () {
                   myFunction();
                   if(flag == 1){
               var point = chart.series[0].points[0],
                   newVal,
                   inc = Math.round((Math.random() - .5) * 20);

               newVal = point.y + inc;
               if (newVal < 0 || newVal > 100) {
                   newVal = point.y - inc;
               }
                   point.update(newVal);
                }
                else{

                   var point = chart.series[0].points[0],
                      newVal=0,
                      inc = 0;
                   point.update(0);
                }
        }, 1000);
    });
});

        </script>
    </head>
    <body>
<script src="highcharts.js"></script>
<script src="highcharts-more.js"></script>
<!--<script src="exporting.js"></script>-->

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

    </body>
</html>

Thanks in advance!

Nope that didn't help. You think I should name the entire highcharts function and run it from onload? — John Verber, Mar 17 '13 at 21:11

score 0 · Answer 1 · answered Mar 17 '13 at 22:53

Well I figured it out. I needed to set the flag to zero when I instantiated it (is there instantiated variables in Javascript?). Then I needed to reset the flag to zero after the point.update(). That solved the problem. Here's the code if anyone is interested.

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" >
<title>Sales Meter</title>
<script type="text/javascript" src="jquery-1.8.2.min.js"></script>
<script type="text/javascript">
var flag = 0;
var xmlhttp;
var url="http://192.168.0.5/ajax_info.txt";
//ajax call
function loadXMLDoc(url, cfunc){
   if(window.XMLHttpRequest){
      xmlhttp=new XMLHttpRequest();
   }
   else {
      xmlhttp=new ActiveObject("Microsoft.XMLHTTP");
   }
   xmlhttp.onreadystatechange=cfunc;
   xmlhttp.open("GET",url, true);
   xmlhttp.send();
}

function myFunction(){
   loadXMLDoc(url+'?_dc='+(new Date()).getTime(), function(){
      if(xmlhttp.readyState==4 && xmlhttp.status==200){
         flag = 1;
      }
   });
}

$(function () {
    var chart = new Highcharts.Chart({

        chart: {
            renderTo: 'container',
            type: 'gauge',
            plotBackgroundColor: null,
            plotBackgroundImage: null,
            plotBorderWidth: 0,
            plotShadow: false
        },

        title: {
            text: 'Sales-O-Meter'
        },

        pane: {
            startAngle: -150,
            endAngle: 150,
            background: [{
                backgroundColor: {
                    linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
                    stops: [
                        [0, '#FFF'],
                        [1, '#333']
                    ]
                },
                borderWidth: 0,
                outerRadius: '109%'
            }, {
                backgroundColor: {
                    linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
                    stops: [
                        [0, '#333'],
                        [1, '#FFF']
                    ]
                },
                borderWidth: 1,
                outerRadius: '107%'
            }, {
                // default background
            }, {
                backgroundColor: '#DDD',
                borderWidth: 0,
                outerRadius: '105%',
                innerRadius: '103%'
            }]
        },

        // the value axis
        yAxis: {
            min: 0,
            max: 100,

            minorTickInterval: 'auto',
            minorTickWidth: 1,
            minorTickLength: 2.5,
            minorTickPosition: 'inside',
            minorTickColor: '#666',

            tickPixelInterval: 15,
            tickWidth: 1,
            tickPosition: 'inside',
            tickLength: 5,
            tickColor: '#666',
            labels: {
                step: 5,
                rotation: 'auto'
            },
            title: {
                text: 'sales/sec'
            },
            plotBands: [{
                from: 0,
                to: 10,
                color: '#DF5353' // green
            }, {
                from: 10,
                to: 20,
                color: '#DDDF0D' // yellow
            }, {
                from:20,
                to: 100,
                color: '#55BF3B' // red
            }]        
        },

        series: [{
            name: 'Speed',
            data: [80],
            tooltip: {
                valueSuffix: ' sales/sec'
            }
        }]

    }, 
    // Add some life
    function (chart) {
        setInterval(function () {
                   myFunction();
                   if(flag == 1){
               var point = chart.series[0].points[0],
                   newVal,
                   inc = Math.round((Math.random() - .5) * 20);

               newVal = point.y + inc;
               if (newVal < 0 || newVal > 100) {
                   newVal = point.y - inc;
               }
                   point.update(newVal);
                }
                else{

                   var point = chart.series[0].points[0],
                      newVal=0,
                      inc = 0;
                   point.update(0);
                }
            flag = 0;  //reset flag after point update.  
        }, 1000);
    });
});
</script>

</head>
<body>

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

<script src="highcharts.js"></script>
<script src="highcharts-more.js"></script>
<!--<script src="exporting.js"></script>-->

    </body>
</html>

Highcharts Speedometer javascript will not run onload

1 Answers1