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
Related
The problem is , i am getting Uncaught TypeError: Cannot set property 'index' of null(…) at highcharts.js:281
here is the request data!
var chart;
function requestData() {
$.ajax({
url: '/kwInst',
success: function(point) {
var series = chart.series[0],
shift = series.data.length > 120; // shift if the series is
// longer than 20
console.log(point);
// add the point
var pointx=point.instKW;
chart.series[0].addPoint(eval(pointx), true, shift);
// call it again after one second
setTimeout(requestData, 1000);
},
cache: false
});
}
And here is the main function.. I am really not sure what is pushing the error. Tried giving manual values and it worked.
$(document).ready(function() {
$.getJSON('/kwStream', function (data) {
chart = new Highcharts.chart('container', {
chart: {
zoomType: 'x',
events: {
load: function() {
chart = this; // `this` is the reference to the chart
requestData();
}
}
},
title: {
text: 'KW Usage'
},
subtitle: {
text: document.ontouchstart === undefined ?
'Click and drag in the plot area to zoom in' : 'Pinch the chart to zoom in'
},
xAxis: {
type: 'datetime'
},
yAxis: {
title: {
text: 'Kilowatt'
}
},
legend: {
enabled: false
},
plotOptions: {
area: {
fillColor: {
linearGradient: {
x1: 0,
y1: 0,
x2: 0,
y2: 1
},
stops: [
[0, Highcharts.getOptions().colors[0]],
[1, Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0).get('rgba')]
]
},
marker: {
radius: 2
},
lineWidth: 1,
states: {
hover: {
lineWidth: 1
}
},
threshold: null
}
},
series: [{
type: 'area',
name: 'KW',
data: data.KW
}]
});
console.log(JSON.stringify(data.KW));
});
});
Relevant code is here: http://jsfiddle.net/e0qxfLtt/5/
$(function drawCharts() {
var chartData = [100,120,120,140,110,110];
var index = 1;
$('#b').click(function(){
var buttonB = document.getElementById('b');
buttonB.disabled = true;
if(index < chartData.length){
var x = index, // current time
y = chartData[index];
$('#container').highcharts().series[0].setData([chartData[index - 1], chartData[index]]);
setTimeout(function(){$('#container').highcharts().series[0].setData([]);}, 1000);
setTimeout(function(){
if(index === 1){
$('#container1').highcharts().series[0].addPoint([0,chartData[0]]);
}
$('#container1').highcharts().series[0].addPoint([x,y]);
index++;
}, 1000);
}
setTimeout(function(){buttonB.disabled = false;}, 3000);
})
$(document).ready(function () {
var chart1 = new Highcharts.Chart({
chart: {
renderTo: 'container1',
type: 'line',
animation: Highcharts.svg, // don't animate in old IE
marginRight: 10,
events: {
load: function () {
series = this.series[0];
},
}
},
title: {
text: ''
},
xAxis: {
title: {
text: ''
},
gridLineWidth: 1,
startOnTick: true,
tickPixelInterval: 40,
min:0,
max:10
},
yAxis: {
title: {
text: ''
},
min:0,
max:200
},
plotOptions: {
line: {
marker: {
enabled: false
}
},
series: {
animation: {
duration: 1000
}
}
},
tooltip: {
formatter: function () {
return Highcharts.numberFormat(this.y, 2);
}
},
legend: {
enabled: false
},
exporting: {
enabled: false
},
credits:{
enabled:false
},
series: [{
name: '',
data: []
}]
});
var chart2 = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'line',
animation: Highcharts.svg, // don't animate in old IE
marginRight: 10,
events: {
load: function () {
series = this.series[0];
},
}
},
title: {
text: ''
},
xAxis: {
title: {
text: ''
},
gridLineWidth: 1,
startOnTick: true,
tickPixelInterval: 80,
categories: ['a', 'b'],
min: 0,
max: 1
},
yAxis: {
title: {
text: ''
},
min:0,
max:200
},
plotOptions: {
line: {
marker: {
enabled: false
}
},
series: {
animation: {
duration: 2000
}
}
},
tooltip: {
formatter: function () {
return Highcharts.numberFormat(this.y, 2);
}
},
legend: {
enabled: false
},
exporting: {
enabled: false
},
credits:{
enabled:false
},
series: [{
name: '',
data: []
}]
});
});
});
I would like the chart on the left to animate over a duration of 2 seconds, and used this code for the purpose:
plotOptions: {
series: {
animation: {
duration: 2000
}
}
}
However, that chart seems to animate over an instant despite the setting.
Could it due to the setTimeout functions?
If so, is there any way around that?
I've been working this for past 4 days but still can figure out how to solve this issue:
The data in the database changes every 5 minutes.
I want to display the data in a new chart without refreshing the whole page.
CODE:
$(function () {
$(document).ready(function() {
$.getJSON("test2.php", function(json) {
Highcharts.setOptions({
global: {
useUTC: false
}
});
$('#container').highcharts({
renderTo: 'container',
defaultSeriesType: 'spline',
chart: {
type: 'area',
},
title: {
text: 'Transaction Count'
},
subtitle: {
text: '5 Minutes Count'
},
exporting: {
enabled: false
},
xAxis: {
categories:json,
title:{
text: 'Time Of The Day',
style: {
color: '#666666',
fontSize: '12px',
fontWeight: 'normal'
}
},
tickInterval: 4,
type: 'datetime',
labels: {
style: {
fontFamily: 'Tahoma'
},
}
},
yAxis: {
title: {
text: 'Number Of Transaction'
},
labels: {
formatter: function () {
return this.value;
}
}
},
tooltip: {
pointFormat: '{series.name}: <b>{point.y:,.0f}</b>'
},
plotOptions: {
column: {colorByPoint: true},
area: {
marker: {
enabled: false,
symbol: 'circle',
radius: 5,
states: {
hover: {
enabled: true
}
}
}
}
},
colors: [
'green', //Buy
'#4572A7' //Paid
],
series: json
});
});
});
});
You can change the dataset, like this :
$('#container').highcharts().series[0].setData([129.2,144.0,...], false);
You can redraw, like this :
$('#container').highcharts().redraw();
So, what you need to do, is create a function that (1) first gets the data from the server, (2) then updates the data and (3) then redraws, like this :
var updateChart = function() {
$.getJSON('test2.json', function(data) {
var chart = $('#container').highcharts();
$.each(data, function(pos, serie) {
chart.series[pos].setData(serie, false);
});
chart.redraw();
});
}
To repeat this every 5 minutes, you can use setInterval, like this :
setInterval(function() {
$.getJSON('test2.json', function(data) {
var chart = $('#container').highcharts();
$.each(data, function(pos, serie) {
chart.series[pos].setData(serie, false);
});
chart.redraw();
});
}, 300000);
Instead of putting your Highchart script in the document.ready function, you can create a funcion getHighchart and put the code about into it. and depend on how many seconds you want the code to readload as below, but you have to be referencing the jquery js.
$(function () {
setInterval(getHighChart, 30000); //30 seconds onload="getHighChart()"
});
function getHighChart() {
//to containe you script for loading the chart
}
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);
...
}
I am having a list name aaa. It is an list of list
aaa[0] = [[{'a',1},{'b',2}]
aaa[1] = [[{'q',2},{'bd',0}]
aaa[2] = [[{'sa',3},{'bs',6}]
aaa[2] = [[{'sa',5},{'vb',8}]
I got the response from the model
Now I need to populate this value into Chart
My Chart will contain four lines for aaa[0] ,aaa[1] ,aaa[2] ,aaa[3]
Here is my High Chart Code
<script>
$(document).ready(function () {
//Default time zone
moment.tz.setDefault("America/New_York");
// Global option to disable UTC time usage
Highcharts.setOptions({
global: {
useUTC: false
}
});
// Chart configurations
var options = {
chart: {
renderTo: 'container2',
type: 'area',
marginRight: 45,
zoomType: 'x'
},
title: {
text: 'aaaa'
},
xAxis: {
type: 'datetime',
minRange: 8 * 24 * 3600000,
labels: {
format: '{value:%m-%d-%Y}',
rotation: 45
}
},
yAxis: {
title: {
text: 'count'
},
labels: {
formatter: function () {
return this.value;
}
}
},
plotOptions: {
area: {
marker: {
enabled: true,
symbol: 'circle',
radius: 2,
states: {
hover: {
enabled: true
}
}
},
lineWidth: 1,
threshold: null
}
},
series: [{
fillOpacity: 0.1,
name: 'aaa',
pointInterval: 24 * 3600 * 1000,
pointStart: 1375295400000,
data: GetPercentage()
}]
};
// Rendering the Highcharts
chart = new Highcharts.Chart(options);
function GetPercentage() {
var data = #Html.Raw(JsonConvert.SerializeObject(Model.aaa));
// alert(data)
#foreach(var val in Model.aaa) //loop of getting a list from aaa
{
var percentages = [];
for (var x = 0; x < #val.Count; x++)
{
//Here I need to push the list
}
//percentages.sort(SortByDate);
// return percentages;
}
}
//Sort the array based on first array element
function SortByDate(a,b){
//alert(a[0] +" - " +b[0]);
return (a[0] - b[0]);
}
//Timeout function to reload page on everyone hour
setTimeout(function () {
location.reload(true);
}, 60* 60 * 1000);
//Progress bar to display feed delivery percentage
$('.progress .progress-bar').progressbar({
transition_delay: 500,
display_text: 'fill',
refresh_speed: 500
});
});
</script>
Could anyone help me to diplay a chart with four lines ?
Thanks in advance
Here you can see the series is an object array
$(function () {
$('#container').highcharts({
chart: {
type: 'bar'
},
title: {
text: 'Fruit Consumption'
},
xAxis: {
categories: ['Apples', 'Bananas', 'Oranges']
},
yAxis: {
title: {
text: 'Fruit eaten'
}
},
series: [{
name: 'Jane',
data: [1, 0, 4]
}, {
name: 'John',
data: [5, 7, 3]
}]
});
});
You should add more objects into series array to create more than one line.