連續軸谷歌圖表加載CSV？

我已經成功地實現我的網頁上連續軸谷歌圖表，得到它格式化我想要的方式。現在我的要求已經改變，我試圖從CSV中加載這個圖表，而不是硬編碼和隨機生成的數據。連續軸谷歌圖表加載CSV？

我困惑自己，並就如何我的工作圖表轉換成從CSV拉過我的頭變得英寸我要在這裏發表了一些東西，

我的一個利用一個CSV其他的圖表，這就是我試圖重新
運行了我的工作不斷線圖硬編碼數據
我現在的圖表狀態是我試圖實現這個改變。

這裏是＃1：

  function drawPieVisualization() { 
       $.get("Thornton.M2.csv", function(csvString) { 
        // transform the CSV string into a 2-dimensional array 
        var arrayData = $.csv.toArrays(csvString, {onParseValue: $.csv.hooks.castToScalar}, {onParseValue: $.csv.hooks.castToScalar}); 


        // this new DataTable object holds all the data 
        var data = new google.visualization.arrayToDataTable(arrayData); 
        // CAPACITY - En-route ATFM delay - YY - CHART 
        var pieMain = new google.visualization.ChartWrapper({ 
        chartType: 'BarChart', 
        containerId: 'pieMain', 
        dataTable: data, 
        options:{ 
         title: 'Bar Chart Test', 
         'vAxis': { title: "Bar Chart Test" }, 
         'width': 1100, 
         'height': 540, 
         'backgroundColor': 'Ivory', 
         'color':'Black', 
         'hAxis': { 
        title: "Date", 
        gridlines: { count: 3, color: '#CCC' }, 
        format: 'dd-MMM-yyyy' 
       }, 
         title: 'Bar Chart Test', 
         titleTextStyle : {color: 'Black', fontSize: 16}, 
        } 
        }); 
        pieMain.draw(); 
       }); 
      } 
      google.setOnLoadCallback(drawPieVisualization) 

      changeRange = function() { 
      pieMain.sort({column: 0, desc: false}); 
      pieMain.draw(); 
     }; 

      changeRangeBack = function() { 
      pieMain.sort({column: 0, desc: true}); 
      pieMain.draw(); 
     };

這裏是＃2：

function drawVisualization() { 
var data = new google.visualization.DataTable(); 
    data.addColumn('date', 'Date'); 
    data.addColumn('number', 'Value'); 

    // add 100 rows of pseudo-random-walk data 
    for (var i = 0, val = 50; i < 100; i++) { 
     val += ~~(Math.random() * 5) * Math.pow(-1, ~~(Math.random() * 2)); 
     if (val < 0) { 
      val += 5; 
     } 
     if (val > 100) { 
      val -= 5; 
     } 
     data.addRow([new Date(2014, 0, i + 1), val]); 
    } 

    var chart = new google.visualization.ChartWrapper({ 
     chartType: 'ComboChart', 
     containerId: 'slider_chart_div', 
     options: { 
      'title': 'Average Ratings', 
          'vAxis': { title: "Average Rating" }, 
          'backgroundColor': 'Ivory', 
          'color':'Black', 
      width: 1100, 
      height: 400, 
      // omit width, since we set this in CSS 
      chartArea: { 
       width: '75%' // this should be the same as the ChartRangeFilter 
      } 
     } 
    }); 

    var control = new google.visualization.ControlWrapper({ 
     controlType: 'ChartRangeFilter', 
     containerId: 'control_div', 
     options: { 
      filterColumnIndex: 0, 
      ui: { 
       chartOptions: { 
        'backgroundColor': 'Ivory', 
          'color':'Black', 
        width: 1100, 
        height: 50, 
        // omit width, since we set this in CSS 
        chartArea: { 
         width: '75%' // this should be the same as the ChartRangeFilter 
        } 
       } 
      } 
     } 
    }); 

    var dashboard = new google.visualization.Dashboard(document.querySelector('#dashboard_div')); 
    dashboard.bind([control], [chart]); 
    dashboard.draw(data); 

    function zoomLastDay() { 
     var range = data.getColumnRange(0); 
     control.setState({ 
      range: { 
       start: new Date(range.max.getFullYear(), range.max.getMonth(), range.max.getDate() - 1), 
       end: range.max 
      } 
     }); 
     control.draw(); 
    } 
    function zoomLastWeek() { 
     var range = data.getColumnRange(0); 
     control.setState({ 
      range: { 
       start: new Date(range.max.getFullYear(), range.max.getMonth(), range.max.getDate() - 7), 
       end: range.max 
      } 
     }); 
     control.draw(); 
    } 
    function zoomLastMonth() { 
     // zoom here sets the month back 1, which can have odd effects when the last month has more days than the previous month 
     // eg: if the last day is March 31, then zooming last month will give a range of March 3 - March 31, as this sets the start date to February 31, which doesn't exist 
     // you can tweak this to make it function differently if you want 
     var range = data.getColumnRange(0); 
     control.setState({ 
      range: { 
       start: new Date(range.max.getFullYear(), range.max.getMonth() - 1, range.max.getDate()), 
       end: range.max 
      } 
     }); 
     control.draw(); 
    } 

    var runOnce = google.visualization.events.addListener(dashboard, 'ready', function() { 
     google.visualization.events.removeListener(runOnce); 

     if (document.addEventListener) { 
      document.querySelector('#lastDay').addEventListener('click', zoomLastDay); 
      document.querySelector('#lastWeek').addEventListener('click', zoomLastWeek); 
      document.querySelector('#lastMonth').addEventListener('click', zoomLastMonth); 
     } 
     else if (document.attachEvent) { 
      document.querySelector('#lastDay').attachEvent('onclick', zoomLastDay); 
      document.querySelector('#lastWeek').attachEvent('onclick', zoomLastWeek); 
      document.querySelector('#lastMonth').attachEvent('onclick', zoomLastMonth); 
     } 
     else { 
      document.querySelector('#lastDay').onclick = zoomLastDay; 
      document.querySelector('#lastWeek').onclick = zoomLastWeek; 
      document.querySelector('#lastMonth').onclick = zoomLastMonth; 
     } 
    }); 

    }

