I've been working on this for hours and couldnt figure it out, I'd appreciate if anyone could help.
$(function() {
$(document).ready(function() {
Highcharts.setOptions({
global: {
useUTC: false
}
});
var chart;
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'line',
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: {
max: 400,
min: 0,
plotLines: [{
value: 200,
width: 1,
color: '#ccc',
}]
},
tooltip: {
enabled: false
},
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++) {
data.push({
x: time + i * 1000,
y: time + 4 * 50
});
}
return data;
})()}]
});
});
});
Here's what I'm trying to do:
Instead of current time on the xAxis, I like to start from 00:00 and run 5 seconds increments.
I would also like to have the Y value to have random numbers, not sure why it is not working
Last, I would like to get value from another element, and draw a horizontal line on the graph accordingly.
Thanks for looking...
1 - Keep a running counter of the seconds (i) and use setHours() to set the hours,minutes,seconds and milliseconds...the only one you'll really care about is seconds though.
var i = 0;
setInterval(function() {
var x = (new Date((new Date()).setHours(0,0,i,0)).getTime()),
y = Math.random()*400;
series.addPoint([x, y], true, true);
i++;
}, 1000);
2 - Multiply your Math.random() by something (like your max y value).
Math.random():
Returns a floating-point, pseudo-random number in the range [0, 1)
that is, from 0 (inclusive) up to but not including 1 (exclusive),
which you can then scale to your desired range.
3 - Slightly unclear on what you're looking for, would you mind specifying?
EXAMPLE
Related
So, What I have is a condition in a MySQL to show the first 1000 data points first and then the other 2000 datapoints after that in Highcharts.
if lastindex==0:
cur.execute("SELECT data,value FROM table where id<1001")
else:
cur.execute("SELECT data,value FROM table where id>1001 and id<3000")
data = cur.fetchall()
//python Code to fetch SQL data
Now what I am doing is that I am rendering that data into the Highcharts, the data is being rendered. but the problem arises that after showing the first 1000 data points, the Highcharts value starts from 0 and then shows the other 2000 points
the data is not displaying continuously as it should plot the send array data just after the end of the first data.
I think the Highcharts is being called Twice, What can I do to append the 2nd set of data to the first set without reloading the whole chart.
Here's a snip of my Highchart's js
Highcharts.chart("chartcontainer", {
chart: {
type: 'line',
animation: Highcharts.svg, // don't animate in old IE
marginRight: 10,
events: {
load: function() {
var series = this.series[0],
chart = this;
setInterval(function() {
//some logic regarding the chart
//..
v = {
y: y,
x: x
};
console.log("V value", v);
series.addSeries(v, false, true);
counter++;
localcounter++;
} else
{
oldcounter=counter;
flagToreload=1;
}
}, 1000/130);
setInterval(function() {
chart.redraw(false);
}, 100);
}
}
},
time: {
useUTC: false
},
title: {
text: 'Live random data'
},
xAxis: {
type: 'Value',
gridLineWidth: 1
},
yAxis: {
title: {
text: 'Value'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}],
gridLineWidth: 1
},
tooltip: {
headerFormat: '<b>{series.name}</b><br/>',
pointFormat: '{point.x:%Y-%m-%d %H:%M:%S}<br/>{point.y:.2f}'
},
exporting: {
enabled: false
},
series: [{
animation: false,
name: 'Random data',
data: (function() {
// generate an array of random data
var data = [],
time = counter,
i;
for (i = -1000; i <= 0; i += 1) {
data.push([
counter,
null
]);
}
return data;
}())
}]
});
What I want is just to append the event data rather than loading the whole chart.
How can I reload a particular Highchart value without reloading the whole chart ?
What do you think about updating the current series with new data, which will be an array of old data merged with the new one?
chart: {
events: {
load(){
let chart = this,
currentSeries = chart.series[0],
newData;
newData = [...currentSeries.userOptions.data, ...data1]
setTimeout(()=> {
chart.series[0].update({
data: newData
})
}, 5000)
}
}
},
See the demo
I am trying to display a set of dynamic data in a spline type chart using highcharts.
My spline type line chart has 4 series of data that needs to update through a service call. Service returns an array of data such as [0.345, 0.465, 0, 0.453] and I want to update y value of each series with the respective value in the array.
But my chart does not draw the data as expected. Even if I receive different values for y, in the chart it always displays it as 0.
This is my source code. Greatly appreciate if someone could help me figure out the issue in this or a give solution to this problem.
function drawHighChart() {
hchart = Highcharts.chart('container', {
chart: {
type: 'spline',
animation: Highcharts.svg,
marginRight: 10,
},
time: {
useUTC: false
},
title: {
text: 'Audio Analytics'
},
xAxis: {
tickInterval: 1,
},
yAxis: {
title: {
text: 'Prediction'
},
min: 0,
max: 1,
tickInterval: 0.5,
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
},
/* Initially I'm setting some hardcoded values for each series.*/
series: [{
name: 'Calm',
data: [0.43934, 0.52503, 0.57177, 0.69658, 0.97031, 0.119931, 0.137133]
}, {
name: 'Happy',
data: [0.24916, 0.24064, 0.29742, 0.0000, 0.32490, 0.0000, 0.38121]
}, {
name: 'Angry',
data: [0.11744, 0.17722, 0.16005, 0.19771, 0.20185, 0.24377, 0.32147]
}, {
name: 'Disgust',
data: [0.7988, 0.15112, null, 0.22452, 0.34400, null, 0.34227]
}],
});
}
Now when I call drawHighChart() at the windows onload this is what it outputs.
Now from here, I need to update each series dynamically as service returns a data array.
This is my function that updates the chart dynamically every time the service returns a response. Every time I call this fucntion, I pass a data array constructed from the response data.
initiVal = 7; //This is a gloabl variable that increases x-axis value from 7.
function updateHighChart(dataArray) {
var series = hchart.series[0];
var series1 = hchart.series[1];
var series2 = hchart.series[2];
var series3 = hchart.series[3];
var x = initiVal;
y = dataArray[0];
y1 = dataArray[1];
y2 = dataArray[2];
y3 = dataArray[3];
console.log("dataArray: " + dataArray);
series.addPoint([x, y], true, true);
series1.addPoint([x, y1], true, true);
series2.addPoint([x, y2], true, true);
series3.addPoint([x, y3], true, true);
initiVal++;
}
But even if data is dynamically assigned to y axis values in each series, they do not update as expected in the chart. This is how the charts looks after the 6th second/instance when data needs to dynamically update in the chart.
I have a Highchart bar graph (column type) which will show the data for each of the dates. Now it is getting the values through AJAX and date range
can be selected. Because of size limitations, I need to display the date labels in 5 day interval if the date range selected is more than 10 days.
That is all bars needs to be shown, but the interval for labels should be in 5 days interval if the date range is more than 10 days. If it is 10 days or lower, it should show all the dates.
My graph config is like the following :
var chart = new Highcharts.Chart({
credits: {
enabled: false
},
legend: {
align: 'right',
verticalAlign: 'top',
layout: 'vertical',
x: 20,
y: 10
},
chart: {
renderTo: 'id_name',
type: 'column'
},
xAxis: {
categories: dates,
crosshairs: true
},
yAxis: {
title: {
text: 'Y Axis Title'
}
},
colors: ['#1A7BB9', '#18A689', '#21B9BB', '#F7A54A', '#EC4758'],
title: {
text: 'My title goes here'
},
subtitle: {
text: 'my subtitle goes here'
},
series: PHP formatted data goes here
});
I'm not sure about the interval (every fifth label should be displayed? Or you want to compare time-range to determine that?), but in general you have two solutions:
easier one: disable dataLabels by default (series.dataLabels.enabled = false) but enable that for a specific points, for example:
series: [{
data: [{
x: timestamp_1,
y: timestamp_1,
dataLabels: {
enabled: true
}
}, [timestamp_2, value_2], [timestamp_3, value_3], ... , {
x: timestamp_N,
y: timestamp_N,
dataLabels: {
enabled: true
}
}]
}]
harder one: wrap drawDataLabels method, and remove unnecessary labels:
(function (H) {
H.wrap(H.seriesTypes.column.prototype, 'drawDataLabels', function (p) {
var step = H.pick(this.options.dataLabels.step, 0),
iterator = 0;
p.call(this);
if(step) {
H.each(this.points, function (point) {
if (point.dataLabel) {
if (iterator % step !== 0) {
point.dataLabel = point.dataLabel.destroy();
}
iterator ++;
}
});
}
});
})(Highcharts)
jsFiddle for the second solution: http://jsfiddle.net/gL2kw73b/2/
How do i set setInterval in angularjs highcharts ng line chart config settings. I am working on creating a dynamic line chart using highcharts-ng and my chart displays the initial static data and when it comes to displaying dynamic data i see that load event in scope.chartConfig4 does not get attention so my chart remains static. Here is my code snippet.
Update: I am using highcharts-ng an angular directive which does not display my dynamic map even after i corrected the timeout to interval. I am trying to convert the following code http://www.tutorialspoint.com/highcharts/highcharts_dynamic_spline.htm using angularjs . Please help.
$scope.chartConfig4 = {
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: ''
},
xAxis: {
type: 'datetime',
tickPixelInterval: 150
},
yAxis: {
title: {
text: 'Users(in thousands)'
},
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: 'Users',
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;
}())
}]
};
Update: I am using highcharts-ng an angular directive which does not display my dynamic map even after i corrected the timeout to interval. I am trying to convert the following code http://www.tutorialspoint.com/highcharts/highcharts_dynamic_spline.htm using angularjs . Please help.
setInterval takes you outside of Angular's scope, meaning that $scope.apply() is never called. You should use $interval instead so that a digest cycle is properly triggered.
$interval(function() {
var x = (new Date()).getTime(), // current time
y = Math.random();
series.addPoint([x, y], true, true);
}, 1000);
I have the following issue:
I want to dynamically update a hightstock Chart with Points from Ajax Calls. For Example i use setInterval(addPoints,3000); How can i develope the code, that the highstock Charts display an definied time, e.g. 1 Minute, and the Chart beginn to draw from the Left without this "time poping and squeezing? For a testrun i tried to you predifned null points, but the interval is not fix.
var value1="valueNo1";
var value2="valueNo2";
var color1="green";
var color2="red";
$(function () {
$('#container').highcharts('StockChart',{
chart: {
type: 'spline',
zoomtype: 'z'
},
title: {
text: 'Live random data'
},
navigator: {
top: 500
},
legend: {
enabled: true
},
rangeSelector: {
buttons: [{
count: 30,
type: 'second',
text: '30s'
}, {
count: 1,
type: 'minute',
text: '1M'
}, {
count: 2,
type: 'minute',
text: '2M'
}, {
count: 5,
type: 'minute',
text: '5M'
}, {
type: 'all',
text: 'All'
}],
inputEnabled: false,
selected: 1
},
xAxis: {
type: 'datetime'
}
});
});
var chart = $('#container').highcharts();
var ct = (new Date()).getTime();
// addAxis
chart.addAxis({ labels: { format: '{value}' , style: {color: color1 } }, title: { text: value1 , style: {color: color1} } , lineColor: color1, lineWidth: 0, opposite:true } );
chart.addAxis({ labels: { format: '{value}', style: {color: color2 } }, title: { text: value2 , style: {color: color2} } , lineColor: color2, lineWidth: 0 } );
// addSeries
chart.addSeries({ "name": "value1","data": [], yAxis: 2, marker: {enabled:true, radius: 5 }});
// addPoint
var current_time = (new Date()).getTime();
chart.series[0].addPoint([current_time+64000, null], false);
addPoints = function(){
var current_time = (new Date()).getTime();
chart.series[0].addPoint([current_time, Math.random()*10], false);
chart.redraw();
}
setInterval(addPoints,3000);
Please see jsFiddle demo of the issue :
http://jsfiddle.net/ehonk/FLzRH/1/
Please help
The "popping" is the data being added and the line connecting the last point to the new point and the yAxis re-scaling. To minimize this I would set the yAxis.max to a value that is the maximum possible. Secondly I would look at the animation and see which kind you want to use when it adds a new point.
To handle the "sqeezing" you can set your "viewable" range and your adding of points such that when you add a new point the last point on the left falls out of the viewable area.
You can also call setExtremes to set range on the xAxis.