highcharts Xaxis timeflow - javascript

Hello I would like to ask for an advice in setting X-axis in the chart. I am rendering 2500 samples like a 10 seconds of signal. How should I set X-axis to show continuous time. After new data rendered the time should continue. Something like I render first 2500 values and the last tick on X axis is 10 sec. Than another 2500 values come to be rendered and the time should continue from the beginning...11 and so on until 20 and so on. Can it be done with just simple add sth to xAxis ? Or I have to rework the rendering with data.push function.
var options = {
chart: {
renderTo: 'services',
type: 'line',
animation: 'false'
},
xAxis: {
labels: {
formatter: function () {
return (0 + (this.value / 250 )) + " sec";
}
}
},
plotOptions: {
series: {
animation: {
duration: 5000
}
}
},
series: [{marker: {
enabled: false
}}]
};

Related

Dynamic update multible series Highcharts with single point XML file

I am a bit out of my comfort zone, since I normally do analytics and not fancy front-ends. However, I would like to have a real-time demo of some of my work, so it becomes easier to understand and not just numbers in a matrix. I have looked around and found something semi-relevant and come this far:
(It has four series like I want to and it iterates - to some degree)
https://jsfiddle.net/023sre9r/
var series1 = this.series[0],
series2 = this.series[1],
series3 = this.series[2],
series4 = this.series[3];
But I am totally lost on how to remove the random number generators without loosing nice things like the number of data points in a view (seems to depend on the for loop?!). Remove the extra title "Values" right next to my real y-axis title. And of cause how to get a new data point from a XML-file every second.
Ideally I want to have an XML-file containing 4 values, which I update approximately every 200ms in MATLAB. And every second I would like my 4 series chart to update. Is it not relatively easy, if you know what you are doing?! :-)
Thanks in advance!
I simplified your example and added clear code showing how to fetch data from server and append it to your chart using series.addPoint method. Also if you want to use XML, just convert it to JS object / JSON.
const randomData = () => [...Array(12)]
.map((u, i) => [new Date().getTime() + i * 1000, Math.random()])
Highcharts.chart('container', {
chart: {
renderTo: 'container',
type: 'spline',
backgroundColor: null,
animation: Highcharts.svg, // don't animate in old IE
marginRight: 10,
events: {
load () {
const chart = this
setInterval(() => {
// Fetch example below (working example: https://github.com/stpoa/live-btc-chart/blob/master/app.js)
// window.fetch('https://api.cryptonator.com/api/ticker/btc-usd').then((response) => {
// return response.json()
// }).then((data) => {
// chart.series[0].addPoint({ x: data.timestamp * 1000, y: Number(data.ticker.price) })
// })
chart.series.forEach((series) => series.addPoint([new Date().getTime(), Math.random()], true, true))
}, 3000)
}
}
},
title: {
text: null
},
xAxis: {
type: 'datetime',
tickPixelInterval: 150
},
yAxis: [{
title: {
text: 'Temperature [°C]',
margin: 30
},
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, 4);
}
},
legend: {
enabled: true
},
exporting: {
enabled: false
},
rangeSelector: {
enabled: false
},
navigator: {
enabled: false
},
scrollbar: {
enabled: false
},
series: [{
name: 'Setpoint',
data: randomData()
}, {
name: 'Return',
data: randomData()
}, {
name: 'Supply',
data: randomData()
}, {
name: 'Output',
data: randomData()
}]
})
Live example: https://jsfiddle.net/9gw4ttnt/
Working one with external data source: https://jsfiddle.net/111u7nxs/

Highcharts: how to define x-axis for dynamic chart

I am using Highcharts to automatically plot an array which is output from a sensor and is updated every second or so. The array is x elements long. This particular sensor measures the light intensity at x steps between some min and max wavelengths (that is, it measures the intensity at increments of (max-min)/x--in my case this increment is not an integer). I also have a static data set that is plotted on the same axes with the same x-axis requirements.
I am able to successfully graph this data dynamically, but the x-axis scale is wrong. Instead of ranging from min to max, Highcharts defaults to a range of min to min+x. I'd like to change the x-axis increment so that the scaling is correct.
Can a min, max, and number of data points or step be defined to generate the x-axis? Or is there a way to define the x- and y-axis values as individual arrays that are plotted against each other? Some other way? I have done lots of searching and experimenting but have come up short.
The relevant snippet of my code is below.
function showData(result) { // 'result' is an array that comes from the sensor
var numbers = int(split(resultString, ","));
chart.series[1].setData(numbers);
socket.send('a'); // send a byte to tell it to start sending new data
loop++; //increase loop every time the server receives data
chart.setTitle({ text: 'Spectrum, reading #' + loop });
} //showData
$(function () {
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'area',
load: function() {
chart = this;
showData();
}
},
title: {
text: 'Spectrum, reading 0'
},
xAxis: {
title: {
text: 'Wavelength [nm]',
allowDecimals: false,
},
},
yAxis: {
title: {
text: ''
},
},
tooltip: {
pointFormat: '{point.x}'
},
plotOptions: {
area: {
pointStart: 340,
marker: {
enabled: false,
symbol: 'circle',
radius: 2,
states: {
hover: {
enabled: true
}
}
}
}
},
series: [{
name: '404 nm laser spectrum',
data: [130,130,114,113,113,116,112,111,112,112,115,113,113,115,
112,114,113,113,114,115,113,114,113,114,115,115,117,119,124,
136,145,164,190,217,252,363,482,491,417,285,188,156,140,132,
127,122,117,118,117,115,116,115,116,118,116,116,117,116,117,
116,113,117,114,113,115,112,116,114,114,116,114,114,116,113,
116,115,114,115,115,114,115,115,115,116,114,115,116,114,118,
114,116,116,115,118,114,113,117,113,116,116,115,116,115,115,
115,114,117,116,117,118,120,118,122,119,128,127,130,134,136,
138,140,137,139,134,136,134,132,133,134,131,132,130,130,131,
128,128,131,129,131,131,134,136,134,140,139,137,143,140,138,
141,136,134,132,127,126,126,123,123,118,119,122,118,120,117,
116,118,116,118,116,115,117,116,115,116,115,115,116,114,119,
113,114,116,115,116,114,114,116,116,113,117,116,114,118,112,
115,114,113,116,115,114,115,113,116,114,114,116,115,115,114,
112,114,114,113,114,115,113,117,114,115,112,114,114,113,115,
114,114,115,113,112,115,112,113,115,112,116,113,113,115,116,
113,116,113,115,113,114,115,115,114,116,114,116,113,116,117,
113,115,116,115,117,115,114,117,113,115,118,114,116,115,115,
116,114,113,116,114,117,115,114,117,115,114,115,116,116,116,
117,117,114,0],
color: '#36D39F'
}, {
name: 'Current measured spectrum',
data: numbers,
color: '#4A235A'
}]
});
});
EDIT: here's a demo showing how mine currently functions: https://jsfiddle.net/bgzgc1d9/2/. The x-axis should range from 340 to 850 with 288 data points evenly spaced on this interval

