Highstock Chart - setExtremes event data missing - javascript

I have created a chart with the following specs:
$('#container').highcharts('StockChart', {
chart: {
alignTicks: false,
zoomType: 'x'
},
rangeSelector: {
selected: 5,
buttons: [
{
type: 'minute',
count: 1,
text: '1m'
}, {
type: 'minute',
count: 10,
text: '10m'
}, {
type: 'minute',
count: 30,
text: '30m'
}, {
type: 'minute',
count: 60,
text: '1h'
}, {
type: 'day',
count: 1,
text: '1d'
}, {
type: 'all',
text: 'All'
}
]
},
title: {
text: 'Ping RTT over time for: ' + host
},
subtitle: {
text: document.ontouchstart === undefined ?
'Click and drag in the plot area to zoom in' : 'Pinch the chart to zoom in'
},
xAxis: {
type: 'datetime',
events: {
setExtremes: setExtremesCallback
}
},
yAxis: {
title: {
text: 'Ping RTT (ms)'
}
},
legend: {
enabled: false
},
plotOptions: {
column: {
color: Highcharts.getOptions().colors[c]
},
series: {
dataGrouping: {
approximation: "average"
}
}
},
series: [{
type: 'column',
name: 'Ping RTT',
data: h,
}]
});
Then I have the setExtreme callback defined as follows:
function setExtremeCallback(event) {
var min = event.min;
var max = event.max;
var container = event.target.chart.renderTo
...
}
In this function i would like to compute some statistics regarding the portion of data in the selected range. For this I need min and max, and I'm able to catch them from the event object.
The problem is that don't manage to access the data array. I've tried with
var data = event.target.chart.series[0].data
or
var data = this.series[0].data
but both of them are empty.


I solved it in this way, but I'm pretty sure there is a cleaner way to do that.
function setExtremeCallback(event) {
var minPos = 0;
var maxPos = this.series[0].xData.length - 1;
for (var j = 0; j < this.series[0].xData.length; j++) {
if (this.series[0].xData[j] <= event.min)
minPos = j;
if (this.series[0].xData[j] <= event.max)
maxPos = j;
}
var yData = this.series[0].yData.slice(minPos, maxPos);
...
}

Related

Show data as a live stream, Highcharts

So What I have is a set of data stored, which I am able to access in Highchart easily. but Now what I need is to show the data as a live stream
like the following example :
https://www.highcharts.com/demo/dynamic-update
What I have done so far is Here :
<script type="text/javascript">
var xValues = [];
xValues = [1,4,3,9,3,4,4,6,4,5,3,4,3,3,1,3,2,3,2,3,4,4,3,3,4,3,5,3,6,7,3,2,5,7,4,6,7,3,6,7,4,7,4,7,3,2,5,6,7,4,3,4,6,6,7,4,6,6,7,3,6,7,3,2,4,5,6,5,9,8,4,6,2,1,5,8,5,8,2,6,3,8,4,7,3,6,1,5,8,0,2,4,7,5,8,3,7,9,3,7];
Highcharts.chart('ppg', {
chart: {
type: 'line'
},
title: {
text: 'ECG Data'
},
subtitle: {
text: ''
},
xAxis: {
crosshair: false
},
yAxis: {
title: {
text: 'Peaks'
}
},
tooltip: {
enable: false
},
plotOptions: {
column: {
pointPadding: 0.2,
borderWidth: 0
}
},
series: [{
name: '',
lineWidth: 2,
data: xValues,
animation: {
duration: 5000
}
}]
});
</script>.
How can my data flow like the above example? in 10 10 patches.
Here is the Working JSFiddle:
https://jsfiddle.net/abnitchauhan/3vj2afnt/

You can initially add only the first 10 points and then use chart load event function and set interval to add remaining points with shift argument:
var xValues = [],
counter = 11,
startValues;
xValues = [...];
startValues = xValues.slice(0, counter);
var chart = Highcharts.chart('ppg', {
chart: {
type: 'line',
events: {
load: function() {
var chart = this,
interval = setInterval(function() {
chart.series[0].addPoint(xValues[counter], true, true);
counter++;
if (counter === xValues.length - 1) {
clearInterval(interval);
}
}, 1000);
}
}
},
...
});
Live demo: https://jsfiddle.net/BlackLabel/7x9vrLqm/
API Reference:
https://api.highcharts.com/highcharts/chart.events.load
https://api.highcharts.com/class-reference/Highcharts.Series#addPoint

