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?
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/
Im looking to have a set min and max (0-200) and to cap the gauge line at the 200. The data could be over 200, but the line on the gauge would still need to cap at 200.
Is there a parameter to do this?
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: [555],
tooltip: {
valueSuffix: ' km/h'
}
}]
You can use plotOptions.gauge.wrap: false to prevent wrapping around.
The API description:
wrap: Boolean
When this option is true, the dial will wrap around the axes. For instance, in a full-range gauge going from 0 to 360, a value of 400 will point to 40. When wrap is false, the dial stops at 360. Defaults to true.
Example usage (JSFiddle):
plotOptions: {
gauge: {
wrap: false
}
}
I am using highcharts speed o meter with PHP and MYSQL. It is working fine but the problem is that when I merge the JavaScript in my website, the speed o meter is not displaying. It does not appear any error, just blank screen where the speed o meter code is used. Here is my code:
$(function () {
$('#containers').highcharts({
chart: {
type: 'gauge',
plotBackgroundColor: null,
plotBackgroundImage: null,
plotBorderWidth: 0,
plotShadow: false
},
title: {
text: ''
},
pane: {
startAngle: -90,
endAngle: 90,
center: ['50%', '100%'],
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: 'Speed 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: [<?php echo join($result, ',') ?>],
tooltip: {
valueSuffix: ' km/h'
}
}]
},
// Add some life
function (chart) {
if (!chart.renderer.forExport) {
}
});
});
I don't know what is problem if any one knows please tell me.
The only thing i see is that you forgot a semi-colon:
<?php echo join($result, ',') ?>
Change to
<?php echo join($result, ','); ?>
Otherwise try the console-debugger for the javascript-part.
I am trying to create a CPU gauge chart with highcharts. I have php script that I would like to call every 5 seconds to get the output and display the data on the gaug:
the ajax function is as follows:
function request_cpu_Data() {
$.ajax({
url: 'get_cpu.php',
success: function(point) {
var myObj = JSON.parse(point);
//This is the data part
var myDate=myObj[0]
//This is the CPU value
var myData=myObj[1];
cpu_chart.addSeries({ data: myData });
setTimeout(request_cpu_Data, 300000);
},
cache: false
});
}
output of get_cpu.php script looks like this:
[1371048443000,46]
This is the function to create the guage highchart:
$(document).ready(function() {
cpu_chart = new Highcharts.Chart({
chart: {
type: 'gauge',
plotBackgroundColor: null,
plotBackgroundImage: null,
plotBorderWidth: 0,
renderTo: 'container',
plotShadow: false,
events: {
load: request_cpu_Data
}
},
title: {
text: 'Profile DB'
},
credits: {
enabled: false
},
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: 10,
minorTickPosition: 'inside',
minorTickColor: '#666',
tickPixelInterval: 30,
tickWidth: 2,
tickPosition: 'inside',
tickLength: 10,
tickColor: '#666',
labels: {
step: 2,
rotation: 'auto'
},
title: {
text: 'CPU'
},
plotBands: [{
from: 0,
to: 65,
color: '#55BF3B' // green
}, {
from: 65,
to: 75,
color: '#DDDF0D' // yellow
}, {
from: 75,
to: 100,
color: '#DF5353' // red
}]
},
series: [{
name: 'CPU',
data: [],
tooltip: {
valueSuffix: '%'
}
}]
});
});
When I do this gauge chart is not showing any data. Can somebody tell me what I might be missing here? I like to show the myDate in the the gauage as well.
I figured out the problem. There is my revised function:
function request_cpu_Data() {
$.ajax({
url: 'get_cpu.php',
success: function(data) {
var myObj = JSON.parse(data);
var point = cpu_chart.series[0].points[0];
var newVal=myObj[1];
//alert(newVal);
point.update(newVal);
setTimeout(request_cpu_Data, 10000000);
},
cache: false
});
}
I also head to initialize my data to 0:
series: [{
name: 'CPU',
data: [0],
},
Something like this should work:
Chart.addSeries({ data: fromGetCpu[1] });
There is also a name parameter if you like:
Chart.addSeries({ name: 'yourName', data: fromGetCpu[1] });
Could someone please assist me on modifying the code from HighCharts Angular Gauge demo to load data from a comma-separated values file?
The comma-separated values column should be specifiable. i.e: data[0], data[1], data[2]
$(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);
}
});
});
An Example of comma-separated values data being loaded into Highcharts Demo - Ajax loaded data, clickable points.
$(function () {
// Register a parser for the American date format used by Google
Highcharts.Data.prototype.dateFormats['m/d/Y'] = {
regex: '^([0-9]{1,2})\/([0-9]{1,2})\/([0-9]{2})$',
parser: function (match) {
return Date.UTC(+('20' + match[3]), match[1] - 1, +match[2]);
}
};
// Get the CSV and create the chart
$.get('/samples/highcharts/demo/line-ajax/analytics.csv', function (csv) {
$('#container').highcharts({
data: {
csv: csv
},
title: {
text: 'Daily visits at www.highcharts.com'
},
subtitle: {
text: 'Source: Google Analytics'
},
xAxis: {
type: 'datetime',
tickInterval: 7 * 24 * 3600 * 1000, // one week
tickWidth: 0,
gridLineWidth: 1,
labels: {
align: 'left',
x: 3,
y: -3
}
},
yAxis: [{ // left y axis
title: {
text: null
},
labels: {
align: 'left',
x: 3,
y: 16,
formatter: function() {
return Highcharts.numberFormat(this.value, 0);
}
},
showFirstLabel: false
}, { // right y axis
linkedTo: 0,
gridLineWidth: 0,
opposite: true,
title: {
text: null
},
labels: {
align: 'right',
x: -3,
y: 16,
formatter: function() {
return Highcharts.numberFormat(this.value, 0);
}
},
showFirstLabel: false
}],
legend: {
align: 'left',
verticalAlign: 'top',
y: 20,
floating: true,
borderWidth: 0
},
tooltip: {
shared: true,
crosshairs: true
},
plotOptions: {
series: {
cursor: 'pointer',
point: {
events: {
click: function() {
hs.htmlExpand(null, {
pageOrigin: {
x: this.pageX,
y: this.pageY
},
headingText: this.series.name,
maincontentText: Highcharts.dateFormat('%A, %b %e, %Y', this.x) +':<br/> '+
this.y +' visits',
width: 200
});
}
}
},
marker: {
lineWidth: 1
}
}
},
series: [{
name: 'All visits',
lineWidth: 4,
marker: {
radius: 4
}
}, {
name: 'New visitors'
}]
});
});
});
Many Thanks,
First of all I see that you have empty series.data which doesn't exists. In case when you download data by ajax, you push your data to series or use i.e setData() / addPoint() functions. All of them are documented here: http://api.highcharts.com/highcharts
I advice to familiar with article about preprocessing data http://docs.highcharts.com/#preprocessing