admin管理员组文章数量:1026989
my task is to add multiple series dynamically and update series data dynamically. my data is loaded with ajax request.
i have used the logic given on highcharts side to update the data dynamically. but addpoint is not adding points to series dont know why, when i checked the series object, it has data but dirtyfiled is set to true (dont know the reason)
code given below is used to load data dynamically. here problem is add point, it is not adding data to graph. series object is showing isDirty :true isDirtyData:true.
i think this isDirty has something to deal with. please help me out. facing this problem for quite a long time .
from_date=new Date().getTime()-60000;
function requestData ()
{
console.log("into request data")
console.log(TypeOfParameter,sub_type,sub_type_parameter,hostname,from_date)
$.ajax({
url:serverUrl+'/api/fetch_params/',
type:'GET',
data:{'type':TypeOfParameter,'sub-type':sub_type,'hostname':hostname,'param':sub_type_parameter,'from-date':from_date},
success:function(response)
{
console.log("into success")
var id=sub_type+sub_type_parameter
var series = chart.get(id)
shift = series.data.length > 150; // shift if the series is longer than 300 (drop oldest point)
console.log(shift)
response= $.parseJSON(response)
var x=sub_type;
all_data=response.response.data[x]
itemdata=[]//
console.log(all_data.length)
//console.log(new Date(all_data[all_data.length-1][0]),'latest timestamp')
from_date=all_data[all_data.length-1][0]
// series.addPoint(all_data,false,shift);
console.log("series name:",series.data.length,series.name)
for (var i = 0; i < all_data.length; i++)
{
console.log(all_data[i][0],all_data[i][1]);
series.addPoint({ x: all_data[i][0],y: all_data[i][1],id: i},false,shift);
}
console.log(series,"object")
console.log("hey",series.data.length)
console.log("hey",series.data.length )
console.log(series.data)
console.log("out of success")
//chart.redraw();
setTimeout(requestData, 60000);
},
cache:false,
error:function()
{
console.log("err")
}
});
console.log("out of request ")
}
below functin is used to draw highchart,here onload event is used to load data dynamically.
$(function (
) {
console.log("into highcharts")
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
defaultSeriesType: 'spline',
events: {
load: requestData
}
},
title: {
text: 'cpu Usage'
},
xAxis: {
type: 'datetime',
tickPixelInterval: 150,
maxZoom: 20 * 1000
},
yAxis: {
minPadding: 0.2,
maxPadding: 0.2,
title: {
text: 'Value',
margin: 80
}
},
series: [{
id:sub_type+sub_type_parameter,
name: 'CPU',
data: []
}]
});;
console.log("out of highcharts")
});
chart = $('#container').highcharts();
this is the code to add axis dynamically.
var flag=true
if(TypeOfParameter=='cpu'&&flag)
{
console.log("entering into cpu",sub_type,flag)
// all_data = response.response.data[sub_type]
// itemdata=[]
// for(i in all_data)
// {
// itemdata.push(all_data[i][1])
// }
// console.log(itemdata[0])
// console.log("Drawing trend")
chart.addAxis({ // Primary yAxis
id:'Cpu_axis'+sub_type_parameter,
labels: {
formatter: function() {
return this.value;
},
style: {
color: '#89A54E'
}
},
title: {
text: "core "+ sub_type+ " "+sub_type_parameter,
style: {
color: '#89A54E'
}
},
lineWidth: 1,
lineColor: '#08F'
});
chart.addSeries({
id:sub_type+sub_type_parameter,
name: "core "+sub_type+" "+sub_type_parameter,
data:[],
tooltip: {
valueSuffix: ' q %'
},
yAxis:'Cpu_axis'+sub_type_parameter
})
//chart.redraw();
flag=false
console.log("returning from cpu")
}
my task is to add multiple series dynamically and update series data dynamically. my data is loaded with ajax request.
i have used the logic given on highcharts side to update the data dynamically. but addpoint is not adding points to series dont know why, when i checked the series object, it has data but dirtyfiled is set to true (dont know the reason)
code given below is used to load data dynamically. here problem is add point, it is not adding data to graph. series object is showing isDirty :true isDirtyData:true.
i think this isDirty has something to deal with. please help me out. facing this problem for quite a long time .
from_date=new Date().getTime()-60000;
function requestData ()
{
console.log("into request data")
console.log(TypeOfParameter,sub_type,sub_type_parameter,hostname,from_date)
$.ajax({
url:serverUrl+'/api/fetch_params/',
type:'GET',
data:{'type':TypeOfParameter,'sub-type':sub_type,'hostname':hostname,'param':sub_type_parameter,'from-date':from_date},
success:function(response)
{
console.log("into success")
var id=sub_type+sub_type_parameter
var series = chart.get(id)
shift = series.data.length > 150; // shift if the series is longer than 300 (drop oldest point)
console.log(shift)
response= $.parseJSON(response)
var x=sub_type;
all_data=response.response.data[x]
itemdata=[]//
console.log(all_data.length)
//console.log(new Date(all_data[all_data.length-1][0]),'latest timestamp')
from_date=all_data[all_data.length-1][0]
// series.addPoint(all_data,false,shift);
console.log("series name:",series.data.length,series.name)
for (var i = 0; i < all_data.length; i++)
{
console.log(all_data[i][0],all_data[i][1]);
series.addPoint({ x: all_data[i][0],y: all_data[i][1],id: i},false,shift);
}
console.log(series,"object")
console.log("hey",series.data.length)
console.log("hey",series.data.length )
console.log(series.data)
console.log("out of success")
//chart.redraw();
setTimeout(requestData, 60000);
},
cache:false,
error:function()
{
console.log("err")
}
});
console.log("out of request ")
}
below functin is used to draw highchart,here onload event is used to load data dynamically.
$(function (
) {
console.log("into highcharts")
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
defaultSeriesType: 'spline',
events: {
load: requestData
}
},
title: {
text: 'cpu Usage'
},
xAxis: {
type: 'datetime',
tickPixelInterval: 150,
maxZoom: 20 * 1000
},
yAxis: {
minPadding: 0.2,
maxPadding: 0.2,
title: {
text: 'Value',
margin: 80
}
},
series: [{
id:sub_type+sub_type_parameter,
name: 'CPU',
data: []
}]
});;
console.log("out of highcharts")
});
chart = $('#container').highcharts();
this is the code to add axis dynamically.
var flag=true
if(TypeOfParameter=='cpu'&&flag)
{
console.log("entering into cpu",sub_type,flag)
// all_data = response.response.data[sub_type]
// itemdata=[]
// for(i in all_data)
// {
// itemdata.push(all_data[i][1])
// }
// console.log(itemdata[0])
// console.log("Drawing trend")
chart.addAxis({ // Primary yAxis
id:'Cpu_axis'+sub_type_parameter,
labels: {
formatter: function() {
return this.value;
},
style: {
color: '#89A54E'
}
},
title: {
text: "core "+ sub_type+ " "+sub_type_parameter,
style: {
color: '#89A54E'
}
},
lineWidth: 1,
lineColor: '#08F'
});
chart.addSeries({
id:sub_type+sub_type_parameter,
name: "core "+sub_type+" "+sub_type_parameter,
data:[],
tooltip: {
valueSuffix: ' q %'
},
yAxis:'Cpu_axis'+sub_type_parameter
})
//chart.redraw();
flag=false
console.log("returning from cpu")
}
- did you found any solution ? I'm also having same issue, points are added sometimes, but most times blank candles appear. jsfiddle/nitincool4urchat/3v61f8v7/12 – coding_idiot Commented Nov 12, 2014 at 17:07
2 Answers
Reset to default 1I can see it is old question of 2013 year. But there are my thoughts for other guys that look for the answer on this question now.
There is highcharts.js bug https://github./highcharts/highcharts/issues/3452. In short the bug description is: when point is added with addPoint() method to chart series then this new point doesn't appear in someSerie.data array.
I propose following workaround for this issue "new points aren't present in someSerie.data array" :
// after adding new point with addPoint() method
let min = chart.xAxis[0].getExtremes().min;
let max = chart.xAxis[0].getExtremes().max;
chart.zoomOut();
chart.xAxis[0].setExtremes(min, max);
After that following check :
if(series.data.length) {
chart.redraw();
}
should work OK.
Well, it's about how you are using addPoint() function:
series.addPoint({ x: all_data[i][0],y: all_data[i][1],id: i},false,shift);
You have set redraw = false, so it won't redraw chart. Set it to true, and will work.
More about: http://api.highcharts./highcharts#Series.addPoint()
my task is to add multiple series dynamically and update series data dynamically. my data is loaded with ajax request.
i have used the logic given on highcharts side to update the data dynamically. but addpoint is not adding points to series dont know why, when i checked the series object, it has data but dirtyfiled is set to true (dont know the reason)
code given below is used to load data dynamically. here problem is add point, it is not adding data to graph. series object is showing isDirty :true isDirtyData:true.
i think this isDirty has something to deal with. please help me out. facing this problem for quite a long time .
from_date=new Date().getTime()-60000;
function requestData ()
{
console.log("into request data")
console.log(TypeOfParameter,sub_type,sub_type_parameter,hostname,from_date)
$.ajax({
url:serverUrl+'/api/fetch_params/',
type:'GET',
data:{'type':TypeOfParameter,'sub-type':sub_type,'hostname':hostname,'param':sub_type_parameter,'from-date':from_date},
success:function(response)
{
console.log("into success")
var id=sub_type+sub_type_parameter
var series = chart.get(id)
shift = series.data.length > 150; // shift if the series is longer than 300 (drop oldest point)
console.log(shift)
response= $.parseJSON(response)
var x=sub_type;
all_data=response.response.data[x]
itemdata=[]//
console.log(all_data.length)
//console.log(new Date(all_data[all_data.length-1][0]),'latest timestamp')
from_date=all_data[all_data.length-1][0]
// series.addPoint(all_data,false,shift);
console.log("series name:",series.data.length,series.name)
for (var i = 0; i < all_data.length; i++)
{
console.log(all_data[i][0],all_data[i][1]);
series.addPoint({ x: all_data[i][0],y: all_data[i][1],id: i},false,shift);
}
console.log(series,"object")
console.log("hey",series.data.length)
console.log("hey",series.data.length )
console.log(series.data)
console.log("out of success")
//chart.redraw();
setTimeout(requestData, 60000);
},
cache:false,
error:function()
{
console.log("err")
}
});
console.log("out of request ")
}
below functin is used to draw highchart,here onload event is used to load data dynamically.
$(function (
) {
console.log("into highcharts")
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
defaultSeriesType: 'spline',
events: {
load: requestData
}
},
title: {
text: 'cpu Usage'
},
xAxis: {
type: 'datetime',
tickPixelInterval: 150,
maxZoom: 20 * 1000
},
yAxis: {
minPadding: 0.2,
maxPadding: 0.2,
title: {
text: 'Value',
margin: 80
}
},
series: [{
id:sub_type+sub_type_parameter,
name: 'CPU',
data: []
}]
});;
console.log("out of highcharts")
});
chart = $('#container').highcharts();
this is the code to add axis dynamically.
var flag=true
if(TypeOfParameter=='cpu'&&flag)
{
console.log("entering into cpu",sub_type,flag)
// all_data = response.response.data[sub_type]
// itemdata=[]
// for(i in all_data)
// {
// itemdata.push(all_data[i][1])
// }
// console.log(itemdata[0])
// console.log("Drawing trend")
chart.addAxis({ // Primary yAxis
id:'Cpu_axis'+sub_type_parameter,
labels: {
formatter: function() {
return this.value;
},
style: {
color: '#89A54E'
}
},
title: {
text: "core "+ sub_type+ " "+sub_type_parameter,
style: {
color: '#89A54E'
}
},
lineWidth: 1,
lineColor: '#08F'
});
chart.addSeries({
id:sub_type+sub_type_parameter,
name: "core "+sub_type+" "+sub_type_parameter,
data:[],
tooltip: {
valueSuffix: ' q %'
},
yAxis:'Cpu_axis'+sub_type_parameter
})
//chart.redraw();
flag=false
console.log("returning from cpu")
}
my task is to add multiple series dynamically and update series data dynamically. my data is loaded with ajax request.
i have used the logic given on highcharts side to update the data dynamically. but addpoint is not adding points to series dont know why, when i checked the series object, it has data but dirtyfiled is set to true (dont know the reason)
code given below is used to load data dynamically. here problem is add point, it is not adding data to graph. series object is showing isDirty :true isDirtyData:true.
i think this isDirty has something to deal with. please help me out. facing this problem for quite a long time .
from_date=new Date().getTime()-60000;
function requestData ()
{
console.log("into request data")
console.log(TypeOfParameter,sub_type,sub_type_parameter,hostname,from_date)
$.ajax({
url:serverUrl+'/api/fetch_params/',
type:'GET',
data:{'type':TypeOfParameter,'sub-type':sub_type,'hostname':hostname,'param':sub_type_parameter,'from-date':from_date},
success:function(response)
{
console.log("into success")
var id=sub_type+sub_type_parameter
var series = chart.get(id)
shift = series.data.length > 150; // shift if the series is longer than 300 (drop oldest point)
console.log(shift)
response= $.parseJSON(response)
var x=sub_type;
all_data=response.response.data[x]
itemdata=[]//
console.log(all_data.length)
//console.log(new Date(all_data[all_data.length-1][0]),'latest timestamp')
from_date=all_data[all_data.length-1][0]
// series.addPoint(all_data,false,shift);
console.log("series name:",series.data.length,series.name)
for (var i = 0; i < all_data.length; i++)
{
console.log(all_data[i][0],all_data[i][1]);
series.addPoint({ x: all_data[i][0],y: all_data[i][1],id: i},false,shift);
}
console.log(series,"object")
console.log("hey",series.data.length)
console.log("hey",series.data.length )
console.log(series.data)
console.log("out of success")
//chart.redraw();
setTimeout(requestData, 60000);
},
cache:false,
error:function()
{
console.log("err")
}
});
console.log("out of request ")
}
below functin is used to draw highchart,here onload event is used to load data dynamically.
$(function (
) {
console.log("into highcharts")
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
defaultSeriesType: 'spline',
events: {
load: requestData
}
},
title: {
text: 'cpu Usage'
},
xAxis: {
type: 'datetime',
tickPixelInterval: 150,
maxZoom: 20 * 1000
},
yAxis: {
minPadding: 0.2,
maxPadding: 0.2,
title: {
text: 'Value',
margin: 80
}
},
series: [{
id:sub_type+sub_type_parameter,
name: 'CPU',
data: []
}]
});;
console.log("out of highcharts")
});
chart = $('#container').highcharts();
this is the code to add axis dynamically.
var flag=true
if(TypeOfParameter=='cpu'&&flag)
{
console.log("entering into cpu",sub_type,flag)
// all_data = response.response.data[sub_type]
// itemdata=[]
// for(i in all_data)
// {
// itemdata.push(all_data[i][1])
// }
// console.log(itemdata[0])
// console.log("Drawing trend")
chart.addAxis({ // Primary yAxis
id:'Cpu_axis'+sub_type_parameter,
labels: {
formatter: function() {
return this.value;
},
style: {
color: '#89A54E'
}
},
title: {
text: "core "+ sub_type+ " "+sub_type_parameter,
style: {
color: '#89A54E'
}
},
lineWidth: 1,
lineColor: '#08F'
});
chart.addSeries({
id:sub_type+sub_type_parameter,
name: "core "+sub_type+" "+sub_type_parameter,
data:[],
tooltip: {
valueSuffix: ' q %'
},
yAxis:'Cpu_axis'+sub_type_parameter
})
//chart.redraw();
flag=false
console.log("returning from cpu")
}
- did you found any solution ? I'm also having same issue, points are added sometimes, but most times blank candles appear. jsfiddle/nitincool4urchat/3v61f8v7/12 – coding_idiot Commented Nov 12, 2014 at 17:07
2 Answers
Reset to default 1I can see it is old question of 2013 year. But there are my thoughts for other guys that look for the answer on this question now.
There is highcharts.js bug https://github./highcharts/highcharts/issues/3452. In short the bug description is: when point is added with addPoint() method to chart series then this new point doesn't appear in someSerie.data array.
I propose following workaround for this issue "new points aren't present in someSerie.data array" :
// after adding new point with addPoint() method
let min = chart.xAxis[0].getExtremes().min;
let max = chart.xAxis[0].getExtremes().max;
chart.zoomOut();
chart.xAxis[0].setExtremes(min, max);
After that following check :
if(series.data.length) {
chart.redraw();
}
should work OK.
Well, it's about how you are using addPoint() function:
series.addPoint({ x: all_data[i][0],y: all_data[i][1],id: i},false,shift);
You have set redraw = false, so it won't redraw chart. Set it to true, and will work.
More about: http://api.highcharts./highcharts#Series.addPoint()
本文标签：
版权声明：本文标题：javascript - addpoint is not adding point in highcharts ,where data is updated dynamically with ajax - Stack Overflow 内容由热心网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://it.en369.cn/questions/1745664288a2162083.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论