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
Related
I have a simple Highchart with a dataset of up to 1000 datas. There are only y values the x values are generated automatically. Also, the values come from my nodejs server so please don't be surprised about the notation.
Now I want 3 special values whose x and y values are known to be highlighted. In which way doesn't matter for now.
One possibility would be to show the point at the location, otherwise they are not displayed. The problem I have is that I don't know how to control a specific point.
var chart1 = new Highcharts.Chart({
chart: {
renderTo: 'chart-emg1',
type: 'line'
},
title: {
text: 'EMG 1'
},
xAxis: {
tickInterval: 1
},
yAxis: {
title: { text: 'Voltage'}
},
series: [{
data: [<%-data1 %>]
}]
});
You can use the load event and update specific points. For example:
events: {
load: function() {
this.series[0].points.forEach(point => {
const isPointToHighlight = pointsToHighlight.some(
p => p.x === point.x && p.y === point.y
);
if (isPointToHighlight) {
point.update({
color: 'red',
marker: {
enabled: true
}
}, false);
}
});
this.redraw();
}
}
Live demo: http://jsfiddle.net/BlackLabel/tLd3j78f/
API Reference:
https://api.highcharts.com/highcharts/chart.events.load
https://api.highcharts.com/class-reference/Highcharts.Point#update
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.
1) I am wondering how I can remove the date picker from the right side of the chart? I really only need the left rangeSelector buttons i.e. 24 hours, 6 hours...
2) is there anyway to turn off the dataLabels when you click on one of the rangeSelector options as well?
When zoomed in to show 5 minutes worth of data the dataLabels are handy, but when looking at 24 hours worth they make the chart quite unusable due to crowding. It would be nice if they could be automagically turned off when I zoomed out.
Huge thanks for your help, if this is indeed possible.
For the second option, i'm looking to toggle the visibility of
plotOptions:{series: {
dataLabels:{
enabled:true,
Fiddle Link
After customization of range selector from Highstock Example
/**
* Load new data depending on the selected min and max
*/
function afterSetExtremes(e) {
var chart = Highcharts.charts[0];
chart.showLoading('Loading data from server...');
$.getJSON('https://www.highcharts.com/samples/data/from-sql.php?start=' + Math.round(e.min) +
'&end=' + Math.round(e.max) + '&callback=?', function (data) {
chart.series[0].setData(data);
chart.hideLoading();
});
}
// See source code from the JSONP handler at https://github.com/highcharts/highcharts/blob/master/samples/data/from-sql.php
$.getJSON('https://www.highcharts.com/samples/data/from-sql.php?callback=?', function (data) {
// Add a null value for the end date
data = [].concat(data, [[Date.UTC(2011, 9, 14, 19, 59), null, null, null, null]]);
// create the chart
Highcharts.stockChart('container', {
chart: {
type: 'candlestick',
zoomType: 'x'
},
navigator: {
adaptToUpdatedData: false,
series: {
data: data
}
},
scrollbar: {
liveRedraw: false
},
title: {
text: 'AAPL history by the minute from 1998 to 2011'
},
subtitle: {
text: 'Displaying 1.7 million data points in Highcharts Stock by async server loading'
},
rangeSelector: {
buttons: [{ //customization of buttons
type: 'hour',
count: 24,
text: '24h'
}, {
type: 'hour',
count: 6,
text: '6h'
}, {
type: 'minute',
count: 5,
text: '5m'
}],
inputEnabled: false, // it remove datepicker
},
xAxis: {
events: {
afterSetExtremes: afterSetExtremes,
setExtremes: function(e) {
if(typeof(e.rangeSelectorButton)!== 'undefined')
{
if(e.rangeSelectorButton.text=='5m'){
addlables(); //function to add data label
}else{
removelables(); // function to remove data lable
}
}
}
},
minRange: 300 * 1000 // 5min * 1000
},
yAxis: {
floor: 0
},
plotOptions:{
series: {
dataLabels:{
enabled:false,
}
}
},
series: [{
data: data,
dataGrouping: {
enabled: false
}
}]
});
});
function removelables(){
var chart = $('#container').highcharts();
var opt = chart.series[0].options;
opt.dataLabels.enabled = false;
chart.series[0].update(opt);
}
function addlables(){
var chart = $('#container').highcharts();
var opt = chart.series[0].options;
opt.dataLabels.enabled = true;
chart.series[0].update(opt);
}
I have a ASP.NET MVC project with SignalR.
I have a page with a HighChart and the script looks like this:
$(function () {
window.Highcharts.setOptions({
global: {
useUTC: false
}
});
var chart;
$(document).ready(function () {
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'line',
marginRight: 10
},
title: {
text: 'GMAS Queues'
},
xAxis: {
type: 'datetime',
tickInterval: 500,
labels: {
enabled: false
}
},
yAxis: {
title: {
text: 'Queue Count'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
legend: {
enabled: false
},
exporting: {
enabled: false
},
series: [{
name: 'Processing Queues'
}]
});
});
$.connection.hub.logging = true;
// Reference the auto-generated proxy for the hub.
var chartData = $.connection.processingQueuesHub;
// Create a function that the hub can call back to display messages.
chartData.client.updateQueueCounts = function (data) {
//$.each(data, function(i, item) {
// // Add the message to the page.
// $('#chartDataLog').append('<li><strong>' + htmlEncode(item.QueueName)
// + '</strong>: ' + htmlEncode(item.Length) + '</li>');
//});
// set up the updating of the chart.
var series = chart.series[0];
$.each(data, function (i, item) {
if (item.QueueName == "Queue A") {
var x = Date.parse(item.Date),
y = item.Length;
series.addPoint([x, y], true, false);
}
});
};
However, I see the graph but not the points.
The strange part is the series data points are there:
Anyone know why HighCharts is not rendering the points?
Thanks, Bill N
I have to thank my good friend and co developer for figuring this out. He is a smarter and braver man than me. :) He went to the highcharts source and found that the highcharts breaks if you add to the graph series before the initial animation is completed. The animation is why the clip-rect is zero-width (it animates from zero to full width over 1s when you first create the chart). You end up adding a point to the series before this animation even really starts. This kills the animation but it doesn’t fix the width of the clip-rect. The fix is to add animation is false for the series.
series: [{ name: 'Processing Queues', data: [], animation: false }]
It looks like you are not defining what your chart.series is until it is created. The line in your ajax is as follows and its not waiting for DOM ready:
var series = chart.series[0];
But you do not define chart until $(document).ready(function () {.... Try keeping your chart object in scope of your ajax.
I have some difficulties displaying a graph with Highstock. It seems like I can't have access to the x-axis part where the graph should be displayed. I am new with Highstocks so my code could seem like a mess but my idea was the following:
First access the json file from the server. Convert it in the right format [[datestamp, value], ....]. Then display the graph.
Here is my Json file (file.json):
[{"date":"2013-10-04T22:31:12.000Z","value":30000},{"date":"2013-10-04T22:31:58.000Z","value":35000},{"date":"2013-10-04T22:32:05.000Z","value":60000},{"date":"2013-10-04T22:32:12.000Z","value":45000}]
My code is the following:
$(function() {
chartOjb = new Object();
var mydata = [];
$.getJSON('file.json', function(data) {
$.each(data, function (index, item) {
chartOjb.name = getTimestamp(item.date);
chartOjb.data = item.value;
mydata.push({ x: chartOjb.name, y: parseFloat(chartOjb.data) });
});
$('#container').highcharts('StockChart', {
chart: {
type: 'candlestick',
zoomType: 'x'
},
navigator: {
adaptToUpdatedData: false,
series: {
data: mydata
}
},
scrollbar: {
liveRedraw: false
},
xAxis: {
type: 'datetime',
title: 'Time',
//minRange: 3600 * 1000/15 // one hour
},
rangeSelector : {
selected : 1
},
title : {
text : value
},
series : [{
name : 'Capacité',
data : data,
tooltip: {
valueDecimals: 2
}
}] }); });
});
Thank you very much for your help
Could you add your function getTimestamp()? Maybe there is something wrong.
Keep in mind that:
x-value should be timestamp,
when using a lot of objects { x: x, y: y }, set turboThreshold