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?
Related
In Highcharts, I want to show different symbols next to point values to indicate certain notes. I use an additional attribute for the point ("note") and I can then use it in tooltips and dataLabels, as shown here:
Highcharts.chart('container', {
title: {
text: 'Title'
},
tooltip: {
formatter: function() {
return "<strong>" + this.series.name + "</strong><br /><strong>" + Highcharts.numberFormat(this.y, 2) + '' + '<b><sup>' + this.point.note + '</sup></b></strong>';
}
},
credits: {
text: 'Source: thesolarfoundation.com'
},
chart: {
borderWidth: 1,
borderColor: '#ccc',
spacingBottom: 30
},
yAxis: {
title: {
text: 'Number of Employees'
}
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle'
},
plotOptions: {
series: {
pointStart: 2010,
dataLabels: {
useHTML: true,
enabled: true,
allowOverlap: true,
style: {
fontWeight: 'normal',
fontSize: '9px',
zIndex: 5
},
formatter: function() {
return Highcharts.numberFormat(this.y, 2) + "<sup>" + this.point.note.toLowerCase() + "</sup>";
}
}
}
},
series: [{
name: 'Series 1',
data: [{
id: "myID",
note: "",
y: 12.22,
value: 12.22
}, {
id: "myID",
note: "",
y: 13.11,
value: 13.11
}, {
id: "myID",
note: "*",
y: 14.99,
value: 14.99
}]
}],
exporting: {
showTable: true
}
});
https://jsfiddle.net/jmunger/o3bmyu5d/10/
Now I want to use the Export-data module to allow the user to see the data in table form. This works well, as shown in the jsFiddle above, but how could I add the same symbols/notes I show in tooltips and dataLabels in the table?
You can define the keys (API) for the series, which is used when creating the table.
For example, in your case you can set keys as follows (JSFiddle demo):
series: [{
name: 'Series 1',
keys: ['y', 'note'],
data: [...]
}]
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.
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
});
[{"name":"M3","data":[["2014-04-16 23:03:59","0"],["2014-04-15 17:48:37","0"],["2014-04-15 17:43:16","1"],["2014-04-15 17:42:52","0"],["2014-04-15 17:36:19","1"],["2014-04-15 17:35:43","0"],["2014-04-15 17:35:31","0"],["2014-04-15 17:30:22","0"],["2014-04-15 17:27:47","1"],["2014-04-15 17:26:00","1"],["2014-04-15 17:19:28","1"],["2014-04-15 17:00:26","0"],["2014-04-15 16:53:18","0"]]},{"name":"M2","data":[["2014-04-16 23:03:47","0"],["2014-04-15 17:47:25","0"],["2014-04-15 17:33:20","1"],["2014-04-15 17:30:10","0"],["2014-04-15 16:57:51","0"]]},{"name":"M1","data":[["2014-04-15 17:47:37","0"],["2014-04-15 17:45:15","0"]]}]
The above is the JSON data for HighCHarts wherein I need to set the X axis to date/time and Y to status . The JSON is generated and attached to the series property and is used as below: This is not plotting at all.
var handlerURL = "http://localhost:50687/Handler.ashx?";
$.ajax({
url: handlerURL,
type: "GET",
datatype: "json",
contentType: 'application/json',
complete: function (json) {
jsonData = json.responseText; alert(jsonData);
}
});
options = {
chart: {
renderTo: 'container',
type: 'spline',
marginRight: 130,
marginBottom: 50
},
setOptions: ({
global: { useUTC: true }
}),
title: {
text: 'Live Data',
x: -20
},
subtitle: {
text: '',
x: -30
},
xAxis: {
type: 'datetime',
tickPixelInterval: 100,
plotLines: [{
width: 5,
color: '#808080'
}]
},
yAxis: {
min: 0, max: 1,
title: {
text: 'Status'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
tooltip: {
formatter: function () {
return '<b>' + this.series.name + '</b><br/>' +
this.x + ': ' + this.y;
}
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
x: -10,
y: 100,
borderWidth: 0
},
series: []
}
options.series = jsonData;
chart = new Highcharts.Chart(options);
});
I have a chart as below.
http://jsfiddle.net/Mn6sB/4/
$(function () {
$('#chartContainer').highcharts({
chart: {
renderTo: 'chartContainer',
type: 'column',
marginTop:50,
spacingBottom: 5,
marginBottom: 100
},
credits: {
enabled: false
},
title: {
text: 'Product health',
},
subtitle: {
text: ''
},
xAxis: {
type: 'datetime',
minTickInterval: 24 * 3600 * 1000,
dateTimeLabelFormats: {
month: '%e %b',
year: '%b'
}
},
yAxis: {
min: 0,
max:100,
tickInterval:10,
title: {
text: 'Passrate'
},
},
legend: {
title: {
text: '<span style="font-size: 9px; color: #666; font-weight: normal">To toggle between different branches click on the branch names in the legend</span>',
style: {
fontStyle: 'italic'
}
},
layout: 'horizontal',
},
tooltip: {
formatter: function() {
return 'Branch: <b>'+ this.series.name +
'</b><br/>Date: '+ Highcharts.dateFormat('%e %b',this.x)+
'</b><br/>Pass rate: '+ this.y +'%';
}
},
plotOptions: {
spline: {
dataLabels: {
enabled: 'True'
},
enableMouseTracking: false
}
},
series: [{name: 'BranchX', data:[[Date.UTC(2013,9,3),88],[Date.UTC(2013,9,4),100],[Date.UTC(2013,9,5),100],[Date.UTC(2013,9,6),100],[Date.UTC(2013,9,7),100],[Date.UTC(2013,9,8),100],[Date.UTC(2013,9,9),100],]},{name: 'BranchY', data:[[Date.UTC(2013,9,3),75.27],[Date.UTC(2013,9,4),83.33],[Date.UTC(2013,9,5),100],[Date.UTC(2013,9,6),63.64],[Date.UTC(2013,9,7),98.31],[Date.UTC(2013,9,8),98.9],[Date.UTC(2013,9,9),64.71],]},]
});
});
This is a column graph showing the pass percentage.
I wanted to pass the numbers (passcount, total count) which were used to calculate the % vlaues, so that I can show them as tooltip. Is is possible?
yes this is possible and simple
pass the addl numbers in the series along with data
access them from tool tip as shown below from the formatter
tooltip:{
formatter: function() {
this.point.options.passCount
this.point.options.total
}
}
series:[{
data: [{
x: timestamp,
y: value,
passCount: someVlaue,
totalCount: someValue
},{
x: timestamp,
y: value,
passCount: someVlaue,
totalCount: someValue
},{
x: timestamp,
y: value,
passCount: someVlaue,
totalCount: someValue
}]
}]