javascript - addpoint is not adding point in highcharts ,where data is updated dynamically with ajax -
my task add multiple series dynamically , update series data dynamically. data loaded ajax request.
i have used logic given on highcharts side update data dynamically. addpoint not adding points series dont know why, when checked series object, has data dirtyfiled set true (dont know reason)
code given below used load data dynamically. here problem add point, not adding data graph. series object showing isdirty :true isdirtydata:true.
i think isdirty has deal with. please me out. facing problem quite 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 series longer 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) (var = 0; < 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 used draw highchart,here onload event used 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 code add axis dynamically.
var flag=true if(typeofparameter=='cpu'&&flag) { console.log("entering 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 cpu") }
well, it's how using addpoint()
function:
series.addpoint({ x: all_data[i][0],y: all_data[i][1],id: i},false,shift);
you have set redraw = false, won't redraw chart. set true, , work.
more about: http://api.highcharts.com/highcharts#series.addpoint()
Comments
Post a Comment