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] });
Related
I am trying to get JSON from an onSelect function of a Jquery datePicker and send it to a highchairs gauge. this is my website that shows what I am trying to accomplish.
I cannot figure out why it will not display the correct data in the Highcharts gauges.
$(document).ready(function () {
$('#datepicker').datepicker({minDate: new Date(2016, 07 - 1, 1), maxDate: 0, dateFormat: 'yy-mm-dd', onSelect: function(dateText, data) {
var myDate = $(this).datepicker('getDate');
$('#apDiv1').html($.datepicker.formatDate('DD, d', myDate));
$('#apDiv5').html($.datepicker.formatDate('MM', myDate));
$('#apDiv7').html($.datepicker.formatDate('yy', myDate));
$.ajax({
type: "POST",
url: "clickdates.php",
data: {choice: dateText},
dataType: "json",
success: function(json_data) {
console.log(json_data)
$('#apDiv2a').html(json_data.ampPowerP[0]).show();
$('#apDiv2b').html(json_data.dayPowerP[0]).show();
$('#apDiv6a').html(json_data.monthAmpP[0]).show();
$('#apDiv6b').html(json_data.monthPowerP[0]).show();
$('#apDiv8a').html(json_data.yearAmpP[0]).show();
$('#apDiv8b').html(json_data.yearPowerP[0]).show();
$('#neon1').html(json_data.stateC[0]).show();
$('#alarm').html(json_data.alarm[0]).show();
$('#fault').html(json_data.fault[0]).show();
}
})
$(function () {
var options = {
chart: {
type: 'gauge',
renderTo: 'minVolt',
plotBackgroundColor: null,
plotBackgroundImage: null,
plotBorderWidth: 0,
plotShadow: false,
backgroundColor: null,
borderWidth: 0,
spacingTop: 0,
spacingLeft: 0,
spacingRight: 0,
spacingBottom: 0,
},
title: {
text: null
},
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: 20,
max: 40,
minorTickInterval: 'auto',
minorTickWidth: 1,
minorTickLength: 10,
minorTickPosition: 'inside',
minorTickColor: '#666',
tickPixelInterval: 20,
tickWidth: 2,
tickPosition: 'inside',
tickLength: 10,
tickColor: '#666',
labels: {
step: 2,
rotation: 'auto'
},
title: {
y: 20,
text: 'Volts'
},
plotBands: [{
from: 20,
to: 22,
color: '#DF5353' // red
}, {
from: 22,
to: 23,
color: '#FFFF00' // yellow
}, {
from: 23,
to: 30,
color: '#55BF3B' // green
}, {
from: 30,
to: 40,
color: '#DF5353' // red
}]
}, credits: {
enabled:false,
},
series: [{
name: 'gauge1',
data: [],
tooltip: {
enabled: false
},
}]
};
$.ajax({
url: "clickdates.php",
data: {choice: data},
type:'get',
dataType: "json",
cache: false,
success: function(data){
options.series[0].data = data.gauge1;
var chart = new Highcharts.Chart(options);
}
});
});
}});
});
This is the PHP for the gauge that outputs {"gauge1":[24.2]}
$choice = isset($_POST['choice']) ? date("Y-m-d",strtotime($_POST['choice'])) : date("Y-m-d");
$conn = new mysqli("localhost","root","root","ENERGY");
if ($conn->connect_error) {
die("Database connection failed: " . $conn->connect_error);
}
$sql = "SELECT IFNULL(SUM(Vb_min_daily),'24.6') AS choice FROM Solar WHERE date = '".$choice."'";
$result=mysqli_query($conn,$sql);
$row = mysqli_fetch_assoc($result);
$battMin = array( $row['choice']);
$outarr['gauge1'] = $battMin;
print json_encode($outarr, JSON_NUMERIC_CHECK);
$conn->close();
I am not a computer programmer by trade. Just a simple DIY type of individual trying to Do Thing Myself...
I found my error.
It was in the PHP that relates to the JSON. I was using $_POST when I should have been using $_GET
Here is what I had...
$choice = isset($_POST['choice']) ? date("Y-m-d",strtotime($_POST['choice'])) : date("Y-m-d");
When it should have be...
$choice = isset($_GET['choice']) ? date("Y-m-d",strtotime($_GET['choice'])) : date("Y-m-d");
A simple change of POST to GET, and everything works.
The weeks of frustration, and then when things finally work... What a great feeling, and a lesson well leaned from just falling on my face, and reading more with stronger determination from each failure. So wonderful.
Alan
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.
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
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?