這裏是＃3：

function drawVisualization() { 
$.get("Source7Days.csv", function(csvString) { 
        // transform the CSV string into a 2-dimensional array 
        var arrayData = $.csv.toArrays(csvString, {onParseValue: $.csv.hooks.castToScalar}, {onParseValue: $.csv.hooks.castToScalar}); 


        // this new DataTable object holds all the data 
        var data = new google.visualization.arrayToDataTable(arrayData); 


var chart = new google.visualization.ChartWrapper({ 
    chartType: 'ComboChart', 
    containerId: 'slider_chart_div', 
    dataTable: data, 
    options: { 
     'title': 'Average Ratings', 
         'vAxis': { title: "Average Rating" }, 
         'backgroundColor': 'Ivory', 
         'color':'Black', 
     width: 1100, 
     height: 400, 
     // omit width, since we set this in CSS 
     chartArea: { 
      width: '75%' // this should be the same as the ChartRangeFilter 
     } 
    } 
}); 

var control = new google.visualization.ControlWrapper({ 
    controlType: 'ChartRangeFilter', 
    containerId: 'control_div', 

    options: { 
     filterColumnIndex: 0, 
     ui: { 
      chartOptions: { 
       'backgroundColor': 'Ivory', 
         'color':'Black', 
       width: 1100, 
       height: 50, 
       // omit width, since we set this in CSS 
       chartArea: { 
        width: '75%' // this should be the same as the ChartRangeFilter 
       } 
      } 
     } 
    } 
}); 

var dashboard = new google.visualization.Dashboard(document.querySelector('#dashboard_div')); 
dashboard.bind([control], [chart]); 
dashboard.draw(data); 

function zoomLastDay() { 
    var range = data.getColumnRange(0); 
    control.setState({ 
     range: { 
      start: new Date(range.max.getFullYear(), range.max.getMonth(), range.max.getDate() - 1), 
      end: range.max 
     } 
    }); 
    control.draw(); 
} 
function zoomLastWeek() { 
    var range = data.getColumnRange(0); 
    control.setState({ 
     range: { 
      start: new Date(range.max.getFullYear(), range.max.getMonth(), range.max.getDate() - 7), 
      end: range.max 
     } 
    }); 
    control.draw(); 
} 
function zoomLastMonth() { 
    // zoom here sets the month back 1, which can have odd effects when the last month has more days than the previous month 
    // eg: if the last day is March 31, then zooming last month will give a range of March 3 - March 31, as this sets the start date to February 31, which doesn't exist 
    // you can tweak this to make it function differently if you want 
    var range = data.getColumnRange(0); 
    control.setState({ 
     range: { 
      start: new Date(range.max.getFullYear(), range.max.getMonth() - 1, range.max.getDate()), 
      end: range.max 
     } 
    }); 
    control.draw(); 
} 

var runOnce = google.visualization.events.addListener(dashboard, 'ready', function() { 
    google.visualization.events.removeListener(runOnce); 

    if (document.addEventListener) { 
     document.querySelector('#lastDay').addEventListener('click', zoomLastDay); 
     document.querySelector('#lastWeek').addEventListener('click', zoomLastWeek); 
     document.querySelector('#lastMonth').addEventListener('click', zoomLastMonth); 
    } 
    else if (document.attachEvent) { 
     document.querySelector('#lastDay').attachEvent('onclick', zoomLastDay); 
     document.querySelector('#lastWeek').attachEvent('onclick', zoomLastWeek); 
     document.querySelector('#lastMonth').attachEvent('onclick', zoomLastMonth); 
    } 
    else { 
     document.querySelector('#lastDay').onclick = zoomLastDay; 
     document.querySelector('#lastWeek').onclick = zoomLastWeek; 
     document.querySelector('#lastMonth').onclick = zoomLastMonth; 
    } 
}); 

} 


)}

