We Keep Coding

HighCharts : Total Value is not showing in Pie Chart

I am Trying to Display The Total Users on the PieChart. But my "getting the Total Code" is not Working. It Displays Nothing.
Here is The Code that I am Using :
events: {
load: function(event) {
var total = 0;
for(var i=0, len=this.series[0].yData.length; i<len; i++){
total += this.series[0].yData[i];
}
var text = this.renderer.text(
'Total: ' + total,
this.plotLeft,
this.plotTop - 20
).attr({
zIndex: 5
}).add()
}
}
If I Can Show You My Full Code Here it is :
var data = <?php echo $data ; ?>
data.forEach(function(el) {
el.name = el.label;
el.y = Number(el.value);
});
Highcharts.chart('pieDiv', {
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
type: 'pie',
events: {
load: function(event) {
var total = 0;
for(var i=0, len=this.series[0].yData.length; i<len; i++){
total += this.series[0].yData[i];
}
var text = this.renderer.text(
'Total: ' + total,
this.plotLeft,
this.plotTop - 20
).attr({
zIndex: 5
}).add()
}
}
},
title: {
text: undefined
},
credits: {
enabled: false
},
exporting: { enabled: false } ,
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b> ({point.y}
Users)'
},
plotOptions: {
pie: {
colors:
Highcharts.map(["#59deed","#e86e65","#de8f14","#589bcf","#a05195","#35cc95",
"#72a7b3"], function (color) {
return {
radialGradient: {
cx: 0.5,
cy: 0.3,
r: 0.7
},
stops: [
[0, color],
[1, Highcharts.Color(color).brighten(-0.3).get('rgb')] // darken
]
};
}),
states: {
inactive: {
opacity: 1
}
},
allowPointSelect: true,
cursor: 'pointer',
fillOpacity: 1,
showInLegend: true,
dataLabels: {
enabled: true,
format: '<b>{point.name}</b>: {point.percentage:.1f} % <br/>
({point.y} Users)',
style: {
color: (Highcharts.theme &&
Highcharts.theme.contrastTextColor) || 'black'
}
}
}
},
series: [{
name: 'Users',
colorByPoint: true,
data: data
}]
});
I am Able to Get the Data on the Pie Chart . but the Total is not being Displayed. It was supposed to be appear on the top Left Corner of the Box

You've made a simple mistake in js for loop code using , instead of ;. Check the code and working demo with total data rendered properly.
Code:
chart: {
events: {
load: function() {
var total = 0,
len = this.series[0].yData.length,
text;
for (var i = 0; i < len; i++) {
total += this.series[0].yData[i];
}
text = this.renderer.text(
'Total: ' + total,
this.plotLeft,
this.plotTop - 20
).attr({
zIndex: 5
}).add();
}
}
}
Demo:
https://jsfiddle.net/BlackLabel/o4bx6139/1/

How to contain category data in tooltip

I've seen tutorials and posts about getting data from the x axis into the tooltip but I am overriding it with categories and cannot figure out how to get the x axis to show up in the tooltip.
This is what im working with:
function showTooltip(x, y, contents) {
$('<div id="tooltip" class="flot-tooltip tooltip"><div class="tooltip-arrow"></div>' + contents + '</div>').css({
top: y - 43,
left: x - 15,
}).appendTo("body").fadeIn(200);
}
var data = [[1492854610, -1240],[1492939020, -1273],[1493025073, -1279],[1493117066, -1186],[1493198484, -1269],[1493289175, -1198],[1493370646, -1280],[1493458518, -1255],[1493543731, -1275],[1493630250, -1273],[1493716306, -1279],[1493803609, -1264],[1493889258, -1276],[1493975557, -1278],[1494064529, -1235],[1494155440, -1160],[1494237980, -1224],[1494321047, -1280],[1494407990, -1271],[1494494125, -1275],[1494581609, -1257],[1494668321, -1252],[1494753220, -1277],[1494847855, -1140],[1494925963, -1278],[1495012537, -1275],[1495099289, -1269],[1495188205, -1227],[1495273568, -1244],[1495358329, -1272]];
$.plot($("#placeholder"), [{
label: "Delay: ",
data: data,
color: "#3a8ce5"
}], {
xaxis: {
mode: "categories",
tickLength: 0,
ticks: [[0, "1:50 AM"],[1, "1:17 AM"],[2, "1:11 AM"],[3, "2:44 AM"],[4, "1:21 AM"],[5, "2:32 AM"],[6, "1:10 AM"],[7, "1:35 AM"],[8, "1:15 AM"],[9, "1:17 AM"],[10, "1:11 AM"],[11, "1:26 AM"],[12, "1:14 AM"],[13, "1:12 AM"],[14, "1:55 AM"],[15, "3:10 AM"],[16, "2:06 AM"],[17, "1:10 AM"],[18, "1:19 AM"],[19, "1:15 AM"],[20, "1:33 AM"],[21, "1:38 AM"],[22, "1:13 AM"],[23, "3:30 AM"],[24, "1:12 AM"],[25, "1:15 AM"],[26, "1:21 AM"],[27, "2:03 AM"],[28, "1:46 AM"],[29, "1:18 AM"]]
},
yaxis: {
min: -2000,
max: 1000,
},
series: {
lines: {
show: true,
fill: true
},
points: {
show: true,
}
},
grid: {
hoverable: true,
clickable: true,
markings: [
{ color: '#000', lineWidth: 1, yaxis: { from: 0, to: 0 } },
]
},
legend: {
show: false
}
});
$("#placeholder").bind("plothover", function(event, pos, item) {
if (item) {
if (previousPoint != item.dataIndex) {
previousPoint = item.dataIndex;
$("#tooltip").remove();
var y = item.datapoint[1].toFixed();
showTooltip(item.pageX, item.pageY,
item.series.label + " = " + y);
}
} else {
$("#tooltip").remove();
previousPoint = null;
}
});
I am trying to get the times part of the categories. The item array has 3 pieces of data, none of which are the times
jFiddle:
http://jsfiddle.net/zw14y8c3/2/

