I'm working on using the highcharts speedometer. I'm basically faking a connection meter. If there is a good connection, then the meter will tick between 30 and 100. If the connection comes back anything (Ajax call) other than 4 & 200, it is supposed to drop to zero. I have the call going through...when the server is up, all is well. When I turn off Apache, it doesn't go to zero. I've tested a couple of sceanrios on the function (chart) to see if it was something simple (which I'm sure it still is I'm just not seeing it). Nothing has worked. I've dropped the chart point to 0. But it still won't go to zero. Any suggestions? Please God I hope so. I'd love to wrap this up tomorrow then I can actually use it for work after some tweaking.
<!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"+'?_dc='+(new Date()).getTime();
//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, 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/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) {
flag = 0;
myFunction();
setInterval(function () {
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(newVal);
}
}, 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>
