2014-03-07 31 views
0

我有點掙扎,因爲我不確定如何使用谷歌'折線圖'來實現重複日期值。如何繪製重複日期值的折線圖?

這是我到目前爲止有:

function drawVisualization(dataValues, chartTitle, columnNames, categoryCaption) { 
    if (dataValues.length < 1) 
     return; 

    var data = new google.visualization.DataTable(); 
    data.addColumn('string', columnNames.split(',')[0]); 
    data.addColumn('number', columnNames.split(',')[1]); 
    data.addColumn('string', columnNames.split(',')[2]); 
    data.addColumn('datetime', columnNames.split(',')[3]); 

    for (var i = 0; i < dataValues.length; i++) { 

     var date = new Date(parseInt(dataValues[i].Date.substr(6), 10)); 

     //var date = new Date(parseInt(jsonDate.substr(6))); 
     //var date = new Date(new Number(jsonDate.replace(/(^.*\()|([+-].*$)/g, ''))); 
     //var date = eval(jsonDate.replace(/\/Date\((\d+)\)\//gi, "new Date($1)")); 
     alert(date); 

     data.addRow([dataValues[i].ColumnName, dataValues[i].Value, dataValues[i].Type, date]); 

    } 

    // Define a Pie chart 
    var pie = new google.visualization.ChartWrapper({ 
     'chartType': 'LineChart', 
     'containerId': 'PieChartContainer', 
     'options': { 
      'width': 950, 
      'height': 450, 
      'legend': 'right', 
      'hAxis': { 
      'format': "dd-MMM-yyyy", 
      'maxValue': new Date (2013, 01, 17), 'minValue': new Date (2013, 01, 10), 
      'viewWindow':{'max': new Date (2013, 01, 17)}, 
       }, 
      'title': chartTitle, 
      'chartArea': { 'left': 100, 'top': 100, 'right': 0, 'bottom': 100 }, 
      'pieSliceText': 'label', 
      'tooltip': { 'text': 'percentage' } 
     }, 
     'view': { 'columns': [3, 1] } 
    }); 

我已經加入「hAxis」選項的圖表,但我得到「對象功能無法識別」錯誤。他們是更好的解決這個任務的方法嗎?任何框架或指南都會非常有幫助。在「hAxis」更新後

79.00 06/03/2013 
15.00 06/03/2013 
14.00 06/03/2013 
20.00 06/03/2013 
22.00 06/03/2013 
92.13 06/03/2013 
(I have 20 points for date 2013-01-16 and 10 points for date 2013-01-17) 

更新圖表的視覺:

更多參考這個我使用的服務器端什麼樣的數據繪製該

enter image description here

可以使用控制器(如'dateRangeSlider')來分配日期的時間間隔嗎?

非常感謝您的幫助和時間。

回答

1

在這條線的日期構造錯誤:

'maxValue': date (2013, 01, 16), 'minValue': date (2013, 01, 17), 'viewWindow':{'max': date (2013, 01, 17)}}, 

這些應該是在格式new Date(year, month, day)

'maxValue': new Date (2013, 01, 16), 'minValue': new Date (2013, 01, 17), 'viewWindow':{'max': new Date (2013, 01, 17)}}, 
+0

你好,非常感謝你爲你的迴應和幫助。您的建議解決了問題,但是它以壓縮格式輸出折線圖,如何使日期值分佈給出圖的礦石細節視圖。是否可以使用'日期範圍過濾器'控制?我已更新了我的原始帖子,以供進一步參考此問題。非常感謝。我非常感謝你的幫助和時間。 – user3070072

+0

你想讓圖表看起來像什麼?如果你希望像這樣保持一個LineChart,但是顯示數據點,你可以爲圖表設置'pointSize'選項來使點變大('pointSize'需要一個整數值來繪製點的半徑像素,默認爲'0')。 – asgallant