避免在Google可視化圖表API中繪製兩次相同的點

Question

我正在用谷歌的Visualization Chart API繪製折線圖，​​它每30分鐘簡單地改變一次導數（整數）。在這裏我做了什麼至今：

google.load("visualization", "1", {packages:["corechart"]}); 
    google.setOnLoadCallback(drawChart); 
    function drawChart() { 
    var jsonData = 'json string goes here'; 
    var report = $.parseJSON(jsonData); //make it a 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 from timestamp 
    //next we round of time in chunks of 30mins(interval) 
    var dt_rounded = new Date(Math.round(dt.getTime()/interval) * interval); 
    //check if that time exits, if yes & sum the new lead count with old one as time is same 
    // Else, just create a new key with 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 the data into 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, just in case its not already 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); 
    } 

現在，這是該圖表的呈現方式： http://ubuntuone.com/3NMEtWYkhQSCHx4RERVcgq

如果你仔細注意它仍然有兩個引計數在同一時間被描繪這是錯誤的（例如在6:30或7:30），相反，如果他們在同一時間，它應該做一個總數/總數。

我在這裏做錯了什麼？

Answer 1

您的問題是您將日期對象轉換爲「timeofday」數據類型，但您不是在時間日期級別彙總數據，因此當您在同一時間段內有多個日期的數據（中午12:00在你的例子中），那時你會得到多個數據點。試試這個：

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) ]); 
    } 
} 

看到它在這裏工作：http://jsfiddle.net/asgallant/MYUHw/