The item.datapoint[0] data has the index of the x-axis tick. With that you can get the actual tick label from the ticks array:
var x = $("#placeholder").data('plot').getAxes().xaxis.ticks[item.datapoint[0]].label;
See the updated fiddle for the full example.

Highcharts solid gauge dynamic update

My idea is to display CPU and memory load with highcharts solid gauge which would update every few seconds, but what ever I do, it just wont run it as I wanted, so it's like this:
I have this php code which is giving me an integer for cpu and memory usage
$cpu = exec("mpstat 1 1 | grep 'all' | awk '{print 100 - $12}' | head -n 1");
$mem = exec("free -m | grep Mem | awk '{print $3 / $2 * 100}'");
This is my highcharts js script:
$(function () {
var gaugeOptions = {
chart: {
type: 'solidgauge'
},
title: null,
pane: {
center: ['50%', '85%'],
size: '105%',
startAngle: -90,
endAngle: 90,
background: {
backgroundColor: (Highcharts.theme && Highcharts.theme.background3) || '#EEE',
innerRadius: '60%',
outerRadius: '100%',
shape: 'arc'
}
},
tooltip: {
enabled: false
},
// the value axis
yAxis: {
stops: [
[0.1, '#55BF3B'], // green
[0.5, '#DDDF0D'], // yellow
[0.9, '#DF5353'] // red
],
lineWidth: 0,
minorTickInterval: null,
tickPixelInterval: 400,
tickWidth: 0,
title: {
y: -70
},
labels: {
y: 16
}
},
plotOptions: {
solidgauge: {
dataLabels: {
// y: 5,
borderWidth: 0,
useHTML: true
}
}
}
};setTimeout(function () {
$('#container-speed').highcharts(Highcharts.merge(gaugeOptions, {
yAxis: {
min: 0,
max: 100,
title: {
text: 'CPU'
}
},
credits: {
enabled: false
},
series: [{
name: 'CPU',
data: [0],
dataLabels: {
format: '<div style="text-align:center"><span style="font-size:18px;color:' +
((Highcharts.theme && Highcharts.theme.contrastTextColor) || '#CECECE') + '">{y:.1f} %</span><br/>' +
'<span style="font-size:12px;color:silver"></span></div>'
},
}]
}));
$('#container-rpm').highcharts(Highcharts.merge(gaugeOptions, {
yAxis: {
min: 0,
max: 100,
title: {
text: 'RAM'
}
},
series: [{
name: 'RAM',
data: [0],
dataLabels: {
format: '<div style="text-align:center"><span style="font-size:20px;font-family:Arial;color:' +
((Highcharts.theme && Highcharts.theme.contrastTextColor) || '#CECECE') + '">{y:.1f}%</span><br/>' +
'<span style="font-size:12px;color:silver"></span></div>'
},
}]
}));
var chart = $('#container-speed').highcharts(),
point,
newVal,
inc;
if (chart) {
point = chart.series[0].points[0];
inc = <?php echo $cpu; ?>;
newVal = inc;
if (newVal < 0 || newVal > 200) {
newVal = point.y - inc;
}
point.update(newVal);
}
chart = $('#container-rpm').highcharts();
if (chart) {
point = chart.series[0].points[0];
inc = <?php echo $mem; ?>;
newVal = inc;
if (newVal < 0 || newVal > 5) {
newVal = point.y - inc;
}
point.update(newVal);
} }, 5000);});
...and this is my container for calling the gauge:
<div style="width: 600px; height: 400px; margin: 0 auto" >
<div id="container-speed" style="width: 300px; height: 200px; float: left"></div>
<div id="container-rpm" style="width: 300px; height: 200px; float: left"></div></div>
Now, the problem is when it refreshes, it keeps giving me the same values on every refresh.
Thanks to everyone in advance.

