do not remove previous point in spline highchart - javascript

in splin highchart when draw new live point,it remove first point from left.
how can i disable this work in highchart
my chart must be in fix datetime range,and live splin chart must begin in min datetime and finish in max datetime.and do not remove any point.
when recieve to max datetime the point must be clear.
$(function () {
$(document).ready(function () {
Highcharts.setOptions({
global: {
useUTC: false
}
});
$('#LineChart').highcharts({
chart: {
type: 'spline',
zoomType: 'x',
resetZoomButton: {
position: {
x: 0,
y: -30
}
},
animation: Highcharts.svg, // don't animate in old IE
marginRight: 10,
events: {
load: function () {
var seri = new Array();
seri = this.series;
setInterval(function () {
var result = ReadAlarmTypes();
var j = 0;
$.each(result, function (index, AlarmTypes) {
var AlarmName = AlarmTypes.AlarmName;
var AlarmTypeId = AlarmTypes.AlarmTypeId;
//Read Last Device's Log Value
var signals = ReadLatestLogs(AlarmTypeId);
if (signals != null) {
$.each(signals, function (index, signal) {
var series1 = seri[j];
var x = (new Date(signal.DateTime)).getTime(), // current time
y = signal.Value;
series1.addPoint([x, y], true, true);
});
}
j++;
});
}, 5000);
}
}
},
title: {
text: 'Live random data'
},
xAxis: {
type: 'datetime',
tickPixelInterval: 150
//min: (new Date(GetShiftTime())).getTime()
},
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: true
},
exporting: {
enabled: true
},
series: getSeri('Online')
});
});
});


Check your condition to remove from left or not, if you need to remove call :
series1.addPoint([x, y], true, true);
else call:
series1.addPoint([x, y], true, false);

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 in js does not work in Vue.js

I have a highchart in a html file which works fine. When I moved that to vue.js project it does not work. the code in html file is as below
<html>
<head>
<title>
Chart
</title>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
</head>
<body>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
<script>
Highcharts.setOptions({
global: {
useUTC: false
}
});
const chart = new Highcharts.chart('container', {
chart: {
type: 'spline',
animation: Highcharts.svg,
marginRight: 10,
},
title: {
text: 'Live random data'
},
xAxis: {
type: 'datetime',
tickPixelInterval: null,
maxZoom: 10 * 1000
},
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: []
});
document.addEventListener('DOMContentLoaded', function() {
var i = 0;
setInterval(function () {
if (chart.series.length > 0) {
var series = chart.series[0];
var x = (new Date()).getTime(),
y = Math.random();
if (series.data.length < 20)
series.addPoint([x, y], true, false);
else
series.addPoint([x, y], true, true);
console.log(1)
}
else {
a = { name: 'aaa', data: [{x: (new Date()).getTime(), y:Math.random()}] };
chart.addSeries(a);
console.log(chart.series[0].name)
}
}, 1000);
});
</script>
</body>
</html>
and the code in vue is as below
<template>
<div class="container">
<b-row>
<b-col md="12" sm="12">
<b-card header="Line Chart">
<div class="chart-wrapper">
<vue-highcharts :options="options" :Highcharts="Highcharts" ref="lineCharts"></vue-highcharts>
</div>
</b-card>
</b-col>
</b-row>
</div>
</template>
<script>
import VueHighcharts from 'vue2-highcharts'
import Highcharts from 'highcharts'
export default {
name: 'chartSample',
components: {
VueHighcharts
},
data () {
return {
Highcharts: Highcharts,
options: {
chart: {
type: 'spline',
animation: Highcharts.svg, // don't animate in old IE
marginRight: 10
},
title: {
text: 'Live random data'
},
xAxis: {
type: 'datetime',
tickPixelInterval: null,
maxZoom: 10 * 1000
},
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: []
}
}
},
mounted () {
let chart = this.$refs.lineCharts
setInterval(function () {
if (chart.series != null) {
var series = chart.series[0]
var x = (new Date()).getTime()
var y = Math.random()
if (series.data.length < 20) {
series.addPoint([x, y], true, false)
} else {
series.addPoint([x, y], true, true)
}
} else {
var a = { name: 'aaa', data: [{x: (new Date()).getTime(), y: Math.random()}] }
chart.addSeries(a)
}
}, 1000)
}
}
</script>
I don't know what is the reason, but it doesn't work.
It seems most parts are undefined or the chart object in the page has a problem. But it is working in html file.

You can not directly access series array of Vue wrapper for Highcharts. To access internal Highcharts object call getChart method:
new Vue({
el: "#app",
name: 'chartSample',
components: {
VueHighcharts: VueHighcharts.default
},
data () {
return {
Highcharts: Highcharts,
options: {
chart: {
type: 'spline',
animation: Highcharts.svg, // don't animate in old IE
marginRight: 10
},
title: {
text: 'Live random data'
},
xAxis: {
type: 'datetime',
tickPixelInterval: null,
maxZoom: 10 * 1000
},
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: []
}
}
},
mounted () {
var chart = this.$refs.lineCharts;
setInterval(function () {
var series = chart.getChart().series[0];
if (series != null) {
var x = (new Date()).getTime()
var y = Math.random()
if (series.data.length < 20) {
series.addPoint([x, y], true, false)
} else {
series.addPoint([x, y], true, true)
}
} else {
var a = { name: 'aaa', data: [{x: (new Date()).getTime(), y: Math.random()}] }
chart.addSeries(a)
}
}, 1000)
}
})
<script src="https://cdn.jsdelivr.net/npm/vue#2.5.16/dist/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue2-highcharts#1.2.4/dist/vue-highcharts.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="app">
<div class="chart-wrapper">
<vue-highcharts :options="options" :Highcharts="Highcharts" ref="lineCharts"></vue-highcharts>
</div>
</div>

how to change the default animation from right to left for series in highcharts?

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;
}())
}]
});
});
});`

How to access any particular data in highchart tooltip?

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/

Why isn't the xAxis showing the date?

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
}

Categories