In your code event is missing which will trigger change per sec.
Something like this. I have used random number.
var xValues = [];
xValues = [1,4,3,9,3,4,4,6,4,5,3,4,3,3,1,3,2,3,2,3,4,4,3,3,4,3,5,3,6,7,3,2,5,7,4,6,7,3,6,7,4,7,4,7,3,2,5,6,7,4,3,4,6,6,7,4,6,6,7,3,6,7,3,2,4,5,6,5,9,8,4,6,2,1,5,8,5,8,2,6,3,8,4,7,3,6,1,5,8,0,2,4,7,5,8,3,7,9,3,7];
Highcharts.chart('ppg', {
chart: {
type: 'line',
events: {
load: function () {
// set up the updating of the chart each second
var series = this.series[0];
setInterval(function () {
var x = Math.random();
y = Math.random();
series.addPoint([x, y], true, true);
}, 1000);
}
}
},
title: {
text: 'ECG Data'
},
subtitle: {
text: ''
},
xAxis: {
crosshair: false
},
yAxis: {
title: {
text: 'Peaks'
}
},
tooltip: {
enable: false
},
plotOptions: {
column: {
pointPadding: 0.2,
borderWidth: 0
}
},
series: [{
name: '',
lineWidth: 2,
data: xValues,
animation: {
duration: 5000
}
}]
});
Working fiddle

Highchart - I have to refresh the page to see new data

Below is the chart code, my problem is JSON needs to be used to grab updated data.
I dont want the whole chart to be re-render, but instead only the candles (add the new ones).
I guess there has to be a loop looking every sec in the new data by looping the JSON and create a chart.update?
Would love a answer from anyone with how i should solve this with code!
https://codeshare.io/alxOMZ
$.getJSON('/api/v1/public/getcharts?market=BTC-'+coinsymbol, function (data) {
// split the data set into trading and volume
var trading = [],
volume = [],
dataLength = data.length,
// set the allowed units for data grouping
groupingUnits = [[
'hour', // unit name
[1] // allowed multiples
], [
'day',
[1, 7]
]],
i = 0;
for (i; i < dataLength; i += 1) {
trading.push([
data[i][0], // the date
data[i][1], // open
data[i][2], // high
data[i][3], // low
data[i][4] // close
]);
volume.push([
data[i][0], // the date
data[i][5] // the volume
]);
}
// create the chart
Highcharts.stockChart('container', {
title: {
text: null
},
scrollbar: {
enabled: false
},
credits: {
enabled: false
},
chart: {
renderTo: 'container',
backgroundColor: 'none',
},
rangeSelector: {
selected: 2,
buttons: [{
type: 'hour',
count: 1,
text: '1h'
}, {
type: 'day',
count: 1,
text: '1D'
}, {
type: 'day',
count: 7,
text: '7D'
}, {
type: 'month',
count: 1,
text: '1M'
}, {
type: 'all',
count: 1,
text: 'All'
}],
selected: 5,
inputEnabled: false
},
legend: {
enabled: false
},
exporting: {
enabled: false
},
plotOptions: {
candlestick: {
lineColor: '#E75162',
upLineColor: '#5BB789',
upColor: '#5BB789',
color: '#E75162'
}
},
yAxis: [{
crosshair: {
snap: false
},
height: '100%',
resize: {
enabled: false
}
}, {
top: '100%',
height: '10%',
offset: 0
}],
tooltip: { enabled: false },
series: [
{
type: 'candlestick',
name: coinsymbol,
data: trading,
dataGrouping: {
units: groupingUnits
}
}, {
type: 'column',
name: coinsymbol+' Volume',
data: volume,
yAxis: 1,
dataGrouping: {
units: groupingUnits
}
}]
});
});
-----CODE-----
$.getJSON('/api/v1/public/getcharts?market=BTC-'+coinsymbol, function (data) {
// split the data set into trading and volume
var trading = [],
volume = [],
dataLength = data.length,
// set the allowed units for data grouping
groupingUnits = [[
'hour', // unit name
[1] // allowed multiples
], [
'day',
[1, 7]
]],
i = 0;
for (i; i < dataLength; i += 1) {
trading.push([
data[i][0], // the date
data[i][1], // open
data[i][2], // high
data[i][3], // low
data[i][4] // close
]);
volume.push([
data[i][0], // the date
data[i][5] // the volume
]);
}
// create the chart
Highcharts.stockChart('container', {
title: {
text: null
},
scrollbar: {
enabled: false
},
credits: {
enabled: false
},
chart: {
renderTo: 'container',
backgroundColor: 'none',
},
rangeSelector: {
selected: 2,
buttons: [{
type: 'hour',
count: 1,
text: '1h'
}, {
type: 'day',
count: 1,
text: '1D'
}, {
type: 'day',
count: 7,
text: '7D'
}, {
type: 'month',
count: 1,
text: '1M'
}, {
type: 'all',
count: 1,
text: 'All'
}],
selected: 5,
inputEnabled: false
},
legend: {
enabled: false
},
exporting: {
enabled: false
},
plotOptions: {
candlestick: {
lineColor: '#E75162',
upLineColor: '#5BB789',
upColor: '#5BB789',
color: '#E75162'
}
},
yAxis: [{
crosshair: {
snap: false
},
height: '100%',
resize: {
enabled: false
}
}, {
top: '100%',
height: '10%',
offset: 0
}],
tooltip: { enabled: false },
series: [
{
type: 'candlestick',
name: coinsymbol,
data: trading,
dataGrouping: {
units: groupingUnits
}
}, {
type: 'column',
name: coinsymbol+' Volume',
data: volume,
yAxis: 1,
dataGrouping: {
units: groupingUnits
}
}]
});
});