I the meanwhile I managed to solve my problem with the help of #Grzegorz Blachliński's comment, so here goes:
first, my php code which is nothing more than two variables checking for cpu load and memory usage.
<?php
$cpu = exec("mpstat 1 1 | grep 'all' | awk '{print 100 - $12}' | head -n 1");
$mem = exec("free -m | grep Mem | awk '{print $3 / $2 * 100}'");
echo "[$cpu,$mem]";?>
Now, for some reason json_encode($cpu,$mem); was returning values which were inside quotes and I was able to read them as integer with for example alert(mem);, but the chart didn't accept those values and didn't draw chart, so I did a workaround for it by echoing the proper format of variable values.
Here's my javascript file:
function setDivHeight() {
var div = $('#cpu-meter');
div.height(div.width() * 0.75);
div = $('#memory-meter');
div.height(div.width() * 0.75); } $(function () {
if( $(window).width() < 1000){
setDivHeight();
$(window).on('load resize', function(){
setDivHeight();
});
}
var gaugeOptions = {
chart: {
type: 'solidgauge',
events: {
load: requestData
}
},
title: null,
pane: {
center: ['50%', '85%'],
size: '140%',
startAngle: -90,
endAngle: 90,
background: {
backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || '#EEE',
innerRadius: '60%',
outerRadius: '100%',
shape: 'arc'
}
},
tooltip: {
enabled: false
},
// the value axis
yAxis: {
stops: [
[0.1, '#55BF3B'], // green
[0.5, '#DDDF0D'], // yellow
[0.9, '#DF5353'] // red
],
lineWidth: 0,
minorTickInterval: null,
tickPixelInterval: 400,
tickWidth: 0,
title: {
y: -70
},
labels: {
y: 16
}
},
plotOptions: {
solidgauge: {
dataLabels: {
y: 5,
borderWidth: 0,
useHTML: true
}
}
}
};
$('#cpu-meter').highcharts(Highcharts.merge(gaugeOptions, {
yAxis: {
min: 0,
max: 100,
title: {
text: 'CPU Usage'
}
},
credits: {
enabled: false
},
series: [{
data: [0],
dataLabels: {
format: '<div style="text-align:center"><span style="font-size:20px;font-family:Arial;color:#777;">{y:.2f} %</span><br/>'
},
}]
}));
$('#memory-meter').highcharts(Highcharts.merge(gaugeOptions, {
yAxis: {
min: 0,
max: 100,
title: {
text: 'Memory Usage'
}
},
credits: {
enabled: false
},
series: [{
data: [0],
dataLabels: {
format: '<div style="text-align:center"><span style="font-size:20px;font-family:Arial;color:#777;">{y:.2f} %</span><br/>'
},
}]
}));
function requestData() {
$.ajax({
url: 'core/cpu-data.php',
type: "GET",
dataType:"json",
success: function(load) {
var chart = $('#cpu-meter').highcharts(),
point = 0,
newVal = 0,
inc = 0;
point = chart.series[0].points[0];
inc = load[0];
diff = newVal - inc;
if (diff > 0) {
newVal = newVal + diff;
} else {
newVal = newVal - diff;
}
point.update(newVal);
chart = $('#memory-meter').highcharts(),
point = 0,
newVal = 0,
inc = 0;
point = chart.series[0].points[0];
inc = load[1];
diff = newVal - inc;
if (diff > 0) {
newVal = newVal + diff;
} else {
newVal = newVal - diff;
}
point.update(newVal);
setTimeout(requestData, 3000);
},
cache: false
});
}});
As you can see, ajax is getting data from my php file and making gauge increase and decrease it's value for setTimeout value (don't use setInterval).
Once again, thanks to all for help.

The chart may be reloading, but it looks like you never reload the $cpu and $mem variables themselves. They would also need to be refreshed, as once they're assigned, they will continue to hold their initial value until you specifically re-execute their exec(...) commands and update them.

How to display time on x axis in flot line graph?