Highchart performance slow on plotting live data

I am plotting live data in Highchart's(4.2.4) Line type chart for each second data i.e. 60 points for 1 min. and requirement is to collect each second data for long duration. I am using below code to add point in series. The number of series I have is 20. And for each series I have to add point per second. The turboThreshold set for each series is also around 2000. And slicing should be done after 1000 points data.
chart.series[0].addPoint(point, false, data > 1000?shift: false, false);
I see a very low performance my browser keeps hanging and also chart is very irresponsive after some time. What can I do for better performance? I have tried below stuff:
1) Off the animation for series :
plotOptions: {
series: {
animation:false,
states: {
hover: {
lineWidthPlus: 0
}
}
}
},
2) Turn off animation and redrawing on addpoint to the chart
3) Turn off markers for series
4) Included boost.js module in application
script src="https://code.highcharts.com/modules/boost.js"
Without your actual code I can only speculate what you're doing, but my assumption is you're trying to redraw the chart every time you add a point, that would be 20 redraws per second, which is pretty excessive and will probably take more than 1 second to complete the redraws which means there will be new points added while old ones are still being drawn. Set the redraw to false on adding points and manually redraw every second or at random.
Example code:
$(function() {
var series = function(i) {
return {
name: 'Random data '+i,
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;
}())
};
};
$(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() {
var chart = this;
// set up the updating of the chart each second
setInterval(function() {
for (var i = 0; i < 20; i++) {
var series = chart.series[i];
var x = (new Date()).getTime(), // current time
y = Math.random();
series.addPoint([x, y], false, false,false);
}
chart.redraw();
}, 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);
}
},
exporting: {
enabled: true
},
plotOptions: {
series: {
marker: {
enabled: true
}
}
},
series: [series(1), series(2),series(3), series(4),series(5), series(6),series(7), series(8),series(9), series(10),series(11), series(12),series(13), series(14),series(15), series(16),series(17), series(18),series(19), series(20)]
});
});
});
Fiddle at http://jsfiddle.net/62k8sryc/1/
NOTE
Because this is JavaScript it heavily depends on browser build/version and machine specs.

Highchart xAxis label steps wrong

I am loading Highcharts like this.
var options = {
credits: {
enabled: false
},
chart: {
renderTo: 'chart_box',
type: 'areaspline'
},
title: {
text: ''
},
xAxis: {
crosshairs: true,
labels: {
step: 5,
rotation: -45
}
},
series: []
};
Then I have a function which is called when graph needs to be loaded. Upon calling the function, data is fetched through AJAX and assigned to series and date lie this:
$.ajax({
url: 'url/charts',
type: 'post',
data: data
}).done(function(data) {
var dateCount = data.dates.length;
var stepCount = 1;
if (dateCount > 10) {
stepCount = 5;
}
options.xAxis.categories = data.dates;
$.each(data.series, function(name, elem) {
options.series.push({
name: name.replace('_', ' ').toUpperCase().trim(),
data: elem
})
});
chart = new Highcharts.Chart(options);
});
The issue here is that even though I have given step as 5 , it is showing dates with 15 dates interval. I mean in xAxis labels. It seems like it will be multiplied by three always. If I give 2, it will show 6 days interval in labels. Everything working fine in a chart which is not using AJAX to load data.

Highcharts time range

is it possible to set highcharts to show data only in specific time range, like 2 hours for example, without any zooming.
For example at the beginning i have data for 2 hours from now. And is it possible not to show some points if they do not fit 2 hours from now?
for example, on the highcharts x-axis labels will be always constant like: [12:00, 12:30, 13:00, 13:30, 14-00] even without any data that is related with this time.
And when the new data comes, labels of time shift to new values like: [12:30, 13:00, 13:30, 14:00, 14:30]
I tried to do like:
this.chart = new Highcharts.Chart({
chart: {
reflow: false,
type: 'line',
renderTo: newSensor.get('id')
},
title: {
text: newSensor.get('name')
},
xAxis: {
minRange : 1
},
yAxis: {
title: {
text: 'Values'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
series: dataToChart,
plotOptions: {
series: {
lineWidth: 1,
turboThreshold: 0,
threshold: null
}
}
});
But minRange is not right property for this.
I think you should set min and max for xAxis. Then, when new point is added (using addPoint() ) you should set new extremes using
chart.xAxis[0].setExtremes( newMin, newMax )

Categories