Highchart: how to update a dynamic chart by clicking on a button? - javascript
I intend to have a button on my web page so that upon clicking a button, a point will be added to a chart without redrawing the whole chart (the chart is a modified version of this http://www.highcharts.com/demo/dynamic-update). However, my current code is not working.
Here is the code in concern: http://jsfiddle.net/wtvaz9gc/7/
var series;
$(function drawCharts(numberOfPoint) {
// if(typeof chartData == undefined){
// chartData = $(dataStore.getXml());
// }
$("#b").click(function(){
series.addPoint([3,3]);
})
$(document).ready(function () {
Highcharts.setOptions({
global: {
useUTC: false
}
});
$('#container').highcharts({
chart: {
type: 'line',
animation: Highcharts.svg, // don't animate in old IE
marginRight: 10,
events: {
load: function () {
series = this.series[0];
// window.myGlobal1 = this.series[0].data[this.series[0].data.length - 1].y;
// console.log(window.myGlobal1 + " " + this.series[0].data[this.series[0].data.length - 1].y);
},
}
},
title: {
text: ''
},
xAxis: {
title: {
text: 'Jahre'
},
// gridLineWidth: 0,
// lineWidth:1,
startOnTick: true,
tickPixelInterval: 40,
min: 0,
max: 10,
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
yAxis: {
title: {
text: 'Vermögen(in EUR)'
},
labels: {
enabled: true
},
min: 0,
max: 100,
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
tooltip: {
enabled : false,
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, preValue;
for (i = 0; i < numberOfPoint; i += 1) {
if(i == 0){
data.push({
x: i,
y: 10
});
} else {
data.push({
x: i,
y: chartData["wealth"][0][i]
});
}
}
// showMsg(data);
// console.log(data);
return data;
}()))
}]
});
});
});
When I tries to run it in chrome, I got the following error report:
highcharts.js:Uncaught TypeError: i.splice is not a function
addPoint # highcharts.js:...
How should I use the function "addPoint" in this case?
Or should I use other method to achieve the purpose?
There is something wrong with the function generating your initial data, but addPoint is working fine:
var series;
$(function drawCharts(numberOfPoint) {
// if(typeof chartData == undefined){
// chartData = $(dataStore.getXml());
// }
$("#b").click(function(){
series.addPoint([10,10]);
})
$(document).ready(function () {
Highcharts.setOptions({
global: {
useUTC: false
}
});
$('#container').highcharts({
chart: {
type: 'line',
animation: Highcharts.svg, // don't animate in old IE
marginRight: 10,
events: {
load: function () {
series = this.series[0];
// window.myGlobal1 = this.series[0].data[this.series[0].data.length - 1].y;
// console.log(window.myGlobal1 + " " + this.series[0].data[this.series[0].data.length - 1].y);
},
}
},
title: {
text: ''
},
xAxis: {
title: {
text: 'Jahre'
},
// gridLineWidth: 0,
// lineWidth:1,
startOnTick: true,
tickPixelInterval: 40,
min: 0,
max: 10,
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
yAxis: {
title: {
text: 'Vermögen(in EUR)'
},
labels: {
enabled: true
},
min: 0,
max: 100,
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
tooltip: {
enabled : false,
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: [1,2,3]
}]
});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
<button id="b" href="#" >AddPoints</button>
I am not sure what you are trying to do in your series.data function but removing all that code and defining your chart in your click event so it knows what series is does add the point [3,3].
Series declaration now:
series: [{
name: 'Random data',
data: []
}]
And the click function (no moved after the chart code):
$("#b").click(function() {
var chart = $('#container').highcharts();
chart.series[0].addPoint([3, 3]);
})
Live demo.
Related
Highchart add a text under single bar in bar chart
I want to add a percentage value under the single bar. Here is the Fiddle which displays the percentage under all bars. Below is the code as well. I want to compare the last two values and then add their percentage under the last bar
Code
var colors = ['#a3cb38','#ea2027','#0652dd','#ffc312'];
var dataSum = data.reduce((a,x)=>a+x.y,0);
Highcharts.chart('highchart', {
chart: {
type: 'bar',
backgroundColor: null,
height: 270,
events: {
load: function() {
this.addSeries({
data: [{x: 0, y: 1},{x: 1, y: 1},{x: 2, y: 1},{x: 3, y: 1}],
enableMouseTracking: false,
dataLabels: {
useHTML: true,
formatter:function() {
var pcnt = (data[this.x].y / dataSum) * 100;
return '<span class="" style="color:' + this.point.color + '">' + Highcharts.numberFormat(pcnt) + '%' + '</span> <span class="">' + data[this.x].name + ' this i want put under the bar' + '</span>';
}}
}, true);
}
}
},
title: {
text: ''
},
xAxis: {
type: 'category',
labels: {
style: {
width: '75px',
'min-width': '75px',
height: '42px',
'min-height': '42px',
align: 'high'
},
useHTML : true,
formatter: function () {
return '<div class="myToolTip" title="Hello">'+this.value+'</div>';
},
}
},
colors: colors,
yAxis: {
min: 0,
gridLineWidth: 0,
title: {
text: ''
},
gridLineWidth: 0,
labels:
{
enabled: false
}
},
credits: {
enabled: false
},
legend: {
enabled: false
},
plotOptions: {
series: {
borderWidth: 0,
pointPadding: 0.25,
groupPadding: 0,
dataLabels: {
enabled: true,
crop: false,
overflow: 'none'
},
colorByPoint: true
}
},
tooltip: {
headerFormat: '<span style="font-size:11px"> lorem</span><br>',
pointFormat: '<span style="color:{point.color}">{point.name}</span>: <b>{point.y:.f} lala</b><br/>'
},
series: [{
data: data
}
]
});
Output
Expected Output
How can I add a percentage under only a single bar?
Any help would be highly appreciated
You can use data labels configuration for a single point.
events: {
load: function() {
this.addSeries(..., {
x: 3,
y: 1,
dataLabels: {
useHTML: true,
formatter: function() {
var pcnt = (data[this.x].y / dataSum) * 100;
return '...';
}
}
}]
}, true);
}
}
Live demo: https://jsfiddle.net/BlackLabel/9dmtawg3/
API Reference: https://api.highcharts.com/highcharts/series.column.data.dataLabels
Stuck on the final bits of a multi series line chart
I built a multi series Highcharts https://www.highcharts.com/ line chart with irregular time data. It's almost there, but I'm doing something wrong with the data and/or data formatting. Anyone have a hint or two to throw my way?
The date from the database was converted from '02/03/2009' to javascript time in php using
$date = strtotime($data['As of Date'])*1000;
The other value is a dollar amount.
I haven't yet added the filtered data for 3MO, 6MO, 1YR, 5YR, 10YR
Here is the jsfiddle https://jsfiddle.net/madmichael/th41g4yt/
$( document ).ready(function() {
createChart();
});
function createChart(chartingOptions) {
var options = {
chart: {
renderTo: 'container',
type: 'line',
zoomType: 'xy',
events: {
load: function(event) {
var total = 0; // get total of data
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: $' + Highcharts.numberFormat(total, 0, '.', ','),
this.plotLeft,
this.plotTop + 20
).attr({
zIndex: 5
}).add() // write it to the upper left hand corner
}
}
},
navigator: {
enabled: false
},
scrollbar: {
enabled: false
},
rangeSelector: {
inputEnabled: false,
allButtonsEnabled: true,
/* buttons: [[]], */
buttons: [
{
type: 'all',
text: 'All'
}, {
type: 'month',
count: 3,
text: '3MO'
}, {
type: 'month',
count: 6,
text: '6MO'
}, {
type: 'year',
text: '1YR',
count: 1
}, {
type: 'year',
text: '5YR',
count: 5
}, {
type: 'year',
text: '10YR',
count: 10
}],
buttonTheme: {
width: 60
},
selected: 0
},
tooltip: {
backgroundColor: null,
borderWidth: 0,
shadow: false,
useHTML: true,
style: {
padding: 0
},
pointFormat: '$' + '{point.y:,.0f}'
/* formatter: function() {
return Highcharts.dateFormat('%b %d, %Y', point.x) + ': $
{point.y:,.1f}';
} */
},
xAxis: {
type: 'datetime',
labels: {
formatter: function() {
return Highcharts.dateFormat('%b-%Y', this.value);
}
}
},
yAxis: {
type: 'linear',
labels: {
formatter: function () {
if(this.value >= 0 ){
return '$' + this.value / 1000+'k';
}else{
return '-$' + this.value / 1000*-1+'k';
}
}
}
},
series: [{name: 'Investment Fund (A)',fundtype: 'Load',data: [[1483164000000,37149],[1451541600000,37247],[1420005600000,37071],[1388469600000,33407],[1356933600000,19881],[1325311200000,14132],[1293775200000,21541],[1262239200000,18343],[1480485600000,36659],[1448863200000,39677],[1417327200000,38070],[1385791200000,32212],[1354255200000,18197],[1322632800000,14132],[1291096800000,20173],[1259560800000,17399],[1477890000000,34171],[1446267600000,39069],[1414731600000,36522],[1383195600000,30429],[1351659600000,18468],[1320037200000,14848],[1288501200000,20250],[1256965200000,15703],[1475211600000,36503],[1443589200000,36071],[1412053200000,34602],[1380517200000,29214],[1348981200000,17752],[1317358800000,13048],[1285822800000,19287],[1254286800000,17861],[1472619600000,35249],[1440997200000,38775],[1409461200000,36542],[1377925200000,27548],[1346389200000,16784],[1314766800000,15642],[1283230800000,16994],[1251694800000,16821],[1469941200000,32741],[1438318800000,42537],[1406782800000,34230],[1375246800000,28273],[1343710800000,16203],[1312088400000,17674],[1280552400000,18478],[1249016400000,14335],[1467262800000,29782],[1435640400000,40245],[1404104400000,36150],[1372568400000,26157],[1341032400000,16861],[1309410000000,19707],[1277874000000,17013],[1246338000000,13083],[1496206800000,41636],[1464670800000,33015],[1433048400000,40656],[1401512400000,34720],[1369976400000,26850],[1338440400000,16010],[1306818000000,20963],[1275282000000,19441],[1243746000000,12563],[1493528400000,40010],[1461992400000,32603],[1430370000000,39814],[1398834000000,33779],[1367298000000,25205],[1335762000000,17229],[1304139600000,21233],[1272603600000,21426],[1241067600000,10732],[1490936400000,39794],[1459400400000,33054],[1427778000000,39304],[1396242000000,34798],[1364706000000,24063],[1333170000000,17771],[1301547600000,21021],[1270011600000,20983],[1238475600000,8940],[1456725600000,30977],[1330495200000,17307],[1488261600000,40696],[1425103200000,39285],[1393567200000,34955],[1362031200000,22011],[1298872800000,21233],[1267336800000,19268],[1235800800000,7534],[1233640800000,9422],[1485842400000,37149],[1454220000000,30233],[1422684000000,35856],[1391148000000,33603],[1359612000000,22108],[1327989600000,15990],[1296453600000,21021],[1264917600000,18459]]},{name: 'Investment Fund (A)',fundtype: 'No Load',data: [[1483164000000,39428],[1451541600000,39532],[1420005600000,39345],[1388469600000,35456],[1356933600000,21101],[1325311200000,14999],[1293775200000,22863],[1262239200000,19468],[1480485600000,38908],[1448863200000,42111],[1417327200000,40406],[1385791200000,34188],[1354255200000,19314],[1322632800000,14999],[1291096800000,21411],[1259560800000,18466],[1477890000000,36267],[1446267600000,41466],[1414731600000,38763],[1383195600000,32295],[1351659600000,19601],[1320037200000,15759],[1288501200000,21493],[1256965200000,16667],[1475211600000,38742],[1443589200000,38284],[1412053200000,36725],[1380517200000,31006],[1348981200000,18841],[1317358800000,13848],[1285822800000,20470],[1254286800000,18957],[1472619600000,37411],[1440997200000,41154],[1409461200000,38784],[1377925200000,29238],[1346389200000,17814],[1314766800000,16601],[1283230800000,18037],[1251694800000,17853],[1469941200000,34749],[1438318800000,45147],[1406782800000,36330],[1375246800000,30008],[1343710800000,17197],[1312088400000,18759],[1280552400000,19611],[1249016400000,15215],[1467262800000,31609],[1435640400000,42714],[1404104400000,38368],[1372568400000,27762],[1341032400000,17896],[1309410000000,20916],[1277874000000,18057],[1246338000000,13885],[1496206800000,44190],[1464670800000,35040],[1433048400000,43151],[1401512400000,36850],[1369976400000,28498],[1338440400000,16992],[1306818000000,22249],[1275282000000,20634],[1243746000000,13333],[1493528400000,42464],[1461992400000,34604],[1430370000000,42256],[1398834000000,35851],[1367298000000,26751],[1335762000000,18286],[1304139600000,22536],[1272603600000,22740],[1241067600000,11391],[1490936400000,42236],[1459400400000,35082],[1427778000000,41716],[1396242000000,36933],[1364706000000,25539],[1333170000000,18862],[1301547600000,22311],[1270011600000,22270],[1238475600000,9489],[1456725600000,32878],[1330495200000,18368],[1488261600000,43192],[1425103200000,41695],[1393567200000,37099],[1362031200000,23361],[1298872800000,22536],[1267336800000,20450],[1235800800000,7996],[1233640800000,10000],[1485842400000,39428],[1454220000000,32087],[1422684000000,38056],[1391148000000,35664],[1359612000000,23464],
[1327989600000,16971],[1296453600000,22311],[1264917600000,19591]]},],
plotOptions: {
series: {
events: {
show: function () {
var chart = this.chart,
series = chart.series,
i = series.length,
otherSeries;
while (i--) {
otherSeries = series[i];
if (otherSeries != this && otherSeries.visible)
{
otherSeries.hide();
}
}
},
legendItemClick: function() {
if(this.visible){
return false;
}
}
}
},
line: {
marker: {
enabled: false
},
/* color: '".$attributes["line_color"]."',
*/ }
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
x: -150,
y: 100,
floating: true,
borderWidth: 1,
backgroundColor: (Highcharts.theme &&
Highcharts.theme.legendBackgroundColor) || '#FFFFFF'
},
credits: {
enabled: false
},
};
/* options.series[5] = {
name: '5 Yrs',
data: processed_five_years,
visible: false
};
*/
var chart = new Highcharts.stockChart(options);
Highcharts.setOptions({
lang: {
decimalPoint: '.',
thousandsSep: ','
}
});
};
I want to show series data array in highcharts
I have a highchart and currently it shows only one value. I want to show an array of data. This is my current a javascript method and it's only showing one data.
$(function () {
//alert("myValues"+myValues);
//console.log("deviceName"+deviceName);
$('#container').highcharts({
chart: {
type: 'line'
},
title: {
text: 'Daily Power Consumption'
},
subtitle: {
text: 'Device : '+deviceName
},
xAxis: {
type: 'datetime',
tickInterval: 3600 * 2000, // two hour
tickWidth: 0,
gridLineWidth: 1,
labels: {
align: 'center',
x: -3,
y: 20,
formatter: function() {
return Highcharts.dateFormat('%l%p', this.value);
}
}
},
yAxis: {
min: 0,
title: {
text: 'power ( W )'
}
},
tooltip: {
formatter: function() {
// return Highcharts.dateFormat('%l%p', this.x-(1000*3600)) +'-'+ Highcharts.dateFormat('%l%p', this.x) +': <b>'+ this.y + '</b>'+this.series.name;
return Highcharts.dateFormat('%l%p', this.x-(1000*3600)) +'-'+ Highcharts.dateFormat('%l%p', this.x) +':'+ this.y + '';
}
},
plotOptions: {
column: {
pointPadding: 0.2,
borderWidth: 0
}
},
series: [{
name: 'Time Period',
// name: deviceName,
data: [myValues]
}]
});
});
But then I need to loop through the arrays somehow, pushing everything into the series data and I don't know how to do that.
If I use a for loop with this data, how do I insert into the highcharts series data?
Highcharts: dateTime in milliseconds is not recognized
I have a highcharts graph consisting of 3 different plot lines. Y axis is a number format, X axis is a dateTime. The plots are being displayed properly but the labels on X show '00:00:00' and the tooltip shows the 1-st of January 1970.
Here's my code for initialising the chart:
Co2Chart = new Highcharts.Chart({
chart: {
renderTo: 'co2-graph',
type: 'spline',
animation: Highcharts.svg,
marginRight: 10,
events: {
load: function () {
updateData();
setInterval(updateData, 5000);
}
}
},
title: {
text: ''
},
xAxis: {
type: 'datetime',
tickPixelInterval: 150,
labels: {
formatter: function () {
return Highcharts.dateFormat('%H:%M:%S', this.value);
}
}
},
yAxis: {
title: {
text: 'CO2, ppm'
},
plotLines: [{
value: 0,
width: 1
},{
value: 1,
width: 1
},{
value: 2,
width: 1
}]
},
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: true
},
plotOptions: {
spline: {
marker: {
enabled: false
}
}
},
exporting: {
enabled: false
},
series: [{
name: 'Master',
data: []
},
{
name: 'Slave 1',
data: []
},
{
name: 'Slave 2',
data: []
}]
});
This one pushes data:
for(var i = 0; i < array.length; i++){
var time = Date.parse(array[i]["dateTime"]);
Co2Chart.series[0].addPoint(array[i]["masterCo2"], time);
Co2Chart.series[1].addPoint(array[i]["slave1Co2"], time);
Co2Chart.series[2].addPoint(array[i]["slave2Co2"], time);
}
DateTime string that is passed to the Date.parse looks like this 2016-03-28 22:47:49. And in milliseconds – 1459198069000
Any ideas why it's not showing?
The problem is how you use addPoint method:
Co2Chart.series[0].addPoint(array[i]["masterCo2"], time);
Should be:
Co2Chart.series[0].addPoint([time, array[i]["masterCo2"]]);
Or:
Co2Chart.series[0].addPoint({
y: array[i]["masterCo2"],
x: time
});
Disabling label without bar Highstock
I have a column chart Highstock:
http://jsfiddle.net/txfnsubb/
When we change range to smaller values, sometimes it shows us a label of value w/o the bar. For example I see 30 bars and at the end label with 31. Is there a possibility to turn it off? To set chart to showing label only with bar.
$('#container').highcharts('StockChart', {
chart: {
marginTop: 140
},
credits: {
enabled: false
},
plotOptions: {
series: {
dataGrouping: {
approximation: "average"
}
}
},
scrollbar: {
enabled: false
},
navigator: {
top: 40,
xAxis: {
labels: {
formatter: function () {
return x[this.value];
}
}
}
},
xAxis: {
labels: {
y: 50,
max: 150,
formatter: function () {
return x[this.value];
}
}
},
tooltip: {
formatter: function () {
var s = [];
var next = this.x + this.points[0].series.pointRange;
if ((this.x + 1) == next) {
s.push("<b>Position: " + (this.x + 1));
} else {
s.push("<b>Position: " + (this.x + 1) + "-" + next);
}
$.each(this.points, function (i, point) {
s.push('<span style="color:#D31B22;font-weight:bold;">' + point.series.name + ' : <span>' + point.y.toFixed(2));
});
return s.join('<br/>');
},
shared: true
},
series: [{
type: 'column',
name: 'reactivity',
data: data,
showInLegend: false,
tooltip: {
valueDecimals: 2,
shared: true
}
}, {
type: 'spline',
name: 'experiment 1',
data: data2,
color: 'green',
visible: false,
tooltip: {
valueDecimals: 2
}
}, {
type: 'spline',
name: 'experiment 2',
data: data3,
color: 'red',
visible: false,
tooltip: {
valueDecimals: 2
}
}],
legend: {
enabled: true,
margin: 0
},
rangeSelector: {
buttons: [{
type: 'millisecond',
count: seqLength / 5,
text: '0.25'
}, {
type: 'millisecond',
count: seqLength / 3,
text: '0.3'
}, {
type: 'millisecond',
count: seqLength / 2,
text: '0.5'
}, {
type: 'all',
text: '1.0'
}],
inputEnabled: false, // it supports only days
selected: 4 // all
}
});