The request is to load real-time data like CPU usage,memory usage dynamically and transform the data into charts using highcharts.
Here is my code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>netdata_test</title>
<script src="jquery-1.12.3.js"></script>
<script src="highcharts.js"></script>
</head>
<body>
<div id="container" style="min-width:400px;width:1200px;height:400px;"></div>
<script>
$(function () {
$(document).ready(function() {
Highcharts.setOptions({
global: {
useUTC: false
}
});
$('#container').highcharts({
chart: {
type: 'spline',
animation: Highcharts.svg,
marginRight: 10,
events: {
load: function() {
// set up the updating of the chart each second
var series = this.series;
setInterval(function() {
var result = get_y_data();
var y_result = rebuild_y_data();
for(var i=0;i<series.length;i++){
//define the value of x and y
//the value of x is time
//the value of y is usage
//however,I didn't get the result that I wish to see
//wondering there is something wrong with this function
var x = result[i].data[0];
var y = y_result[i];
series[i].addPoint(y,true,true);
}
}
}, 1000);
}
}
},
title: {
text: 'Live random data '
},
xAxis: {
type: 'datetime',
tickPixelInterval: 150
},
yAxis: {
title: {
text: 'Value'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
tooltip: {
formatter: function() {
return '<b>'+ this.series.name +'</b><br/>'+
Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x) +'<br/>'+
Highcharts.numberFormat(this.y, 2);
}
},
plotOptions: {
line: {
dataLabels: {
enabled: true
},
enableMouseTracking: false
}
},
legend: {
enabled: false
},
exporting: {
enabled: false
},
series:create()
});
});
});
//get data with time
function get_y_data() {
var data = [];
$.ajax({
async: false,
url: "netdata_with_time.json",
success: function (response) {
var key = Object.keys(response.data);
var size = key.length;
for (var i = 0; i < size; i++) {
var steal = response.data[i];
data.push({"data":steal});
}
}
});
return data;
}
//first time load data
function create() {
var series = [];
$.ajax({
type: "POST",
url: "netdata_with_time.json",
async: false,
success: function(result){
var channels = Object.keys(result.data);
var size = channels.length;
for(var i=0; i<size; i++) {
var data = $.grep(result.data[i],function(n,i){
return n < 100
});
series.push({"data":data});
}
}
}, false);
return series;
}
//get data without time
function rebuild_y_data(){
var y_array = [];
var old_y = get_y_data();
for(var i=0;i<old_y.length;i++){
var new_y = $.grep(old_y[i].data,function(n,i){
return n < 100
});
y_array.push(new_y);
}
return y_array;
}
</script>
</body>
</html>
And here is the content of netdata_with_time.json
{
"labels": ["time", "steal", "softirq", "user", "system", "nice", "iowait"],
"data":
[
[ 1463450420000, 0, 0.25099, 0.25099, 3.00799, 3.00852, 0.25099],
[ 1463450422000, 0, 0.25152, 0.25226, 2.5189, 2.01438, 0],
[ 1463450424000, 0, 0, 0.25026, 2.01521, 2.76598, 0],
[ 1463450426000, 0, 0, 0, 4.02518, 2.51662, 0],
[ 1463450428000, 0, 0.25381, 0, 4.78807, 6.04569, 0],
[ 1463450430000, 0, 0.49751, 0.25097, 6.99208, 5.50262, 0],
[ 1463450432000, 0, 0.25137, 0.50043, 8.27151, 6.76643, 0],
[ 1463450434000, 0, 0.25151, 0.50251, 3.77062, 7.79477, 0],
[ 1463450436000, 0, 0.25126, 0.49878, 15.76944, 15.00074, 2.25758],
[ 1463450438000, 0, 0, 0, 11.16972, 23.60662, 4.06267],
[ 1463450440000, 0, 0.51502, 0.25751, 23.84824, 31.05425, 3.36508],
[ 1463450442000, 0.25071, 0, 0.25097, 21.84656, 37.19673, 0.25097],
[ 1463450444000, 0, 0.24531, 0, 19.11278, 27.2775, 0],
[ 1463450446000, 0, 0, 0.25285, 17.83818, 43.75804, 0.24968],
[ 1463450448000, 0.25168, 0.25168, 0, 16.40334, 37.63628, 0],
[ 1463450450000, 0, 0.24959, 0.25126, 11.76487, 42.61857, 0.25126],
[ 1463450452000, 0, 0.50289, 0.00089, 8.81355, 44.83934, 0.25215],
[ 1463450454000, 0, 0.00086, 0, 2.02033, 52.24931, 0.00086],
[ 1463450456000, 0.25126, 0, 0.25, 2.00502, 51.6294, 0],
[ 1463450458000, 0.24958, 0, 0, 1.24875, 52.75178, 0]
]
}
and this is the output of my code.
Every time data was loaded,the output would display just like the pictrue above.
But my wish is to display like the pictrue below.
Please help me.
Related
I am new and I want to update and display my chart.js in HTML with data got from my database using sinalr script. I used alert and it has value but still nothing in my chart. Can you check and show me what's the problem in my code. Thank you so much.
SignalR script :
<script type="text/javascript">
$(function () {
//Proxy created on the fly
var cus = $.connection.cusHub;
//Declare a function on the job hub so the server can invoke
cus.client.displayValue = function () {
getData();
};
//Start the connection
$.connection.hub.start();
getData();
});
function getData() {
var $tbl = $('#tblValue');
$.ajax({
url: $("#Get").val(),
type: 'GET',
datatype: 'json',
success: function (data) {
$tbl.empty();
$.each(data.listCus, function (i, model) {
$tbl.append
(
//'<tr>' +
//'<td>' + model.DeviceID + '</td>' +
//'<td>' + model.Value + '</td>' +
//'</tr>'
model.Value
);
});
}
});
}
</script>
Display in HTML by tag ID :
<h2 id="tblValue" class="number" onchange="UpdateChart()"> </h2>
Chart.js code :
<script>
var ctx = document.getElementById("percent-chart2");
var myVar = setInterval(GetValue, 5000);
function GetValue() {
const vals = parseFloat(document.getElementById("tblValue").innerHTML);
//alert(vals);
return vals;
}
const my_val = GetValue();
if (ctx) {
ctx.height = 209;
var myChart = new Chart(ctx, {
type: 'doughnut',
data: {
datasets: [
{
label: "My First dataset",
data: [my_val, my_val, my_val],
//data: [vals, vals, vals],
backgroundColor: [
'#00b5e9',
'#fa4251',
'#006400'
],
hoverBackgroundColor: [
'#00b5e9',
'#fa4251',
'#006400'
],
borderWidth: [
0, 0, 0
],
hoverBorderColor: [
'transparent',
'transparent',
'transparent'
]
}
],
labels: [
'STATION 1',
'STATION 2',
'STATION 3'
]
},
options: {
maintainAspectRatio: false,
responsive: true,
cutoutPercentage: 87,
animation: {
animateScale: true,
animateRotate: true
},
legend: {
display: false,
position: 'bottom',
labels: {
fontSize: 14,
fontFamily: "Poppins,sans-serif"
}
},
tooltips: {
titleFontFamily: "Poppins",
xPadding: 15,
yPadding: 10,
caretPadding: 0,
bodyFontSize: 16,
}
}
});
}
function UpdateChart() {
var updateValues = [my_val, my_val, my_val];
myChart.data.datasets[0].data = updateValues;
myChart.update();
}
</script>
i have the next problem with Highcharts. This is a new Highchart for an other site.
See here: https://imgur.com/a/VQQLU
The arrow show to -3 Megawatts but the value at the bottom shows another value. At the first pageload the values are identical, but there comes all 5 seconds new values. And they are not updated at the bottom.
Edit: The tolltip will be updated correctly.
My code:
$(function () {
$.getJSON('jsonlive.php', function(chartData) {
var ADatum; var Eheit; var AktL; var MinL; var MaxL; var chartValue; var i;
ADatum = chartData[0].AktDatum;
Eheit = chartData[0].Einheit;
AktL = chartData[0].AktuelleLeistung;
MinL = chartData[0].MinLeistung;
MaxL = chartData[0].MaxLeistung;
var tMin = (MinL*-1); var tMax = MaxL;
var ttt = new Array();
if (tMin < tMax) { chartValue = tMax; } else if (tMin > tMax) { chartValue = tMin; } // Ermitteln ob neg/pos Zahl die größere ist.
ttt[0] = (chartValue*-1); // Skala mit Zahlen beschriften
for (i = 1; i < chartValue; i++) { ttt[i] = (i*-1); }
var tz = ttt.length ;
for (i = 0; i < chartValue; i++) { ttt[(tz+i)] = i; }
ttt[ttt.length] = chartValue;
var gaugeOptions = {
chart:{ events: {
load: function () { setInterval(function () {
$.getJSON('jsonlive.php', function(chartData) {
ADatum = chartData[0].AktDatum;
AktL = chartData[0].AktuelleLeistung;
var point = $('#inhalt').highcharts().series[0].setData([AktL], true);
});}, 5000);}
}, type: 'gauge' },
title: null,
pane: {
center: ['50%', '85%'], size: '140%', startAngle: -90, endAngle: 90,
background: [{
backgroundColor: {
linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
stops: [[0, '#00fb00'],[1, '#003f00']]},
borderWidth: 2,
outerRadius: '109%',
innerRadius: '102%', shape: 'arc' }]
},
series: [{
data: [AktL],
dataLabels: { borderWidth: 0,align: 'center',x: 0,y: 110,
format: '<div style="text-align:center;font-size:24px;color:black">'+AktL+' ' +Eheit+'</span></div>'
}
}],
tooltip: {
formatter: function () { return 'Datum: <b>' + (new Date(ADatum).toLocaleString("de-DE", { timeZone: 'UTC' })) +
'</b> <br>Leistung <b>' + AktL + ' ' + Eheit + '</b>';}, enabled: true },
yAxis: {lineWidth: 10, minorTickInterval: null, tickPixelInterval: 100, tickWidth: 5, title: { y: -250 }, labels: { y: 2 }}
};
// Anzeige
$('#inhalt').highcharts(Highcharts.merge(gaugeOptions, {
yAxis: {
min: (chartValue*-1),max: chartValue,tickPositions: ttt,tickColor: '#666',minorTickColor: '#666',
plotBands: [{ // optionaler Bereich, zeigt von 0-1 grün, 1 bis hälfte maximum gelb, und hälfte max bis max rot
from: 0, to: -1, color: '#55BF3B' }, { // green
from: -1, to: ((chartValue*-1)/2), color: '#DDDF0D' }, { // yellow
from: ((chartValue*-1)/2),to: (chartValue*-1),color: '#DF5353' }, { // red
from: 0,to: 1,color: '#55BF3B' }, { // green
from: 1,to: (chartValue/2),color: '#DDDF0D' }, { // yellow
from: (chartValue/2),to: chartValue,color: '#DF5353' }],// red
title: { style: { color: 'black', fontWeight: 'bold', fontSize: '24px' }, text: 'Leistung in '+Eheit },
labels: { formatter: function () { return this.value; }}},
credits: { enabled: false } // Link auf highcharts rechts unten an/aus
}));
});
});
</script>
The problem here is that you use a hard-coded value (AktL) in your dataLabels.format. In your example format is just a string that's used all the time.
Use {point.y} to have the label updated on every setData():
series: [{
data: [val],
dataLabels: {
// format: val // WONT WORK
format: '{point.y}'
}
}],
Live demo: http://jsfiddle.net/BlackLabel/v28q5n09/
have JSON
<c:set var="json_text">
{
"FailedCount":[{"FailedCount_MEAS_VALUE":1,"DATETIME_CURRENT":"12:01"},
{"FailedCount_MEAS_VALUE":0,"DATETIME_CURRENT":"12:02"},
{"FailedCount_MEAS_VALUE":3,"DATETIME_CURRENT":"12:03"},
{"FailedCount_MEAS_VALUE":4,"DATETIME_CURRENT":"12:04"}],
"SucceededCount":[{"SucceededCount_MEAS_VALUE":110},
{"SucceededCount_MEAS_VALUE":120},
{"SucceededCount_MEAS_VALUE":130},
{"SucceededCount_MEAS_VALUE":140}]
}
</c:set>
prepare data
function culcJson() {
var jsonObj = ${json_text};
var VALUES=[];
var n = jsonObj.FailedCount.length, m = 5;
var mas = [];
for (var i = 0; i < m; i++){
mas[i] = [];
for (var j = 0; j < n; j++){
if (i==0) {
mas[i][j] = jsonObj.FailedCount[j].FailedCount_MEAS_VALUE;
}
if (i==1)
{
mas[i][j] = jsonObj.SucceededCount[j].SucceededCount_MEAS_VALUE;
}
if (i==2)
{
mas[i][j] =jsonObj.FailedCount[j].FailedCount_MEAS_VALUE+jsonObj.SucceededCount[j].SucceededCount_MEAS_VALUE;
}
if (i==3)
{
var KPI = jsonObj.SucceededCount[j].SucceededCount_MEAS_VALUE / (jsonObj.SucceededCount[j].SucceededCount_MEAS_VALUE + jsonObj.FailedCount[j].FailedCount_MEAS_VALUE) * 100;
mas[i][j] = +KPI.toFixed(2);
}
if (i==4)
{
mas[i][j] =jsonObj.FailedCount[j].DATETIME_CURRENT;
}
VALUES.push(mas[i][j]);
}}
console.log(mas);
return VALUES;
}
trying to build chart depending KPI from DATETIME
$(function () {
var VALUES;
VALUES=culcJson();
result_newjson.innerHTML = VALUES;
$('#container').highcharts({
chart: {
zoomType: 'x'
},
title: {
text: '${title}'
},
xAxis: {
categories: ["12:01","12:02","12:03","12:04"]
},
yAxis: {
title: {
text: ''
}
},
legend: {
enabled: true
},
plotOptions: {
area: {
fillColor: {
linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1},
stops: [
[0, Highcharts.getOptions().colors[0]],
[1, Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0).get('rgba')]
]
},
marker: {
radius: 2
},
lineWidth: 1,
states: {
hover: {
lineWidth: 1
}
},
threshold: null
}
},
series: [
{
name: 'KPI',
data: [99.5,100,98.56,99.99]
}
]
});
});
How to correctly refer to VALUES array to select only the time and KPI instead of static values
categories: ["12:01","12:02","12:03","12:04"] и data: [99.5,100,98.56,99.99]
?
I've made this bar chart http://imageshack.com/a/img901/7186/cnOfhh.png, and the code for it is:
//compute & mark average color
for (var i = 0; i < zdata.length; i++) {
if (zdata[i].TargetTime == null) zdata[i].TargetTime = 0;
if (zdata[i].TimePlayed == null) zdata[i].TimePlayed = 0;
if (zdata[i].TargetTime >= zdata[i].TimePlayed) {
zdata[i]['Color'] = 'green';
} else {
zdata[i]['Color'] = 'red';
}
}
//localsitelist
var element = {
rt: 'D',
Id: rid,
courselist: clist,
selcourseId: selCid,
selcourse: selCname,
cartlist: wData,
selSiteId: lsid,
selsite: sitename,
dataList: zdata
}; //, carts: _mVM.availableCarts()}; //
//if rid exists, is update, else its new
var found = -1;
for (var k = 0; k < document.pvm.rapArray().length; k++) {
if (document.pvm.rapArray()[k].Id() == rid) {
document.pvm.rapArray()[k].update(element);
//build chart data
var values = []; //, series = Math.floor(Math.random() * 6) + 6;
for (var i = 0; i < zdata.length; i++) {
values[i] = {
data: [
[zdata[i].HoleSequence, zdata[i].TimePlayed]
],
color: zdata[i].Color
};
}
//var data = [{ data: [[0, 1]], color: "red" }, { data: [[1, 2]], color: "yellow" },{ data: [[2, 3]], color: "green" }];
BarChart('#ChartD-Overview' + rid, values);
found = 1;
break;
}
}
if (found == -1) {
var rvm = new panelViewModel(element);
document.pvm.rapArray.push(rvm);
//build chart data
var values = []; //, series = Math.floor(Math.random() * 6) + 6;
for (var i = 0; i < zdata.length; i++) {
values[i] = {
data: [
[zdata[i].HoleSequence, zdata[i].TimePlayed]
],
color: zdata[i].Color
};
}
BarChart('#ChartD-Overview' + rvm.Id(), values);
}
and the BarChart function:
function BarChart(id, data) {
$.plot(id, data, {
series: {
bars: {
show: true,
barWidth: 0.6,
align: "center"
}
},
stack: true,
xaxis: {
mode: "categories",
tickLength: 0
}
});
}
The problem is that I can't manage to get something like this https://imageshack.us/i/expGGpOkp, the little line should be zdata[i].TargetTime. I've tried something using stacked bar chart idea but the result was way different... What am I doing wrong? Can anyone help me with a suggestion to start with to get the same bar chart like in the last image?
Here is something like your second picture using another bar dataseries where the start and end of the bars are the same thereby reducing them to lines, you don't need to stack any of the bars just give them the right y-values (fiddle):
$(function () {
var dataBarsRed = {
data: [
[2, 3], ],
label: 'Bars in Red',
color: 'red'
};
var dataBarsGreen = {
data: [
[1, 2],
[3, 1],
[4, 3]
],
label: 'Bars in Green',
color: 'green'
};
var dataLines = {
data: [
[1, 3, 3],
[2, 3.5, 3.5],
[3, 1.5, 1.5],
[4, 2.5, 2.5]
],
label: 'Lines',
color: 'navy',
bars: {
barWidth: 0.5
}
};
var plot = $.plot("#placeholder", [dataBarsRed, dataBarsGreen, dataLines], {
points: {
show: false
},
lines: {
show: false
},
bars: {
show: true,
align: 'center',
barWidth: 0.6
},
grid: {
hoverable: true,
autoHighlight: true
},
xaxis: {
min: 0,
max: 5
},
yaxis: {
min: 0,
max: 5
}
});
});
I've made this bar chart http://imageshack.com/a/img901/7186/cnOfhh.png, and the code for it is:
//compute & mark average color
for (var i = 0; i < zdata.length; i++) {
if (zdata[i].TargetTime == null) zdata[i].TargetTime = 0;
if (zdata[i].TimePlayed == null) zdata[i].TimePlayed = 0;
if (zdata[i].TargetTime >= zdata[i].TimePlayed) {
zdata[i]['Color'] = 'green';
} else {
zdata[i]['Color'] = 'red';
}
}
//localsitelist
var element = {
rt: 'D',
Id: rid,
courselist: clist,
selcourseId: selCid,
selcourse: selCname,
cartlist: wData,
selSiteId: lsid,
selsite: sitename,
dataList: zdata
}; //, carts: _mVM.availableCarts()}; //
//if rid exists, is update, else its new
var found = -1;
for (var k = 0; k < document.pvm.rapArray().length; k++) {
if (document.pvm.rapArray()[k].Id() == rid) {
document.pvm.rapArray()[k].update(element);
//build chart data
var values = []; //, series = Math.floor(Math.random() * 6) + 6;
for (var i = 0; i < zdata.length; i++) {
values[i] = {
data: [
[zdata[i].HoleSequence, zdata[i].TimePlayed]
],
color: zdata[i].Color
};
}
//var data = [{ data: [[0, 1]], color: "red" }, { data: [[1, 2]], color: "yellow" },{ data: [[2, 3]], color: "green" }];
BarChart('#ChartD-Overview' + rid, values);
found = 1;
break;
}
}
if (found == -1) {
var rvm = new panelViewModel(element);
document.pvm.rapArray.push(rvm);
//build chart data
var values = []; //, series = Math.floor(Math.random() * 6) + 6;
for (var i = 0; i < zdata.length; i++) {
values[i] = {
data: [
[zdata[i].HoleSequence, zdata[i].TimePlayed]
],
color: zdata[i].Color
};
}
BarChart('#ChartD-Overview' + rvm.Id(), values);
}
and the BarChart function:
function BarChart(id, data) {
$.plot(id, data, {
series: {
bars: {
show: true,
barWidth: 0.6,
align: "center"
}
},
stack: true,
xaxis: {
mode: "categories",
tickLength: 0
}
});
}
The problem is that I can't manage to get something like this https://imageshack.us/i/expGGpOkp, the little line should be zdata[i].TargetTime. I've tried something using stacked bar chart idea but the result was way different... What am I doing wrong? Can anyone help me with a suggestion to start with to get the same bar chart like in the last image?
Here is something like your second picture using another bar dataseries where the start and end of the bars are the same thereby reducing them to lines, you don't need to stack any of the bars just give them the right y-values (fiddle):
$(function () {
var dataBarsRed = {
data: [
[2, 3], ],
label: 'Bars in Red',
color: 'red'
};
var dataBarsGreen = {
data: [
[1, 2],
[3, 1],
[4, 3]
],
label: 'Bars in Green',
color: 'green'
};
var dataLines = {
data: [
[1, 3, 3],
[2, 3.5, 3.5],
[3, 1.5, 1.5],
[4, 2.5, 2.5]
],
label: 'Lines',
color: 'navy',
bars: {
barWidth: 0.5
}
};
var plot = $.plot("#placeholder", [dataBarsRed, dataBarsGreen, dataLines], {
points: {
show: false
},
lines: {
show: false
},
bars: {
show: true,
align: 'center',
barWidth: 0.6
},
grid: {
hoverable: true,
autoHighlight: true
},
xaxis: {
min: 0,
max: 5
},
yaxis: {
min: 0,
max: 5
}
});
});