javascript - Avoid same points being plotted twice in Google Visualization Chart API -
i plotting line graph google's visualization chart api, change in number of leads(an integer) every 30minutes. here have done till now:
google.load("visualization", "1", {packages:["corechart"]}); google.setonloadcallback(drawchart); function drawchart() { var jsondata = 'json string goes here'; var report = $.parsejson(jsondata); //make json object var data = new google.visualization.datatable(); data.addcolumn('timeofday', 'time'); data.addcolumn('number', 'leads'); var interval = 1000 * 60 * 30; //interval of 30mins var graphdata = report['rush_hour_reports']; var length = graphdata.length; var normalized_data = {}; //placeholder object for(var i=0; i<length; i++){ var dt = new date(graphdata[i]['my_hour']); //date obj timestamp //next round of time in chunks of 30mins(interval) var dt_rounded = new date(math.round(dt.gettime() / interval) * interval); //check if time exits, if yes & sum new lead count old 1 time same // else, create new key timestamp if(typeof normalized_data[dt_rounded] == 'undefined'){ normalized_data[dt_rounded] = graphdata[i]['lead_count']; }else{ normalized_data[dt_rounded] += graphdata[i]['lead_count']; } for(key in normalized_data){ if(normalized_data.hasownproperty(key)){ var dt = new date(key); var hrs = parseint(dt.gethours(), 10); var mins = parseint(dt.getminutes(), 10); //add data google chart using addrow data.addrow([ [hrs, mins,0], parseint(normalized_data[key], 10) ]); } } } var format = new google.visualization.dateformat({pattern: 'h:mm a'}); console.log(normalized_data); data.sort(0); //sort it, in case not sorted format.format(data, 0); var options = { title: 'company performance', fontsize: '12px', curvetype: 'function', animation:{ duration: 1000, easing: 'out', }, pointsize: 5, haxis: {title: report.time_format, titletextstyle: {color: '#ff0000'} }, vaxis: {title: 'leads', titletextstyle: {color: '#ff0000'}} }; var chart = new google.visualization.linechart(document.getelementbyid('chart_div')); chart.draw(data, options); }
now, how graph renders: http://ubuntuone.com/3nmetwykhqschx4rervcgq
if closely notice still have 2 lead counts being plotted @ same time wrong(example @ 6:30 or 7:30), instead should doing total/sum of leads if @ same time.
what doing wrong here?
your problem converting date objects "timeofday" data type, not aggregating data @ timeofday level, when have multiple days data in same time period (12:00 in example), multiple data points @ time. try instead:
for(var i=0; i<length; i++){ var dt = new date(graphdata[i]['my_hour']); var dt_rounded = new date(math.round(dt.gettime() / interval) * interval); var minutes = (parseint(dt_rounded.gethours(), 10) * 60) + parseint(dt_rounded.getminutes(), 10); if(typeof normalized_data[minutes] == 'undefined'){ normalized_data[minutes] = graphdata[i]['lead_count']; }else{ normalized_data[minutes] += graphdata[i]['lead_count']; } } for(var key in normalized_data){ if(normalized_data.hasownproperty(key)){ var hrs = math.floor(key / 60); var mins = key % 60; data.addrow([ [hrs, mins,0], parseint(normalized_data[key], 10) ]); } }
see working here: http://jsfiddle.net/asgallant/myuhw/
Comments
Post a Comment