這裏是我利用

Time,Value 
    2017/05/22 00:05:00,6710.4305066168 
    2017/05/22 00:10:00,6667.5043776631 
    2017/05/22 00:15:00,6615.6655550003 
    2017/05/22 00:20:00,6554.988194257 
    2017/05/22 00:25:00,6532.4164219201 
    2017/05/22 00:30:00,6520.8965539932

底部部分「RUNONCE」在兩個＃2和＃3的CSV數據的一個樣本是從1天圖表上改變滑塊控件 - 1周 - 或1個月範圍內的圖表，澄清。

我的圖表當前正在給我的錯誤：

一個或多個參與者未能得出（）。（其中兩個）

而且

過濾器不能在字符串類型的柱操作。列類型必須是以下之一：數字，日期或日期時間的TimeOfDay。柱的作用必須是域，並關聯到一個連續的軸。

來源

2017-06-02 Adam Lee

所述第二錯誤消息表明arrayToDataTable
創建第一列 - >type: 'string'
代替 - >type: 'date'

使用DataView將字符串轉換成日期

您可以使用方法在數據視圖中創建計算列 - >setColumns

u SE view代替data繪製儀表板

看到下面的代碼片段...

$.get("Source7Days.csv", function(csvString) { 
    var arrayData = $.csv.toArrays(csvString, {onParseValue: $.csv.hooks.castToScalar}, {onParseValue: $.csv.hooks.castToScalar}); 

    // this is a static method, "new" keyword should not be used here 
    var data = google.visualization.arrayToDataTable(arrayData); 

    // create view 
    var view = new google.visualization.DataView(data); 
    view.setColumns([ 
    // first column is calculated 
    { 
     calc: function (dt, row) { 
     // convert string to date 
     return new Date(dt.getValue(row, 0)); 
     }, 
     label: data.getColumnLabel(0), 
     type: 'date' 
    }, 
    // just use index # for second column 
    1 
    ]); 

    var chart = new google.visualization.ChartWrapper({ 
    chartType: 'ComboChart', 
    containerId: 'slider_chart_div', 
    options: { 
     title: 'Average Ratings', 
     vAxis: { title: 'Average Rating' }, 
     backgroundColor: 'Ivory', 
     color: 'Black', 
     width: 1100, 
     height: 400, 
     chartArea: { 
     width: '75%' 
     } 
    } 
    }); 

    var control = new google.visualization.ControlWrapper({ 
    controlType: 'ChartRangeFilter', 
    containerId: 'control_div', 
    options: { 
     filterColumnIndex: 0, 
     ui: { 
     chartOptions: { 
      backgroundColor: 'Ivory', 
      color: 'Black', 
      width: 1100, 
      height: 50, 
      chartArea: { 
      width: '75%' 
      } 
     } 
     } 
    } 
    }); 

    var dashboard = new google.visualization.Dashboard(document.querySelector('#dashboard_div')); 
    dashboard.bind([control], [chart]); 
    // use data view 
    dashboard.draw(view); 
    ...

來源

2017-06-02 17:08:30 WhiteHat

希望這有助於當... – WhiteHat

連續軸谷歌圖表加載CSV？

回答

相關問題