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>
It looks like you need to call my function inside your SETI thermal function as it need to be called to set the flag.
function (chart) {
flag = 0;
setInterval(function () {
myFunction();
if(flag==1){
Related
I have a standard Angular gauge, and I can't figure out how to remove the silver border (stroke) from the data labels.
Using the following code, taken from http://www.highcharts.com/demo/gauge-speedometer
$(function () {
$('#container').highcharts({
chart: {
type: 'gauge',
plotBackgroundColor: null,
plotBackgroundImage: null,
plotBorderWidth: 0,
plotShadow: false
},
title: {
text: 'Speedometer'
},
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: 200,
minorTickInterval: 'auto',
minorTickWidth: 1,
minorTickLength: 10,
minorTickPosition: 'inside',
minorTickColor: '#666',
tickPixelInterval: 30,
tickWidth: 2,
tickPosition: 'inside',
tickLength: 10,
tickColor: '#666',
labels: {
step: 2,
rotation: 'auto'
},
title: {
text: 'km/h'
},
plotBands: [{
from: 0,
to: 120,
color: '#55BF3B' // green
}, {
from: 120,
to: 160,
color: '#DDDF0D' // yellow
}, {
from: 160,
to: 200,
color: '#DF5353' // red
}]
},
series: [{
name: 'Speed',
data: [80],
tooltip: {
valueSuffix: ' km/h'
}
}]
},
// Add some life
function (chart) {
if (!chart.renderer.forExport) {
setInterval(function () {
var point = chart.series[0].points[0],
newVal,
inc = Math.round((Math.random() - 0.5) * 20);
newVal = point.y + inc;
if (newVal < 0 || newVal > 200) {
newVal = point.y - inc;
}
point.update(newVal);
}, 3000);
}
});
});
I understand I can style the text within the data label, for example:
dataLabels: {
format: '<span style="font-size:18px">Consumption: {y} kWh</span>',
x: 0,
y: 50
},
But I can't seem to find a way to remove the stroke. Looking at the source it's written as attributes in the rect-tag.
<rect x="0.5" y="0.5" width="95" height="27" fill="none" stroke="silver" stroke-width="1" rx="3" ry="3"></rect>
Is there a way to remove this stroke using Highcharts? Any help is appreciated!
If you want to remove border from displayed dataLabel, you can use dataLabels.borderWidth parameter from Highcharts API:
http://api.highcharts.com/highcharts/plotOptions.series.dataLabels.borderWidth
plotOptions: {
series: {
dataLabels: {
borderWidth: 0
}
}
},
Here you can see an example how it can work:
http://jsfiddle.net/74eqcqso/1/
I am trying to use the stock standard Highcharts Gauge example and I keep getting a blank page. When I copy the code back into jsfiddle - I still get a blank page! (The weird part is I copied the code from the example on jsfiddle in the first place!)
Can someone please tell me what's going on here??
Link to my test page here: Test page
jsfiddle page here: jsfiddle
When I look at the console I get the following errors:
Uncaught TypeError: Cannot read property 'addEvent' of undefined
Uncaught TypeError: k.getOptions is not a function
Uncaught TypeError: Cannot read property 'fireEvent' of undefined
Uncaught ReferenceError: $ is not defined
$(function () {
$('#gauge_container').highcharts({
chart: {
type: 'gauge',
plotBackgroundColor: null,
plotBackgroundImage: null,
plotBorderWidth: 0,
plotShadow: false
},
title: {
text: 'Speedometer'
},
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: 200,
minorTickInterval: 'auto',
minorTickWidth: 1,
minorTickLength: 10,
minorTickPosition: 'inside',
minorTickColor: '#666',
tickPixelInterval: 30,
tickWidth: 2,
tickPosition: 'inside',
tickLength: 10,
tickColor: '#666',
labels: {
step: 2,
rotation: 'auto'
},
title: {
text: 'km/h'
},
plotBands: [{
from: 0,
to: 120,
color: '#55BF3B' // green
}, {
from: 120,
to: 160,
color: '#DDDF0D' // yellow
}, {
from: 160,
to: 200,
color: '#DF5353' // red
}]
},
series: [{
name: 'Speed',
data: [80],
tooltip: {
valueSuffix: ' km/h'
}
}]
},
// Add some life
function (chart) {
if (!chart.renderer.forExport) {
setInterval(function () {
var point = chart.series[0].points[0],
newVal,
inc = Math.round((Math.random() - 0.5) * 20);
newVal = point.y + inc;
if (newVal < 0 || newVal > 200) {
newVal = point.y - inc;
}
point.update(newVal);
}, 3000);
}
});
});
Gauge is not defined
<script src="../Assets/JS/nprogress.js"></script>
<script src="../Assets/JS/Chart.min.js"></script>
<script src="../Assets/JS/gauge.min.js"></script>
<script src="../Assets/bootstrap/bootstrap-progressbar.min.js"></script>
<script src="../Assets/JS/icheck.min.js"></script>
<script src="../Assets/JS/skycons.js"></script>
<script src="../Assets/JS/jquery.flot.js"></script>
<script src="../Assets/JS/jquery.flot.pie.js"></script>
<script src="../Assets/JS/jquery.flot.time.js"></script>
<script src="../Assets/JS/jquery.flot.stack.js"></script>
<script src="../Assets/JS/jquery.flot.resize.js"></script>
<script src="../Assets/JS/jquery.flot.orderBars.js"></script>
<script src="../Assets/JS/jquery.flot.spline.min.js"></script>
<script src="../Assets/JS/curvedLines.js"></script>
<script src="../Assets/JS/date.js"></script>
<script src="../Assets/JS/jquery.vmap.js"></script>
<script src="../Assets/JS/jquery.vmap.world.js"></script>
<script src="../Assets/JS/jquery.vmap.sampledata.js"></script>
<script src="../Assets/JS/moment.min.js"></script>
<script src="../Assets/JS/daterangepicker.js"></script>
<script src="../Assets/JS/custom.min.js"></script>
that is code that i am using in asp.net web form.
<!-- gauge.js -->
<script>
var opts = {
lines: 12,
angle: 0,
lineWidth: 0.4,
pointer: {
length: 0.75,
strokeWidth: 0.042,
color: '#1D212A'
},
limitMax: 'false',
colorStart: '#1ABC9C',
colorStop: '#1ABC9C',
strokeColor: '#F0F3F3',
generateGradient: true
};
var target = document.getElementById('foo'), gauge = new Gauge(target).setOptions(opts);
gauge.maxValue = 6000;
gauge.animationSpeed = 32;
gauge.set(3200);
gauge.setTextField(document.getElementById("gauge-text"));
</script>
I am using Highcharts gauges. Work perfectly in Chrome/Firefox/Safari -however the gauge needle does not appear in IE. This is echoed out in PHP. The "//Add some life" section of the code is all set to 0 so that the needle doesn't move.
echo "<div id='gauges'><h2>Points Achievements
</h2><div id='junior' class='gauge'>
<script type='text/javascript'>
$(function () {
$('#junior').highcharts({
chart: {
type: 'gauge',
plotBackgroundColor: null,
plotBackgroundImage: null,
plotBorderWidth: 0,
plotShadow: false,
backgroundColor:'rgba(255, 255, 255, 0.1)'
},
credits: {
enabled: false
},
title: {
text: 'Junior Club Award'
},
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: "; if($junior_sum >= 25){ echo "'#B1FCBC'";}else{ echo "'#DDD'"; } echo",
borderWidth: 0,
outerRadius: '101%',
innerRadius: "; if($junior_sum >= 25){ echo "'1%'";}else{ echo "'100%'"; } echo "
}]
},
// the value axis
yAxis: {
min: 0,
max: 25,
minorTickInterval: 'auto',
minorTickWidth: 1,
minorTickLength: 10,
minorTickPosition: 'inside',
minorTickColor: '#666',
tickPixelInterval: 30,
tickWidth: 2,
tickPosition: 'inside',
tickLength: 10,
tickColor: '#666',
labels: {
step: 2,
rotation: 'auto'
},
title: {
text: 'You have...'
},
plotBands: [{
from: 0,
to: " . $junior_sum .",
color: '#009FF5' // dark blue
},{
from: " . $junior_sum . " ,
to: 25,
color: '#92CFF0' // light blue
},
]
},
series: [{
name: 'Points Earned',
data: [" . $junior_sum . "],
tooltip: {
valueSuffix: ''
}
}]
},
// Add some life
function (chart) {
if (!chart.renderer.forExport) {
setInterval(function () {
var point = chart.series[0].points[0],
newVal,
inc = 0;
newVal = point.y + inc;
if (newVal < 0 || newVal > 200) {
newVal = point.y - inc;
}
point.update(newVal);
}, 3000);
}
});
});";
echo "</script></div>";
On your plotBands section of code you have a dangling comma:
plotBands: [{
from: 0,
to: " . $junior_sum .",
color: '#009FF5' // dark blue
}, {
from: " . $junior_sum . ",
to: 25,
color: '#92CFF0' // light blue
}, //here is your dangling comma
]
IE does not take kindly to those. Since do not list your actual js with data the if statements do not parse but I would check there also for invalid syntax. If possible put up a jsFiddle of what the js looks like for the chart once it has been parsed by PHP.
I am trying to make a Gauge chart.
The chart is displaying 80 but live data is not working.
I use the following code:
$(function () {
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'gauge',
plotBackgroundColor: null,
plotBackgroundImage: null,
plotBorderWidth: 0,
plotShadow: false
},
title: {
text: 'Speedometer'
},
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: 200,
minorTickInterval: 'auto',
minorTickWidth: 1,
minorTickLength: 10,
minorTickPosition: 'inside',
minorTickColor: '#666',
tickPixelInterval: 30,
tickWidth: 2,
tickPosition: 'inside',
tickLength: 10,
tickColor: '#666',
labels: {
step: 2,
rotation: 'auto'
},
title: {
text: 'km/h'
},
plotBands: [{
from: 0,
to: 120,
color: '#55BF3B' // green
}, {
from: 120,
to: 160,
color: '#DDDF0D' // yellow
}, {
from: 160,
to: 200,
color: '#DF5353' // red
}]
},
series: [{
name: 'Speed',
data: [80],
tooltip: {
valueSuffix: ' km/h'
}
}]
},
// Add some life
function (chart) {
setInterval(function() {
$(function() {
$.getJSON("livedata.php", function(data) {
$.each(data, function(key, val) {
if (key == 'Gas')
{
newVal = val;
var point = chart.series[0].points[0];
point.update(newVal);
}
});
});
}, "json");
}, 3000);
})
});
my simple test livedata.php is as follow:
// Set the JSON header
header("Content-type: text/json");
// The y value is a random number
$x = "Gas";
$y = rand(10, 100);
// Create a PHP array and echo it as JSON
$ret = array($x, $y);
echo json_encode($ret, JSON_NUMERIC_CHECK);
Can anybody tell me what is going wrong?
How can I test that the function is called?
How can I test that the livedata has passed?
I'm working on a dynamically loaded speedometer. Beyond my troubles with Ajax calls in conjunction with the speedometer, I have trouble keeping the 'needle' within the range (0-20). The integer output shows a number less than or greater than 20 as the needle spins past 0 or 20 in the wrong direction. I would like to keep it to the right of 0 and the left of 20. My code:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" >
<title>Tribble Inc Sales Meter</title>
<script type="text/javascript" src="jquery-1.8.2.min.js"></script>
<script type="text/javascript">
$(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: 20,
minorTickInterval: 'auto',
minorTickWidth: 1,
minorTickLength: 10,
minorTickPosition: 'inside',
minorTickColor: '#666',
tickPixelInterval: 20,
tickWidth: 2,
tickPosition: 'inside',
tickLength: 1,
tickColor: '#666',
labels: {
step: 2,
rotation: 'auto'
},
title: {
text: 'sales/min'
},
plotBands: [{
from: 0,
to: 4,
color: '#DF5353' // green
}, {
from: 4,
to: 8,
color: '#DDDF0D' // yellow
}, {
from: 8,
to: 20,
color: '#55BF3B' // red
}]
},
series: [{
name: 'Speed',
data: [18],
tooltip: {
valueSuffix: ' km/h'
}
}]
},
// Add some life
function (chart) {
setInterval(function () {
var point = chart.series[0].points[0],
newVal,
inc = Math.floor((Math.random() - 1) * 20);
newVal = point.y + inc;
if (newVal < 0 || newVal > 20) {
newVal = point.y - inc;
}
point.update(newVal);
}, 3000);
});
});
</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>
I'm not entirely sure what I'm doing wrong...perhaps the Math.floor() function is off but I don't think so. Can someone help out?
inc = Math.floor((Math.random() - 1) * 20);
newVal = point.y + inc;
if (newVal < 0 || newVal > 20) {
newVal = point.y - inc;
This code generates a negative inc, adds it to point, making point negative, and then subtracts it to point, making point more positive. It goes wrong because inc can be larger than point.
The algorithm you need depends on how you want the chart to vary. If you want the needle to wobble, then generate a smaller inc, add it to point and then bounds check it.
inc = (Math.random() * 2.0)-1.0;
newVal = point.y + inc;
if (newVal < 0 || newVal > 20) {
newVal = point.y - inc;