I'm using HighChart to display the memory usage of some containers. The problem is that sometimes the scale is in K sometimes in M and sometimes with nothing (like the picture bellow):
And this is how I create my HighChart:
var cursor = Template.currentData();
liveChart = Highcharts.chart(cursor.chart_id, {
title: {
text: 'Memory usage of the controlcontainers_mongo_1'
},
xAxis: {
type: 'datetime',
},
yAxis: {
title: {
text: 'usage'
}
},
tooltip: {
formatter: function() {
return '<b>' + this.series.name + '</b><br/>' + Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x) + '<br/>';
}
},
series: [{
type: 'line',
name: 'memory usage',
data: []
}]
});
[EDIT] Maybe it could be helpful to see the entire graph so there is it:
This is my formatter if someone need it:
formatter: function() {
var usage = this.value;
if((usage >= 1000000)&&(usage < 1000000000)){
return (usage/1000000).toFixed(2) + "MB";
}else if (usage >= 1000000000) {
return (usage/1000000000).toFixed(2) + "GB";
}else{
return usage + "KB";
}
}
You can round up the values in y-axis formatting function
var cursor = Template.currentData();
liveChart = Highcharts.chart(cursor.chart_id, {
title: {
text: 'Memory usage of the controlcontainers_mongo_1'
},
xAxis: {
type: 'datetime',
},
yAxis: {
title: {
text: 'usage'
},
labels: {
formatter: function() {
//This will round the value, but you can do anything to this value now
return this.value.toFixed(2);
}
},
},
tooltip: {
formatter: function() {
return '<b>' + this.series.name + '</b><br/>' + Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x) + '<br/>';
}
},
series: [{
type: 'line',
name: 'memory usage',
data: []
}]
});
Read more here
Related
I'm trying to manipulate a chart with input boxes. Each input box should correspond to a bar. In my code, I can get the first function at the bottom of the highcharts to work, but identical code with the bar changed and the input id doesnt work. Function in question is the last function with season-2 as id.
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
animation: false
},
xAxis: {
categories: ['2016-17', '2017-18', '2018-19', '2019-20', '2020-21', '2021-22'],
title: {
text: 'Season'
}
},
yAxis: [{
title: {
text: '$ Dollars'
}
}],
plotOptions: {
series: {
borderColor: '#2c3e50',
point: {
events: {
drag: function(e) {
$('#drag').html(
'Dragging <b>' + this.series.name + '</b>, <b>' + this.category + '</b> to <b>' + Highcharts.numberFormat(e.y, 2) + '</b>');
if (this.category == "2016-17"){
$('#season-1').val(Highcharts.numberFormat(e.y, 2));
}
if (this.category == "2017-18"){
$('#season-2').val(Highcharts.numberFormat(e.y, 2));
}
if (this.category == "2018-19")
{
$('#season-3').val(Highcharts.numberFormat(e.y, 2));
}
if (this.category == "2019-20"){
$('#season-4').val(Highcharts.numberFormat(e.y, 2));
} if (this.category == "2020-21"){
$('#season-5').val(Highcharts.numberFormat(e.y, 2));
}
},
drop: function() {
$('#drop').html(
'In <b>' + this.series.name + '</b>, <b>' + this.category + '</b> was set to <b>' + Highcharts.numberFormat(this.y, 2) + '</b>');
}
}
},
stickyTracking: false
},
column: {
stacking: 'normal'
},
line: {
cursor: 'ns-resize'
}
},
tooltip: {
yDecimals: 2
},
series: [{
name: 'Salary Cap',
data: [94000000, 102000000, 108000000, 109000000, 114000000]
}, {
name: 'Tax Cap',
data: [113000000, 122000000, 130000000, 132000000, 139000000]
}, {
name: 'New Contract',
data: [10996155, 10996155, 10996155, 10996155, 10996155],
draggableY: true,
// drag: function() { console.log(arguments); },
dragMinY: 0,
type: 'column',
minPointLength: 2,
color: 'whitesmoke'
}, {
name: 'Current Payroll',
data: [110492645, 103423474, 97903566, 62944822, 28751775],
//draggableX: true,
draggableY: false,
dragMinY: 0,
type: 'column',
minPointLength: 2,
color: '#2c3e50'
}]
}, function(chart) {
$('#season-1').change(function() {
var val = parseInt(this.value) || 0;
chart.series[3].data[0].update({
y: val
});
})
},
function(chart) {
$('#season-2').change(function() {
var val = parseInt(this.value) || 0;
chart.series[3].data[1].update({
y: val
});
})
});
http://jsfiddle.net/twq6gb7d/
What I did is I isolated the change functions from inside the highcharts initialization function, and let JQuery handle it by selecting the container of the chart and calling the highchart function.
Snippet of the code:
.... //rest of the code
dragMinY: 0,
type: 'column',
minPointLength: 2,
color: '#2c3e50'
}]
}); //end of the highchart initialization
$('#season-1').change(function() {
var val = parseInt(this.value) || 0;
$('#container').highcharts().series[3].data[0].update({
y: val
});
});
... // other change functions
Working JSFiddle here.
How to change the default animation from right to left for series in high charts as animation:false will remove animation and by default whenever chart loads its from left to right but i want it from right to left..
I am adding the link in addition to that which captures live data and then it is displayed in high charts.
http://jsfiddle.net/gh/get/jquery/1.9.1/highslide-software/highcharts.com/tree/master/samples/highcharts/demo/dynamic-update/
`$(function () {
$(document).ready(function () {
Highcharts.setOptions({
global: {
useUTC: false
}
});
$('#container').highcharts({
chart: {
type: 'spline',
animation: Highcharts.svg, // don't animate in old IE
marginRight: 10,
events: {
load: function () {
// set up the updating of the chart each second
var series = this.series[0];
setInterval(function () {
var x = (new Date()).getTime(), // current time
y = Math.random();
series.addPoint([x, 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);
}
},
legend: {
enabled: false
},
exporting: {
enabled: false
},
series: [{
name: 'Random data',
data: (function () {
// generate an array of random data
var data = [],
time = (new Date()).getTime(),
i;
for (i = -19; i <= 0; i += 1) {
data.push({
x: time + i * 1000,
y: Math.random()
});
}
return data;
}())
}]
});
});
});`
I'm using Highstockchart to plot 4 series on a chart, the main one is a candlestick, then I've 2 series to plot priceplus, pricelower prices then another one to represent volumes.
I've got a problem since the pricelower/priceplus's tooltip shows the time as unix datetime and not in human redeable form (as you can see in this screenshot)
I want this not to be modified
How can I do this?
Thanks
Here's my JS code
function onSuccess(data) {
var r = JSON.stringify(data);
debugger;
kendo.ui.progress($('#container'), false);
$('#container')
.highcharts('StockChart',
{
exporting: {
enabled: false
},
credits:
{
enabled: false
},
rangeSelector: {
selected: 1,
inputEnabled:false,
buttonTheme: {
visibility: 'hidden'
},
labelStyle: {
visibility: 'hidden'
}
},
yAxis: [
{
height: '80%',
lineWidth: 2
}, {
top: '85%',
height: '15%',
offset: 0,
lineWidth: 2
}
],
xAxis:
{
ordinal: true
}
,
series: [
{
type: 'candlestick',
name: 'Price',
data: data.Prices,
id: 'dataseries',
upColor: "#31D431",
color: "#D22F2F",
marker:{
enabled: true
}
},
{
type: 'scatter',
name: 'Prices plus',
data: data.PricesPlus
},
{
type: 'scatter',
name: 'Price less',
data: data.PricesLess
}
, {
type: 'column',
name: 'Volume',
data: data.Volume,
yAxis: 1,
dataGrouping: {
units: groupingUnits
}
}
],
width: 4,
tooltip: {
shared: false
}
});
}
You should use the tooltip.formatter and then create a content of popup. Each values can be extracted from point reference.
tooltip:{
formatter: function() {
var points = this.point ? Highcharts.splat(this.point) : this.points,
point = points[0],
each = Highcharts.each,
txt = '';
txt += '<span style="font-size: 10px">' + Highcharts.dateFormat('%A, %b, %H:%M', point.x) + '</span><br/>';
each(points, function(p, i) {
if(p.point && p.point.open) {
txt += '<span style="color:' + p.color + '">\u25CF</span><b> ' + p.series.name + '</b>:<br/>Open: ' + p.point.open + '<br/>High: ' + p.point.high + '<br/>Low: ' + p.point.low + '<br/>Close: ' + p.point.close + '<br/>';
} else {
txt += '<span style="color:' + p.color + '">\u25CF</span> ' + p.series.name + ': <b>' + p.y + '</b><br/>';
}
});
return txt;
}
},
Example:
- http://jsfiddle.net/abpbyx8z/
I am using highcharts to display a graph.
I am having trouble displaying the time in the tooltip.
If i send time in data object of seriesdata object it displays correctly but not the other way around.
var renderchart = function (seriesData) {
chart = new Highcharts.Chart({
chart: {
renderTo: 'barGrpahcontainer',
type: 'bar',
backgroundColor: '#d3d3d3',
animation: false
},
title: {
text: ''
},
xAxis: {
opposite: false,
categories: null,
title: {
text: ''
},
labels: {
enabled:false
}
},
yAxis: {
min: 0,
gridLineWidth: 0,
minorGridLineWidth: 0,
title: {
text: ''
},
opposite: true
},
legend: {
enabled: false
},
tooltip: {
formatter: function () {
return '<b>' + this.series.name + '</b><br/>' + this.y + '<br/>' + 'Time: ' + this.time;
}
},
plotOptions: {
series: {
stacking: 'normal',
pointWidth: 20
}
},
series: seriesData
});
}
var dataArray = [{"status":"Program Running","y":0.08,"color":"#01BC01","time":"00:13:47"},{"status":"Program Stopped","y":0.02,"color":"#FEC201","time":"00:03:41"},{"status":"Program Running","y":0.04,"color":"#01BC01","time":"00:07:36"},{"status":"Program Stopped","y":0.0,"color":"#FEC201","time":"00:00:28"},{"status":"Program Running","y":0.0,"color":"#01BC01","time":"00:00:14"},{"status":"Program Stopped","y":0.04,"color":"#FEC201","time":"00:07:45"},{"status":"Program Running","y":0.21,"color":"#01BC01","time":"00:37:43"},{"status":"Program Stopped","y":0.0,"color":"#FEC201","time":"00:00:47"},{"status":"Program Running","y":0.13,"color":"#01BC01","time":"00:24:00"},{"status":"Program Stopped","y":0.01,"color":"#FEC201","time":"00:01:55"},{"status":"Program Running","y":0.04,"color":"#01BC01","time":"00:07:36"},{"status":"Program Stopped","y":0.0,"color":"#FEC201","time":"00:00:19"},{"status":"Program Running","y":0.0,"color":"#01BC01","time":"00:00:16"},{"status":"Program Stopped","y":0.05,"color":"#FEC201","time":"00:08:52"},{"status":"Program Running","y":0.21,"color":"#01BC01","time":"00:37:46"},{"status":"Program Stopped","y":0.02,"color":"#FEC201","time":"00:02:53"},{"status":"Program Running","y":0.13,"color":"#01BC01","time":"00:24:03"},{"status":"Program Stopped","y":0.02,"color":"#FEC201","time":"00:03:24"},{"status":"Program Running","y":0.04,"color":"#01BC01","time":"00:07:50"},{"status":"Program Stopped","y":0.0,"color":"#FEC201","time":"00:00:11"},{"status":"Program Running","y":0.0,"color":"#01BC01","time":"00:00:09"},{"status":"Program Stopped","y":0.0,"color":"#FEC201","time":"00:00:21"},{"status":"Program Running","y":0.0,"color":"#01BC01","time":"00:00:20"},{"status":"Program Stopped","y":1.67,"color":"#FEC201","time":"05:00:27"},{"status":"NO DATA","y":5.26,"color":"#444849","time":"15:47:37"}]
$(function () {
var data = dataArray;
var seriesData = [];
var total = 0;
var i, cat;
var count = 0;
for (i = 0; i < data.length; i++) {
seriesData.push({
name: data[i].status,
data: [data[i].y],
color: data[i].color,
time: data[i].time
});
}
var chart;
$(document).ready(function () {
renderchart(seriesData)
});
});
The reason of that is parameter, which is kept in this.series.options.time instead of this.time.
Fixed formatter:
tooltip: {
formatter: function() {
return '<b>' + this.series.name + '</b><br/>' +
this.y + '<br/>' +
'Time: ' + this.series.options.time;
}
},
Demo:
http://jsfiddle.net/vwdzxawv/
I have a question related to HighCharts. Below is my code for implementing a highchart with integer values on yaxis and date on x-axis. I am getting my data from database both date and values.
The x-axis date and time isn't displayed correctly. In my database it looks like that ,2015-04-27 15:26:41.463 .
var a = [];
$('#container').highcharts({
chart: {
type: 'spline',
animation: Highcharts.svg, // don't animate in old IE
marginRight: 10,
events: {
load: function () {
// set up the updating of the chart each second
var series = this.series[0];
xAxis[0].setCategories(x);
}
}
},
title: {
text: 'Live random data'
},
xAxis: {
categories: a
},
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, 1);
}
},
legend: {
enabled: false
},
exporting: {
enabled: false
},
series: [{
data: series
}]
});
UPDATE
This is what I have reached now
.success(function (point) {
for (i = 0; i < point.length; i++) {
myDate[i] = point[i].date_time;
value[i] = point[i].value_db;
}
for (j = 0; j < myDate.length; j++) {
var temp = new Array(myDate[j], value[j]);
mySeries[j] = temp;
}
DrawChart(mySeries, myDate, value);
})
function DrawChart(series, x, y) {
//Fill chart
$('#container').highcharts({
chart: {
type: 'spline',
animation: Highcharts.svg, // don't animate in old IE
marginRight: 10,
events: {
load: function () {
// set up the updating of the chart each second
var series = this.series[0];
}
}
},
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);
}
},
legend: {
enabled: false
},
exporting: {
enabled: false
},
series: [{
name: 'Random data',
data: series
}]
});
}
UPDATE2
Help Please.
You'll have to change myDate[i] = point[i].date_time; to:
myDate[i] = parseInt((point[i].date_time).substring(6, 19));
So that it will contain the UTC date format of the datetime.
Then you will have to use xAxis.labels.formatter like this:
xAxis: {
labels: {
formatter: function() {
var date = new Date(this.value);
return date.getFullYear() + "-" +
date.getMonth() + "-" +
date.getDate() + " " +
date.getHours() + ":" +
date.getMinutes() + ":" +
date.getSeconds();
}
}
}
to tell the chart how to show it's xAxis labels.
And for showing more labels in yAxis, you can use:
yAxis: {
tickInterval: 100 // if you want the labels to show every 100 values
}