We are using Spline Graph for our game in which we are facing issue with x and y axis value which we need to put 0,0 and save the values from initially till end as we need to all plotting from start till end of the value.
Check Live Demo Here
JavaScript Code
<script>
var a = 1;
var b = 1;
var factor = 1.2;
$(document).ready(function () {
Highcharts.chart('container', {
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 () {
b = b*1.2;
console.log(b);
var x = a; // current time
var y = b;
a++;
series.addPoint([x, y], true, true);
}, 700);
}
}
},
title: {
text: 'Live random data'
},
xAxis: {
type: 'number',
min: 0,
tickInterval: 2
},
yAxis: {
title: {
text: 'Value'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
tooltip: {
formatter: function () {
return '<b>X: ' + this.x+', Y:'+this.y;
}
},
legend: {
enabled: false
},
exporting: {
enabled: false
},
series: [{
name: 'Random data',
data: (function () {
// generate an array of random data
var data = [],i;
for (i = 1; i <= 19; i++) {
b = b*factor;
data.push({
x: a,
y: b
});
a++;
}
return data;
}())
}]
});
});
The following code draws a curve line from the origin (0,0) to the end point which gets updated on the interval. You needed to make the shift variable false in the addPoint call. Higchart docs
$(document).ready(function () {
var a = 1;
var b = 1;
var factor = 1.2;
Highcharts.chart('container', {
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 () {
b = b*1.2;
var x = a; // current time
var y = b;
a++;
// Add new end point
series.addPoint([x, y], true, false);
}, 700);
}
}
},
title: {
text: 'Live random data'
},
xAxis: {
type: 'number',
min: 0,
tickInterval: 2
},
yAxis: {
title: {
text: 'Value'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
tooltip: {
formatter: function () {
return '<b>X: ' + this.x+', Y:'+this.y;
}
},
legend: {
enabled: false
},
exporting: {
enabled: false
},
series: [{
name: 'Random data',
data: (function () {
// generate an array of random data
// Add point at origin and last point of series
var data = [{x:0,y:0}],i;
for (i = 1; i <= 19; i++) {
b = b*factor;
a++
data.push({
x: a,
y: b
});
}
return data;
}())
}]
});
});
Updated JsFiddle
Related
So I have a project where I am trying to update chart. in which 100 points to be displayed in each second.
For that I am trying this example from the Highcharts.
But the chart stops responding to such event.
The code:
jsfiddle
Highcharts.chart('container', {
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);
}, 10);
}
}
},
time: {
useUTC: false
},
title: {
text: 'Live random data'
},
xAxis: {
type: 'datetime',
tickPixelInterval: 150
},
yAxis: {
title: {
text: 'Value'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
tooltip: {
headerFormat: '<b>{series.name}</b><br/>',
pointFormat: '{point.x:%Y-%m-%d %H:%M:%S}<br/>{point.y:.2f}'
},
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;
}())
}]
});
You can set redraw parameter in addPoint method to false and call chart.redraw() at longer intervals:
chart: {
...,
events: {
load: function() {
// set up the updating of the chart each second
var series = this.series[0],
chart = this;
setInterval(function() {
var x = (new Date()).getTime(), // current time
y = Math.random();
series.addPoint([x, y], false, true);
}, 10);
setInterval(function() {
chart.redraw();
}, 500);
}
}
}
Live demo: https://jsfiddle.net/BlackLabel/s3gh6q5j/
API Reference:
https://api.highcharts.com/class-reference/Highcharts.Series#addPoint
https://api.highcharts.com/class-reference/Highcharts.Chart#redraw
In the combination of series with and without dynamic data,the series with dynamic data can be easily shifted but where as the other series which are not dynamic do not get shifted out completely.
I have reproduced the issue in the following link: https://jsfiddle.net/8uxepk21/
Here as you can see there are two series. The series with static data appears to be shifting but if you increase the size of the rang-selector,then the series with static data do not get shifted out of the chart completely but still stays unlike the other series.
Is there any option to shift data explicitly without using series.addpoint() method.
I have used series.data[0].remove() and it obviously works fine but when a new data has to arrive for the same series after some time,this remove() method would remove the arriving point aswell. Further if I provide any condition for the maximum points to be in series while shifting,even then it will cause performance issue.
EXPECTED RESULT: Both the series data have to be shifted completely irrespective of the data being static or dynamic.
// Create the chart
Highcharts.stockChart('container', {
chart: {
events: {
load: function () {
// set up the updating of the chart each second
var series1 = this.series[0];
setInterval(function () {
var x = (new Date()).getTime(), // current time
y = Math.round(Math.random() * 100);
series1.addPoint([x, y], true, true);
}, 2000);
var series2 = this.series[1];
//setInterval(function () {
//var x = (new Date()).getTime(), // current time
// y = Math.round(Math.random() * 50);
//series2.addPoint([x, y], true, true);
//}, 2000);
}
}
},
time: {
useUTC: false
},
rangeSelector: {
buttons: [{
count: 1,
type: 'minute',
text: '1M'
}, {
count: 5,
type: 'minute',
text: '5M'
}, {
type: 'all',
text: 'All'
}],
inputEnabled: false,
selected: 0
},
title: {
text: 'Live random data'
},
exporting: {
enabled: false
},
legend: {
enabled: true
},
plotOptions: {
series: {
marker: {
states: {
hover: {
enabled: true,
animation: {duration: 100},
enableMouseTracking: true,
stickyTracking: true
}
}
}
}
},
tooltip:{
shared: true,
split: false,
stickyTracking: true,
enableMouseTracking: true,
enabled: true,
followPointer: true,
followTouchMove: true,
formatter: function(){
var tooltip = "";
var phaseNameList = "";
//tooltip += "<b>I-unit "+ "<br/>"+ "x: "+this.x +"</b>";
tooltip += "<b>I-unit "+ "<br/>"+ "x: "+ new Date(this.x)+
"</b>";
tooltip += "<br/>"+ "y: "+this.y +"</b>";
tooltip += "<br/>"+ this + "</b>";
return tooltip;
}
},
series: [{
name: 'Random data1',
data: (function () {
// generate an array of random data
var data = [],
time = (new Date()).getTime(),
i;
for (i = -90; i <= 0; i += 1) {
data.push([
time + i * 1000,
Math.round(Math.random() * 100)
]);
}
return data;
}())
},
{
name: 'Random data2',
data: (function () {
// generate an array of random data
var data = [],
time = (new Date()).getTime(),
i;
for (i = -90; i <= 0; i += 1) {
data.push([
time + i * 1000,
Math.round(Math.random() * 50)
]);
}
return data;
}())
}]
});
<script src="https://code.highcharts.com/stock/highstock.js"></script>
<script src="https://code.highcharts.com/stock/modules/exporting.js"></script>
<script src="https://code.highcharts.com/stock/modules/export-data.js"></script>
<div id="container" style="height: 400px; min-width: 310px"></div>
To achieve it you can add points with null values to the second series. Check the code and demo posted below.
Code:
chart: {
events: {
load: function() {
var chart = this,
series1 = chart.series[0],
series2 = chart.series[1],
x, y;
setInterval(function() {
x = (new Date()).getTime();
y = Math.round(Math.random() * 100);
series1.addPoint([x, y], false, true);
series2.addPoint([x, null], false, true);
chart.redraw();
}, 2000);
}
}
}
Demo:
https://jsfiddle.net/BlackLabel/6vp5cbt8/
Having a problem with high-chart trying to get it to use multiple series, it get half way then stops recognising the data.
I don't get why it starts okay in the debugger, then fails when i is around 6 or 7.
Here's the code
function buildAndUpdateTempChart() {
$.getJSON('server/getReadings.php', function (data) {
$('#chartContainer').highcharts('StockChart', {
chart:{
events: {
load: function(){
// set up the updating of the chart each second
//debugger;
var series = this.series[0];
//console.log('data is: ' + data);
for(var i = 0; i < data.length - 1; i++){
this.series[0].addPoint(data[i].temp, data[i].timestamp, true, true);
this.series[1].addPoint(data[i].aTemp, data[i].timestamp, true, true);
}
// setInterval(function () {
// //get tick
// var x = (new Date()).getTime(), // current time
// y = Math.round(Math.random() * 100);
// series.addPoint([x, y], true, true);
// }, 1000);
}
}
},
rangeSelector: {
selected: 1
},
title: {
text: 'Temperature Sensor Readings'
},
yAxis: {
title: {
text: 'Degrees Celcius'
},
plotLines: [{
value: 10,
color: 'green',
dashStyle: 'shortdash',
width: 2,
label: {
text: 'Minimum tolerated.'
}
}, {
value: 100,
color: 'red',
dashStyle: 'shortdash',
width: 2,
label: {
text: 'Maximum tolerated.'
}
}]},
series: [{
name: 'Temp',
data: data,
tooltip: {
valueDecimals: 2
},
name: 'Ambient Temp',
data: data,
tooltip: {
valueDecimals: 2
},
}]
});
})
}
$(document).ready(function(){
buildAndUpdateTempChart(); //this is async so there rest of the app can continue to work
});
Not sure why because I have done it in the past, but I have a Highcharts bar chart and it won't animate. This is the declaration of the chart,
function initializeData() {
$http.get(url).success(function(ret) {
$scope.jsondata = ret;
var newdata = [];
for (x = 0; x < 5; x++) {
newdata.push({
name: setName($scope.jsondata[x].name),
y: $scope.jsondata[x].data[0],
color: getColor($scope.jsondata[x].data[0])
});
}
$scope.chart.series[0].setData(newdata);
});
mainInterval = $interval(updateData, 5000);
}
function updateData() {
$http.get(url).success(function(ret) {
$scope.jsondata = ret;
console.debug("here");
for (x = 0; x < 5; x++) {
$scope.chart.series[0].data[x].update({
y: $scope.jsondata[x].data[0],
color: getColor($scope.jsondata[x].data[0])
});
}
});
}
$scope.chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'bar',
animation: true,
events: {
load: initializeData
}
},
title: {
text: ''
},
xAxis: {
type: 'category',
labels: {
style: {
fontSize: '11px'
}
}
},
yAxis: {
min: 0,
max: 100,
title: {
text: 'Total Score',
align: 'high'
}
},
legend: {
enabled: false
},
tooltip: {
pointFormat: 'Total Score <b>{point.y:.3f}</b>'
},
series: [{
name: 'Active Users',
data: [],
dataLabels: {
enabled: true,
rotation: 30,
style: {
fontSize: '10px',
fontFamily: 'Verdana, sans-serif'
},
format: '{point.y:.3f}', // one decimal
}
}]
});
And as you can see I have animate : true, so I am not sure what is the problem here. I have this older plunker where all of the data is in separate series, but it animates fine. But this is the plunker I am working on and having trouble with. They are like identical basically. In the newer one I broke out the initialization of data into its own method, but that is the only real main difference.
Some edits:
So as I was saying, I have done things this way with an areaspline chart (I know it was said they work a bit different but they are set up identically).
function initializeData() {
$interval.cancel(mainInterval);
$scope.previousPackets = '';
$http.get("https://api.myjson.com/bins/nodx").success(function(returnedData) {
var newdata = [];
var x = (new Date()).getTime();
for (var step = 9; step >= 0; step--) {
newdata.push([x - 1000 * step, 0]);
}
$scope.chart.series[0].setData(newdata);
});
mainInterval = $interval(updateData, 2000);
}
function updateData() {
$http.get(url + acronym + '/latest').success(function(returnedData) {
var x = (new Date()).getTime();
if ($scope.previousPackets != returnedData[0].numPackets) {
$scope.chart.series[0].addPoint([x, returnedData[0].numPackets], true, true);
$scope.previousPackets = returnedData[0].numPackets;
} else {
$scope.chart.series[0].addPoint([x, 0], true, true);
}
});
}
$scope.chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'areaspline',
animation: Highcharts.svg, // don't animate in old IE
marginRight: 10,
events: {
load: initializeData
}
},
title: {
text: ''
},
xAxis: {
type: 'datetime',
tickPixelInterval: 150
},
yAxis: {
title: {
text: 'Packets'
},
plotLines: [{
value: 0,
width: 1,
color: '#d9534f'
}]
},
tooltip: {
formatter: function() {
return Highcharts.numberFormat(this.y) + ' packets<b> | </b>' + Highcharts.dateFormat('%H:%M:%S', this.x);
}
},
legend: {
enabled: false
},
exporting: {
enabled: false
},
series: [{
name: 'Packets',
data: []
}]
});
I also updated the first chunk of code with the initializeData() method and updateData() method which are seemingly identical in both different charts.
It looks like it plays an important role if you provide your data at chart initialization or after. For simplicity I refactored your code a little
function initializeChart(initialData, onload) {
$scope.chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'bar',
animation: true,
events: {
load: onload
}
....
series: [{
name: 'Active Users',
data: initialData,
dataLabels: {
enabled: true,
format: '{point.y:.3f}', // one decimal
}
}]
});
}
function getData(callback) {
$http.get(url).success(function(ret) {
$scope.jsondata = ret;
var newdata = [];
for (x = 0; x < 5; x++) {
newdata.push([setName(ret[x].name), ret[x].data]);
}
callback(newdata);
});
}
As a result your two planks are in essense reduced to two methods below. The first initializes chart with preloaded data and the second updates data in existing chart.
function readDataFirst() {
getData(function(newdata) {
initializeChart(newdata);
});
}
function initializeChartFirst() {
initializeChart([], function() {
getData(function(newdata) {
$scope.chart.series[0].setData(newdata);
})
});
}
The first one animates fine while the second does not. It looks like highcharts skips animation if dataset is not initial and is treated incompatible.
However if you really want to have animation in your current plant (chart first workflow) you can achieve that by initializing first serie with zeros and then with the real data. This case it will be treated as update
function forceAnimationByDoubleInitialization() {
getData(function(newdata) {
initializeChart([]);
var zerodata = newdata.map(function(item) {
return [item[0], 0]
});
$scope.chart.series[0].setData(zerodata);
$scope.chart.series[0].setData(newdata);
});
All these options are available at http://plnkr.co/edit/pZhBJoV7PmjDNRNOj2Uc
I want to use Highcharts graph and update y axis dynamically. Actually I want to update nsw, Tas, ACT every 5 sec. How do I do it ?
Here is my code.
$(function () {
$('#container').highcharts({
title: {
text: 'Histogram',
x: -20 // center
},
subtitle: {
text: 'Source: www.trove.com',
x: -20
},
xAxis: {
categories: ['NSW', 'Tas', 'ACT','QLD','VIC','SA','WA']
},
yAxis: {
title: {
text: 'Hits'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
tooltip: {
valueSuffix: '°C'
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle',
borderWidth: 0
},
series: [{
name: 'States',
data: [nsw, Tas, ACT,qld,vic,sa,wa]
}]
});
});
});
In the Documentation you can find an example from Highcharts in jsfiddle. Check it out http://jsfiddle.net/gh/get/jquery/1.9.1/highslide-software/highcharts.com/tree/master/samples/highcharts/demo/dynamic-update/. In the example every second a new point will be added. Here comes the relevant code part:
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);
}
}
},
`
The easiest way to do it would be to use the javascript function "setInterval()" to call it.
Here is a link where you can find a way to do it :
http://www.w3schools.com/js/js_timing.asp
If you are not really good at javascript, you might need this declaration of functions : var functionName = function() {} vs function functionName() {}
Use:
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(),
l = series.data.length;
for(var i = 0; i < l; i++) {
series.data[i].update({
y: getHits(i) // or something else
});
}
}, 5000); // 5 seconds
}
}
Where index is index (count from 0) of nsw/Tas/ACT in data array. (for nsw = 0, for Tas = 1 etc.)