CSVがロードされた連続軸Google Chart？

私は自分のページに連続軸のGoogleチャートを実装できて、それを私が望むようにフォーマットしました。今では私の要求が変わってしまい、ハードコードされたデータとランダムに生成されたデータとではなく、このチャートをCSVからロードしようとしています。CSVがロードされた連続軸Google Chart？

私は自分自身を混乱させ、自分の作業チャートを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; 
    } 
}); 

} 


)}

そして、ここでは、私は＃2、＃3の両方で、底部「RUNONCE」

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

を利用していCSVデータのサンプルである1日からチャート上のスライダコントロールを変更することがあり - 1週間または1ヶ月の範囲がチャート上に表示されます。

私のチャートは、現在、私にエラーを与えている：

つ以上の参加者が描画するのに失敗しました（）。（これらの二つ）

そして

フィルタは、文字列型の列を操作することはできません。列の型は、数字、日付、日時、または時刻のいずれか1つである必要があります。列の役割はドメインで、連続軸と相関する必要があります。

出典

2017-06-02 Adam Lee

第2のエラーメッセージがarrayToDataTable
は、第1の列を作成することが明らかになった - >type: 'string'
代わりに - >type: 'date'

日付

に文字列を変換するDataViewを使用メソッドを使用してデータビューに計算された列を作成できます - >setColumns

dataの代わりに、それ自体viewダッシュボードを描画するときに

は、次のスニペット...このことができます

$.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がロードされた連続軸Google Chart？

答えて

関連する問題