0
LineChartに複数の曲線を表示するには、CategoryFilterとChartRangeFilterの2つのコントロールを使用しています。Googleグラフ：不連続なDataTableを持つChartRangeFilterとCategoryFilter
私はChartRangeFilterはCategoryFilterにのみ選択した列を表示したいが、私は多くの場合、例外を取得：
1人以上の参加者は（描画するのに失敗した）
および/または
未定義はオブジェクトではありません（ 'd [0] .x'を評価する）
私はここでの例ですが、問題は、私は示すために、必要なデータが不連続であるということであると思う：
var data = new google.visualization.DataTable();
data.addColumn('date', 'DATE');
data.addColumn('number', 'DATA.1');
data.addColumn('number', 'DATA.2');
data.addColumn('number', 'DATA.3');
data.addRows
([
[new Date(2016,9,19), 18, null, null],
[new Date(2016,9,20), 24, null, null],
[new Date(2016,9,21), 41, null, null],
[new Date(2016,9,22), 47, null, null],
[new Date(2016,9,23), 60, null, null],
[new Date(2016,9,24), 79, null, null],
[new Date(2016,9,25), null, 3, null],
[new Date(2016,9,26), null, 4, null],
[new Date(2016,9,27), null, 10, null],
[new Date(2016,9,28), null, 11, 123],
[new Date(2016,9,29), null, 4, 130],
[new Date(2016,9,30), 6, null, 132],
]);
と私のチャートのコードスニペット：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="chrome=1">
<title>NEW CHART</title>
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<!--[if lt IE 9]>
\t <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<style>
\t \t .labels{font-size: 50%;}
</style>
<script type="text/javascript" src="../cal/formatDate.js"></script>
<script src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
\t \t //-------------------------------------------------------------------GOOGLE CHARTS ->
\t \t google.charts.load('current', {'packages':['corechart', 'controls']});
\t \t google.charts.setOnLoadCallback(drawChart);
\t \t function drawChart()
\t \t {
\t \t \t var data = new google.visualization.DataTable();
\t \t \t data.addColumn('date', 'DATE');
\t \t \t data.addColumn('number', 'DATA.1');data.addColumn('number', 'DATA.2');data.addColumn('number', 'DATA.3');
\t \t \t data.addRows
\t \t \t ([
\t \t \t \t [new Date(2016,9,19),18,null,null],
\t \t \t \t [new Date(2016,9,20),24,null,null],
\t \t \t \t [new Date(2016,9,21),41,null,null],
\t \t \t \t [new Date(2016,9,22),47,null,null],
\t \t \t \t [new Date(2016,9,23),60,null,null],
\t \t \t \t [new Date(2016,9,24),79,null,null],
\t \t \t \t [new Date(2016,9,25),null,3,null],
\t \t \t \t [new Date(2016,9,26),null,4,null],
\t \t \t \t [new Date(2016,9,27),null,10,null],
\t \t \t \t [new Date(2016,9,28),null,11,123],
\t \t \t \t [new Date(2016,9,29),null,4,130],
\t \t \t \t [new Date(2016,9,30),6,null,132],
\t \t \t ]);
\t \t \t var dash = new google.visualization.Dashboard(document.getElementById('dashboard'));
\t \t \t var columnsTable = new google.visualization.DataTable();
\t \t \t columnsTable.addColumn('number', 'colIndex');
\t \t \t columnsTable.addColumn('string', 'colLabel');
\t \t \t var initState= {selectedValues: []};
\t \t \t // populate columnsTable Rows skipping column 0
\t \t \t for (var i = 1; i < data.getNumberOfColumns(); i++)
\t \t \t {
\t \t \t \t columnsTable.addRow([i, data.getColumnLabel(i)]);
\t \t \t \t // comment out next line to have a default selection other than the whole list
\t \t \t \t // initState.selectedValues.push(data.getColumnLabel(i));
\t \t \t }
\t \t \t // set individual columns to be the default columns (not with the loop above)
\t \t \t // initState.selectedValues.push(data.getColumnLabel(4));
\t \t \t
\t \t \t // initialize the CategoryFilter
\t \t \t var CategoryFilter_control = new google.visualization.ControlWrapper
\t \t \t ({
\t \t \t \t controlType: 'CategoryFilter',
\t \t \t \t containerId: 'CategoryFilter_div',
\t \t \t \t dataTable: columnsTable,
\t \t \t \t options:
\t \t \t \t {
\t \t \t \t \t filterColumnLabel: 'colLabel',
\t \t \t \t \t ui:
\t \t \t \t \t {
\t \t \t \t \t \t label: 'Columns',
\t \t \t \t \t \t allowTyping: false,
\t \t \t \t \t \t allowMultiple: true,
\t \t \t \t \t \t allowNone: false,
\t \t \t \t \t \t selectedValuesLayout: 'aside'
\t \t \t \t \t }
\t \t \t \t },
\t \t \t \t 'state': {'selectedValues': ['DATA.1']}
\t \t \t });
\t \t \t
\t \t \t // initialize the LineChart \t
\t \t \t var chart = new google.visualization.ChartWrapper
\t \t \t ({
\t \t \t \t chartType: 'LineChart',
\t \t \t \t containerId: 'chart_div',
\t \t \t \t dataTable: data,
\t \t \t \t options:
\t \t \t \t {
\t \t \t \t \t title: 'SOCIAL FOLLOWERS',
\t \t \t \t \t curveType: 'function',
\t \t \t \t \t interpolateNulls: 'true',
\t \t \t \t \t pointSize: 2,
\t \t \t \t \t legend: { position: 'right', textStyle:{ fontSize: 10 } },
\t \t \t \t \t chartArea: { left: 50, top: 10, width: "80%", height: "90%" },
\t \t \t \t \t trendlines:
\t \t \t \t \t {
\t \t \t \t \t \t 0:
\t \t \t \t \t \t {
\t \t \t \t \t \t \t type: 'linear',
\t \t \t \t \t \t \t lineWidth: 1,
\t \t \t \t \t \t \t dataOpacity: 0.2,
\t \t \t \t \t \t \t showR2: false,
\t \t \t \t \t \t \t pointSize: 0,
\t \t \t \t \t \t \t visibleInLegend: false
\t \t \t \t \t \t },
\t \t \t \t \t \t 1:
\t \t \t \t \t \t {
\t \t \t \t \t \t \t type: 'linear',
\t \t \t \t \t \t \t lineWidth: 1,
\t \t \t \t \t \t \t dataOpacity: 0.2,
\t \t \t \t \t \t \t showR2: false,
\t \t \t \t \t \t \t pointSize: 0,
\t \t \t \t \t \t \t visibleInLegend: false
\t \t \t \t \t \t },
\t \t \t \t \t \t 2:
\t \t \t \t \t \t {
\t \t \t \t \t \t \t type: 'linear',
\t \t \t \t \t \t \t lineWidth: 1,
\t \t \t \t \t \t \t dataOpacity: 0.2,
\t \t \t \t \t \t \t showR2: false,
\t \t \t \t \t \t \t pointSize: 0,
\t \t \t \t \t \t \t visibleInLegend: false
\t \t \t \t \t \t },
\t \t \t \t \t }
\t \t \t \t }
\t \t \t });
\t \t \t // initialize the ChartRangeFilter
\t \t \t var ChartRangeFilter_control = new google.visualization.ControlWrapper
\t \t \t ({
\t \t \t \t controlType: 'ChartRangeFilter',
\t \t \t \t containerId: 'ChartRangeFilter_div',
\t \t \t \t dataTable: data,
\t \t \t \t options:
\t \t \t \t {
\t \t \t \t \t filterColumnIndex: 0,
\t \t \t \t \t ui: { chartOptions: {height:50,width:'100%',chartArea:{left:50,width: '80%'}} }
\t \t \t \t }
\t \t \t });
\t \t \t // set the chart
\t \t \t function setChartView()
\t \t \t {
\t \t \t \t var state = CategoryFilter_control.getState();
\t \t \t \t var row;
\t \t \t \t var view = {columns: [0]};
\t \t \t \t for (var i = 0; i < state.selectedValues.length; i++)
\t \t \t \t {
\t \t \t \t \t row = columnsTable.getFilteredRows([{column: 1, value: state.selectedValues[i]}])[0];
\t \t \t \t \t view.columns.push(columnsTable.getValue(row, 0));
\t \t \t \t }
\t \t \t \t chart.setView(view);
\t \t \t \t chart.draw();
\t \t \t }
\t \t \t // set the ChartRangeFilter ??
\t \t \t function setRangeFilterView()
\t \t \t {
\t \t \t \t var state = CategoryFilter_control.getState();
\t \t \t \t var row;
\t \t \t \t var view = {columns: [0]};
\t \t \t \t for (var i = 0; i < state.selectedValues.length; i++)
\t \t \t \t {
\t \t \t \t \t row = columnsTable.getFilteredRows([{column: 1, value: state.selectedValues[i]}])[0];
\t \t \t \t \t view.columns.push(columnsTable.getValue(row, 0));
\t \t \t \t }
\t \t \t \t ChartRangeFilter_control.setView(view);
\t \t \t \t ChartRangeFilter_control.draw();
\t \t \t }
\t \t \t // display selected Range
\t \t \t function displayRange()
\t \t \t {
\t \t \t \t var v = ChartRangeFilter_control.getState();
\t \t \t \t document.getElementById('dbgchart').innerHTML = v.range.start.format("%d-%m-%Y")+ ' to ' +v.range.end.format("%d-%m-%Y");
\t \t \t \t return 0;
\t \t \t }
\t \t \t // draw the CategoryFilter
\t \t \t CategoryFilter_control.draw();
\t \t \t // bind LineChart and ChartRangeFilter
\t \t \t dash.bind([ChartRangeFilter_control], [chart]);
\t \t \t
\t \t \t dash.draw(data);
\t \t \t setChartView();
\t \t \t setRangeFilterView();
\t \t \t google.visualization.events.addListener(CategoryFilter_control, 'statechange', setChartView);
\t \t \t google.visualization.events.addListener(CategoryFilter_control, 'statechange', setRangeFilterView);
\t \t \t google.visualization.events.addListener(ChartRangeFilter_control, 'statechange', displayRange);
\t \t }
\t \t //-------------------------------------------------------------------GOOGLE CHARTS <-
\t </script>
</head>
<body>
\t <h3>Social Followers Overview</h3>
\t <div id="dashboard">
\t \t <div id="CategoryFilter_div"></div>
\t \t <div id="chart_div" style="margin:0; padding:0; width: auto; height: 75vh"></div>
\t \t <div id="ChartRangeFilter_div"></div>
\t \t <p><span id='dbgchart' style="padding-top: 50; padding-left: 50px;"></span></p>
\t </div>
</body>
</html>の穴がある場合nullのデータを描画しようとするのを防ぐために何をすればよいですかDataTable？