Google ビジュアライゼーションを使用して、さまざまなデータ コレクションをグラフ、時系列、および表形式で表示するダッシュボードを作成しています (完全を期すために、html は Python によって生成されますが、これには何もないと思いますが、私の問題を処理します)。私はテーブルを自分で処理し、正常に動作し、チャートはまだ実装していませんが、前回のイテレーション用に少し異なるチャートを作成しました。そのコンテキストが邪魔になると、私の問題は時系列に由来します。ページにはフィルター (つまり、「メトリック」と「カテゴリ」および関連するドロップダウン) が正常に表示されますが、折れ線グラフは表示されず、「1 人以上の参加者描画に失敗しました().". フィルターを選択するたびに、追加の同一のエラーが表示されます。
関連するhtmlを含む私の(匿名化された)コードは次のとおりです。
<div class="time" id="conttime"><div id="contlinetime"></div><div id="cont_met"></div><div id="cont_cat"></div></div>
<script type="text/javascript">
google.load('visualization', '1.1', {'packages':['corechart', 'controls']});
function drawVisualization() {var contMetFilter = new google.visualization.ControlWrapper({
'controlType': 'CategoryFilter',
'containerId':'cont_met',
'options': {
'filterColumnLabel': 'Metric',
'ui': {
'labelStacking': 'vertical',
'allowTyping': false,
'allowMultiple': false,
'allowNone' : false
}
}
});var contCatFilter = new google.visualization.ControlWrapper({
'controlType': 'CategoryFilter',
'containerId':'cont_cat',
'options': {
'filterColumnLabel': 'Category',
'ui': {
'labelStacking': 'vertical',
'allowTyping': false,
'allowMultiple': false,
'allowNone' : false,
}
}
}); var obj = [
[new Date(2013, 11, 12), 25651, 'Sample Metric #1', 'Sample Category #1'],
[new Date(2013, 11, 11), 25651, 'Sample Metric #1', 'Sample Category #1'],
[new Date(2013, 11, 10), 25651, 'Sample Metric #1', 'Sample Category #1'],
[new Date(2013, 11, 09), 25681, 'Sample Metric #1', 'Sample Category #1'],
[new Date(2013, 11, 08), 25681, 'Sample Metric #1', 'Sample Category #1'],
[new Date(2013, 11, 12), 55, 'Sample Metric #1', 'Sample Category #2'],
[new Date(2013, 11, 11), 55, 'Sample Metric #1', 'Sample Category #2'],
[new Date(2013, 11, 10), 55, 'Sample Metric #1', 'Sample Category #2'],
[new Date(2013, 11, 09), 55, 'Sample Metric #1', 'Sample Category #2'],
[new Date(2013, 11, 08), 55, 'Sample Metric #1', 'Sample Category #2'],
[new Date(2013, 11, 12), 5120, 'Sample Metric #1', 'Sample Category #3'],
[new Date(2013, 11, 11), 5120, 'Sample Metric #1', 'Sample Category #3'],
[new Date(2013, 11, 10), 5120, 'Sample Metric #1', 'Sample Category #3'],
[new Date(2013, 11, 09), 4961, 'Sample Metric #1', 'Sample Category #3'],
[new Date(2013, 11, 08), 4961, 'Sample Metric #1', 'Sample Category #3'],
[new Date(2013, 11, 12), 26389, 'Sample Metric #2', 'Sample Category #1'],
[new Date(2013, 11, 11), 26389, 'Sample Metric #2', 'Sample Category #1'],
[new Date(2013, 11, 10), 26389, 'Sample Metric #2', 'Sample Category #1'],
[new Date(2013, 11, 09), 26417, 'Sample Metric #2', 'Sample Category #1'],
[new Date(2013, 11, 08), 26417, 'Sample Metric #2', 'Sample Category #1'],
[new Date(2013, 11, 12), 55, 'Sample Metric #2', 'Sample Category #2'],
[new Date(2013, 11, 11), 55, 'Sample Metric #2', 'Sample Category #2'],
[new Date(2013, 11, 10), 55, 'Sample Metric #2', 'Sample Category #2'],
[new Date(2013, 11, 09), 55, 'Sample Metric #2', 'Sample Category #2'],
[new Date(2013, 11, 08), 55, 'Sample Metric #2', 'Sample Category #2'],
[new Date(2013, 11, 12), 5793, 'Sample Metric #2', 'Sample Category #3'],
[new Date(2013, 11, 11), 5793, 'Sample Metric #2', 'Sample Category #3'],
[new Date(2013, 11, 10), 5793, 'Sample Metric #2', 'Sample Category #3'],
[new Date(2013, 11, 09), 5565, 'Sample Metric #2', 'Sample Category #3'],
[new Date(2013, 11, 12), 119398, 'Sample Metric #3', 'Sample Category #1'],
[new Date(2013, 11, 11), 119398, 'Sample Metric #3', 'Sample Category #1'],
[new Date(2013, 11, 10), 119398, 'Sample Metric #3', 'Sample Category #1'],
[new Date(2013, 11, 09), 119505, 'Sample Metric #3', 'Sample Category #1'],
[new Date(2013, 11, 08), 119505, 'Sample Metric #3', 'Sample Category #1'],
[new Date(2013, 11, 12), 56, 'Sample Metric #3', 'Sample Category #2'],
[new Date(2013, 11, 11), 56, 'Sample Metric #3', 'Sample Category #2'],
[new Date(2013, 11, 10), 56, 'Sample Metric #3', 'Sample Category #2'],
[new Date(2013, 11, 09), 56, 'Sample Metric #3', 'Sample Category #2'],
[new Date(2013, 11, 08), 56, 'Sample Metric #3', 'Sample Category #2'],
[new Date(2013, 11, 12), 7360, 'Sample Metric #3', 'Sample Category #3'],
[new Date(2013, 11, 11), 7360, 'Sample Metric #3', 'Sample Category #3'],
[new Date(2013, 11, 10), 7360, 'Sample Metric #3', 'Sample Category #3'],
[new Date(2013, 11, 09), 7108, 'Sample Metric #3', 'Sample Category #3'],
[new Date(2013, 11, 08), 7108, 'Sample Metric #3', 'Sample Category #3']];
var data = new google.visualization.DataTable();
data.addColumn('date', 'Date');
data.addColumn('number', 'Count');
data.addColumn('string', 'Metric');
data.addColumn('string', 'Category');
data.addRows(obj);
var lineChart = new google.visualization.ChartWrapper({
chartType: 'LineChart',
containterId: 'contlinetime',
'view': {'columns': [0, 1]},
options: {
'chartArea': {'height': '80%', 'width': '80%'},
'hAxis': {'slantedText': false},
'curveType': "line",
'pointSize': 3,
'legend': {'position': 'none'}}});
new google.visualization.Dashboard(document.getElementById('conttime')).
bind([contMetFilter, contCatFilter], lineChart).
draw(data);
}
google.setOnLoadCallback(drawVisualization);
</script>
stackOverflow と Google Groups の両方のアーカイブを調べたところ、この問題を抱えている他の人を見つけましたが、問題と解決策は私が直面しているものとは異なります。最後に、私の問題に対する解決策の可能性があると思われるもの以外のオプションをまだ実際に試していないので、現時点ではこれらのチャートの読みやすさについては特に気にしませんが、これらのチャートの実際の作成については気にしません。ありがとうございました!