用 CSV 加载的连续轴谷歌图表？答案

【问题标题】：Continuous Axis Google Chart Loaded with CSV?用 CSV 加载的连续轴谷歌图表？
【发布时间】：2017-06-02 16:18:56
【问题描述】：

我已经设法在我的页面上实现了一个连续轴谷歌图表，并按照我想要的方式对其进行了格式化。现在我的要求发生了变化，我正在尝试从 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;
    }
});

}


)}

这是我正在使用的 CSV 数据示例

    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

#2 和 #3 中的底部 'runOnce' 用于将图表上的滑块控件从图表上的 1 天 - 1 周 - 或 1 个月 范围更改，以便澄清.

我的图表目前显示错误：

一个或多个参与者未能draw()。（其中两个）

和

过滤器无法对字符串类型的列进行操作。列类型必须是以下之一：数字、日期、日期时间或时间。列角色必须是域，并与连续轴相关。

【问题讨论】：

标签： javascript html csv charts google-visualization

【解决方案1】：

第二条错误消息显示arrayToDataTable
将第一列创建为 --> type: 'string'
而不是 --> type: 'date'

使用DataView 将字符串转换为日期

您可以使用方法在数据视图中创建计算列 --> setColumns

在绘制仪表板时使用view 代替data

看下面的sn-p...

$.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);
  ...

【讨论】：