0

Google の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

2 つのリード カウントが同時にプロットされていることに気が付いた場合、これは間違っています (例: 6:30 または 7:30)。代わりに、リードが同時にある場合は、リードの合計/合計を実行する必要があります。

ここで何が間違っていますか？

4

1 に答える 1

2

あなたの問題は、日付オブジェクトを「timeofday」データ型に変換しているが、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/

于 2013-08-24T00:03:03.270 に答える