I am trying to show time intervals between Min and Max of a certain time range. Eg: 2015-04-30 10:20:00 and 2015-04-30 10:30:00 on x axis
I will be fetching all the values from database(which has datetime stored in 2015-04-30 10:27:58 format and passing it through webmethod.
If I create var data1 as
var data1 = [
['2015-04-30 10:27:58', 1690.25], ...
];
It won't work. So I am guessing I would need to convert '2015-04-30 10:27:58'milisecond ticks when creating var data1.
But I do not want to display time in a proper time format such as 10:27:58 instead of 1430369878000 on xaxis. (I want exclude date part).
How can I achieve this?
//RED
var data1 = [
[1430369878000, 1690.25], [1430369879000, 1696.3], [1430369880000, 1659.65]
];
//BLUE
var data2 = [
[1430369878000, 1682.1], [1430369879000, 1680.65], [1430369880000, 1685.1]
];
var dataset = [
{
label: "Sell out",
data: data1,
color: "#FF0000",
points: { fillColor: "#FF0000", show: true },
lines: { show: true }
},
{
label: "Buy in",
data: data2,
color: "#0062E3",
points: { fillColor: "#0062E3", show: true },
lines: { show: true }
}
];
var options = {
series: {
shadowSize: 5
},
xaxes: { mode: "time",
min: parseInt((new Date("2015-04-30 10:27:58")).getTime()),
max: parseInt((new Date("2015-04-30 10:43:39")).getTime()),
timeformat: "%H/%M/%S"
},
yaxis: {
color: "black",
tickDecimals: 2,
axisLabel: "Gold Price in USD/oz",
axisLabelUseCanvas: true,
axisLabelFontSizePixels: 12,
axisLabelFontFamily: 'Verdana, Arial',
axisLabelPadding: 6
},
legend: {
noColumns: 0,
labelFormatter: function (label, series) {
return "<font color=\"white\">" + label + "</font>";
},
backgroundColor: "#000",
backgroundOpacity: 0.9,
labelBoxBorderColor: "#000000",
position: "nw"
},
grid: {
hoverable: true,
borderWidth: 3,
mouseActiveRadius: 50,
backgroundColor: { colors: ["#ffffff", "#EDF5FF"] },
axisMargin: 20
}
};
$(document).ready(function () {
setInterval(function () {
$.plot($("#flot-placeholder"), dataset, options);
$("#flot-placeholder").UseTooltip();
}, 1000)
});
var previousPoint = null, previousLabel = null;
$.fn.UseTooltip = function () {
$(this).bind("plothover", function (event, pos, item) {
if (item) {
if ((previousLabel != item.series.label) || (previousPoint != item.dataIndex)) {
previousPoint = item.dataIndex;
previousLabel = item.series.label;
$("#tooltip").remove();
var x = item.datapoint[0];
var y = item.datapoint[1];
var date = new Date(x);
var color = item.series.color;
showTooltip(item.pageX, item.pageY, color,
"<strong>" + item.series.label + "</strong><br>" +
x +
" : <strong>" + y + "</strong> (USD/oz)");
}
} else {
$("#tooltip").remove();
previousPoint = null;
}
});
};
function showTooltip(x, y, color, contents) {
$('<div id="tooltip">' + contents + '</div>').css({
position: 'absolute',
display: 'none',
top: y,
left: x,
border: '2px solid ' + color,
padding: '3px',
'font-size': '9px',
'border-radius': '5px',
'background-color': '#fff',
'font-family': 'Verdana, Arial, Helvetica, Tahoma, sans-serif',
opacity: 0.9
}).appendTo("body").fadeIn(200);
}

The options for the x-axis are under the name xaxes not xaxis therefore they are not used. (Also your min and max values are outside of the data range.)
// not xaxes:
xaxis: {
mode: "time",
//min: parseInt((new Date("2015-04-30 10:27:58")).getTime()),
//max: parseInt((new Date("2015-04-30 10:43:39")).getTime()),
timeformat: "%H/%M/%S"
},
See this fiddle for a working example.
PS: You use the $.plot() function with setInterval which is okay but you should only call UseTooltip() once.

Highcharts: Data not working correctly from JSON object

I am setting up a bubble chart with the following JSON object: (named donorArray in the code)
{1:{id:1, x:10, y:"88.88", z:"88.88", url:"http://ati.publishwhatyoufund.org/donor/usmcc/"}, 2:{id:2, x:10, y:"87.26", z:"87.26", url:"http://ati.publishwhatyoufund.org/donor/gavi/"}, 3:{id:3, x:10, y:"83.49", z:"83.49", url:"http://ati.publishwhatyoufund.org/donor/ukdfid/"}, 4:{id:4, x:10, y:"83.38", z:"83.38", url:"http://ati.publishwhatyoufund.org/donor/undp/"}, 5:{id:5, x:10, y:"73.81", z:"73.81", url:"http://ati.publishwhatyoufund.org/donor/world-bank-ida/"}, 6:{id:6, x:10, y:"70.65", z:"70.65", url:"http://ati.publishwhatyoufund.org/donor/global-fund/"}, 7:{id:7, x:10, y:"63.70", z:"63.70", url:"http://ati.publishwhatyoufund.org/donor/afdb/"}, 8:{id:8, x:10, y:"62.58", z:"62.58", url:"http://ati.publishwhatyoufund.org/donor/canada/"}, 9:{id:9, x:10, y:"60.38", z:"60.38", url:"http://ati.publishwhatyoufund.org/donor/sweden/"}, 10:{id:10, x:10, y:"57.64", z:"57.64", url:"http://ati.publishwhatyoufund.org/donor/asdb/"}, 11:{id:11, x:10, y:"57.11", z:"57.11", url:"http://ati.publishwhatyoufund.org/donor/iadb/"}, 12:{id:12, x:10, y:"54.24", z:"54.24", url:"http://ati.publishwhatyoufund.org/donor/ececho/"}, 13:{id:13, x:10, y:"52.11", z:"52.11", url:"http://ati.publishwhatyoufund.org/donor/ecdevco/"}, 14:{id:14, x:10, y:"51.14", z:"51.14", url:"http://ati.publishwhatyoufund.org/donor/ecfpi/"}, 15:{id:15, x:10, y:"50.70", z:"50.70", url:"http://ati.publishwhatyoufund.org/donor/denmark/"}, 16:{id:16, x:10, y:"49.37", z:"49.37", url:"http://ati.publishwhatyoufund.org/donor/netherlands/"}}
Here is my actual code:
jQuery(document).ready(function($){
scores = [];
for(i in donorArray){
score = parseFloat(donorArray[i].score);
score = Math.round(score * 100) / 100;
}
var $report= $('#report');
$report.html('Donor Scoring');
chart = new Highcharts.Chart({
chart: {
type: 'bubble',
renderTo: 'graph',
backgroundColor: 'transparent',
events: {
load: function() {
this.renderer.image('http://ati.publishwhatyoufund.org/wp-content/themes/ati/img/new_bg.png', 230, 20, 720, 720).add(); // add image(url, x, y, w, h)
}
}
},
plotOptions: {
bubble: {
color: 'white',
marker: {
fillColor: 'transparent'
}
},
point: {
allowPointSelect: false,
events: {
mouseOver: function(event) {
this.css("border", "1px solid black");
},
mouseOut: function(event) {
},
click: function(event) {
if(!this.selected) {window.open(this.options.url,'_self' );}
},
}
}
},
title: {
text: ''
},
credits: {
enabled: false
},
tooltip: {
enabled: false
},
yAxis: {
gridLineColor: 'transparent',
lineColor: 'transparent',
labels: {
enabled: false
}
},
xAxis: {
gridLineColor: 'transparent',
lineColor: 'transparent',
labels: {
enabled: false
},
offset: 0,
margin: 0
},
legend: {
enabled: false
},
series: {
data: donorArray
}
});
});
It renders the background and the graph container etc, but no datapoints(bubbles) appear.
Can you spot any obvious errors?
Thanks
Jacques

First of all, that part of code is properly wrong:
scores = [];
for(i in donorArray){
score = parseFloat(donorArray[i].score);
score = Math.round(score * 100) / 100;
}
I don't see any score in your donorArray objects, also, it will overwrite score, to become number/string, not adding to the array. Should be rather:
scores = [];
var temp;
for(i in donorArray){
temp = parseFloat(donorArray[i].score);
scores.push(Math.round(temp * 100) / 100);
}
Now, as #Abdul Jabbar said, your data format is just wrong. Doesn't suit Highcharts formats. Working example: http://jsfiddle.net/2ra0gnd0/2/ and code:
scores = [];
var temp;
var point;
var dataForChart = [];
for(i in donorArray){
point = donorArray[i];
temp = parseFloat(donorArray[i].score);
scores.push(Math.round(temp * 100) / 100);
dataForChart.push({
x: point.x,
id: point.id,
y: parseFloat(point.y),
z: parseFloat(point.z),
url: point.url
});
}
And last thing, to be fixed, is series:
series: {
data: donorArray
}
Should be of course an array of objects, not an object, so should be:
series: [{
data: dataForChart
}]