Looking at the highcharts api quickly on google, you may need an event property followed by load property, and your logic, which would probably include something like
chart: {
events: {
load: function () {
// here's how you would access your series
var series = this.series[0];
setInterval(function () {
//modify your series here.
}, 1000);
}
}
}

Plot float up & down beyond y-axis in StockChart while dragging navigator

Here is my js code:
Highcharts.stockChart('utilizations', {
chart: {
zoomType: 'x'
},
title: {
text: 'KPI'
},
subtitle: {
text: 'CCE & PRB Utilization (%)'
},
rangeSelector: {
buttons: [{
type: 'day',
count: 1,
text: '1d'
}, {
type: 'day',
count: 3,
text: '3d'
}, {
type: 'day',
count: 7,
text: '1w'
}, {
type: 'day',
count: 14,
text: '2w'
}, {
type: 'all',
text: 'All'
}],
selected: 1
},
yAxis: {
labels: {
formatter: function () {return this.value + '%';}
},
max: 100,
min: 0,
tickInterval: 20,
plotLines: [{
value: 0,
width: 2,
color: 'silver'
},{
value: 70,
width: 1,
color: 'red'
}]
},
tooltip: {
crosshairs: true,
shared: true
},
plotOptions: {
series: {
compare: 'value',
showInNavigator: true
}
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle'
},
xAxis: {
type: 'datetime'
},
series: [{
name: 'CCE Util',
type: 'spline',
yAxis: 0,
data: (function(){
var data = [];
for (var i = 0; i < result.length; i++) {
var time = result[i]["time"];
var kpi = result[i]["cce"];
data.push([time, kpi]);
}
return data;
})(),
tooltip: {
valueSuffix: '%',
valueDecimals: 2,
split: true
}
},{
name: 'PRB Util',
type: 'spline',
yAxis: 0,
data: (function(){
var data = [];
for (var i = 0; i < result.length; i++) {
var time = result[i]["time"];
var kpi = result[i]["prb"];
data.push([time, kpi]);
}
return data;
})(),
tooltip: {
valueSuffix: '%',
valueDecimals: 2,
split: true
}
And my plot:
While dragging the navigator bar, sometimes the plot goes to the right position and sometimes it looks like the capture above. According to my experience, the plot position is related to the left end (let's note this as A) position of the navigator selector. When A is on the lowest part of the whole plot in navigator, the shown plot positioned well; and when A goes like the capture above, the plot shown sunk.
Please refer to a short demo with 100 data here: https://jsfiddle.net/ghqyvo0x/
How can I make my plot stable?

Your problem is caused by series.compare: property, which you set in plotOptions configuration object. If you delete this line of code, everything should work as you need. We could read in Highstock API:
Compare the values of the series against the first non-null, non- zero value in the visible range.
plotOptions: {
series: {
//compare: 'percent',
showInNavigator: true
}
}
JSFiddle example
API Reference

Highstock granularity of x-axis

My highstock chart chokes on the x-axis labels once I get down any more granular than about 1 day - that is, the data renders properly but the x-axis (time) labels don't seem to update, and become more sparse as I zoom in until they disappear completely. (See images)
Here is a fiddle at a larger time interval where the labels show as expected: http://jsfiddle.net/uhpn8Ljp/2/
Here is a fiddle for the smaller intervals where they don't display: http://jsfiddle.net/4r39730h/1/
I have this as my data setup when the data is received:
return {
chart: {
type: 'areaspline',
zoomType: 'x',
},
credits: {
enabled: false,
},
navigator: {
adaptToUpdatedData: false,
series: {
data: masterSeriesDateValues || dateValues,
},
yAxis: {
gridLineWidth: 0,
startOnTick: false,
endOnTick: false,
minPadding: 0.1,
maxPadding: 0.1,
labels: {
enabled: false,
},
title: {
text: null,
},
tickWidth: 0,
min: 0,
},
},
rangeSelector: {
enabled: true,
inputBoxStyle: { right: '65px', position: 'absolute' },
buttons: [{
type: 'second',
count: 1,
text: '1s',
}, {
type: 'minute',
count: 1,
text: '1min',
}, {
type: 'hour',
count: 1,
text: '1h',
}, {
type: 'day',
count: 1,
text: '1d',
}, {
type: 'month',
count: 1,
text: '1m',
}, {
type: 'year',
count: 1,
text: '1y',
}, {
type: 'all',
text: 'All',
}],
selected: rangeSelectorIndex,
inputDateFormat: dateFormat,
inputEditDateFormat: dateFormat,
inputBoxWidth: 170,
},
exporting: {
enabled: false,
},
xAxis: {
min: xAxisStart,
max: xAxisEnd,
minRange: 1, // one millisecond
},
yAxis: {
min: 0,
},
tooltip: {
formatter: function () {
return `${this.points[0].series.name} : ${(display === 'count' ? this.y : formatBytes(this.y))}`;
},
},
series: [{
id: 'itemSize',
name: display === 'count' ? 'Count of Items' : 'Size of Items',
data: dateValues,
dataGrouping: {
enabled: false,
},
}],
};
I also add a few events and labels on render:
xAxis.events = {
afterSetExtremes: this.afterSetExtremes.bind(this),
};
chart.events = { selection: function (ev) {
that.handleRangeSelection.call(this, ev, that);
} };
chartConfig.tooltip = {
formatter: function () {
let label;
if (display === 'count') {
label = this.points[0].series.name + ': ' + this.y;
} else {
label = this.points[0].series.name + ': ' + formatBytes(this.y);
}
return label;
},
};
In a previous implementation of the app, I was seeing smaller and smaller intervals down to milliseconds, and I just copied and pasted the configuration so I don't understand what could be different.

Loading json data to highstocks with multiple series and adding TimeStamp to xAxis

How to load json data to multiple series and add Time to xAxis in HighStock?
And any idea how to add multiple yAxis on the right and left of the HighStock chart?
I tried to convert to json structure ["name": data:[]] but i can't find how to do it. Please help.
My code is in ASP.Net MVC 4:
public JsonResult GetData()
{
var chart = new List<object>();
chart.Add( new { Speed = 50, Tank = 201.56, odomoter = 2319.956, Time = "05/04/2015 23:53:07" } );
chart.Add( new { Speed = 80, Tank = 201.56, odomoter = 2319.956, Time = "05/04/2015 23:52:06" } );
chart.Add( new { Speed = 90, Tank = 201.56, odomoter = 2191.907, Time = "05/04/2015 23:51:06" } );
var jss = new JavaScriptSerializer();
var output = jss.Serialize( chart );
return Json( output, JsonRequestBehavior.AllowGet );
}
$(function () {
$.getJSON('GetData', function(jdata) {
alert(jdata);
// Create the chart
$('#container').highcharts('StockChart', {
chart: {
type: 'spline',
zoomType: 'xy'
},
rangeSelector: {
buttons: [{
type: 'hour',
count: 1,
text: '1h'
}, {
type: 'day',
count: 2,
text: '2d'
}, {
type: 'week',
count: 1,
text: '1w'
}, {
type: 'month',
count: 1,
text: '1m'
}, {
type: 'year',
count: 1,
text: '1y'
}, {
type: 'all',
text: 'All'
}],
inputEnabled: true, // it supports only days
selected: 0 // day
},
//xAxis: {
// minRange: 3600 * 1000, // one hour
// type: 'datetime',
// dateTimeLabelFormats: { minute: '%H:%M', day: '%A. %e/%m' },
// // minRange: 15*60*1000,
// //maxZoom: 48 * 3600 * 1000,
// labels: {
// rotation: 330,
// y: 20,
// staggerLines: 1
// }
//},
yAxis: [{ // Primary yAxis
labels: {
format: '{value}°C',
style: {
color: '#89A54E'
}
},
title: {
text: 'Temperature',
style: {
color: '#89A54E'
}
}
}, { // Secondary yAxis
title: {
text: 'Consumo',
style: {
color: '#4572A7'
}
},
labels: {
format: '{value} Kw',
style: {
color: '#4572A7'
}
},
opposite: true
}],
title: {
text: 'AAPL Stock Price'
},
series: data
//series: [{
// name: 'AAPL',
// data: data,
// tooltip: {
// valueDecimals: 2
// }
//}]
});
});
});

Categories