Google图表时间线参与者未能绘制 [英] Google Chart Timeline Participants Failed to Draw
本文介绍了Google图表时间线参与者未能绘制的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我使用Google图表创建了一个时间表，并添加了一个带有图表范围过滤器的仪表板，以便人们移动甚至放大，以便更清楚地查看某些条目。虽然它主要起作用，但有时它会抛出参与者未能画出的错误。我查了其他反应这种类型的错误，但找不到任何工作。请参阅下面的示例：
- https://groups.google.com/forum/#!topic/google-visualization-api/AFfEjG6lG7k
- Google Chart with切片机返回：一个或多个参与者未能绘制（）×
- https://stackoverflow.com/questions/30944118/google-charts-timeline-with-chartrangefilter-error-one-or-more-participants- fai
- One or更多参与者未能绘制（）
- 一个或多个参与者未能绘制（）：错误
到目前为止正如我可以看出的那样，问题是，在某个缩放级别下，工具提示（每个元素都有）没有显示。它被读为空，这是提示错误。任何人都可以推荐修补程序
以下代码：
<！DOCTYPE html>
< meta charset =utf-8>
< head>
< title> LeaP Pharmacy学生路径数据< / title>
< style>
div.google-visualization-tooltip {
font-size：0.9em;
padding：10px;
width：200px;
}
< / style>
< script type =text / javascriptsrc =https://www.google.com/jsapi>< / script>
< / head>
< body style =font-family：Arial; border：0 none;>
< div id =dashboard>
< div id =chartstyle =position：relative; width：985px; height：200px;>< / div>
< div>选择要放大的时间范围。< / div>
< div id =control>< / div>
< / div>
< div id =junk_divstyle =display：none;>< / div>
< script type =text / javascript>
google.load（'visualization'，'1'，{
packages：['corechart'，'table'，'gauge'，'controls']
}）;
google.setOnLoadCallback（drawVisualization）;
function drawVisualization（）{
var dashboard = new google.visualization.Dashboard（
document.getElementById（'dashboard'））;
var control = new google.visualization.ControlWrapper（{$ b $'controlType'：'ChartRangeFilter'，$ b $'containerId'：'control'，
'options' ：{
//过滤日期轴
'filterColumnIndex'：3，
'ui'：{
'chartType'：'TimeLine'，
' chartOptions'：{
'width'：900，
'height'：70，
'chartArea'：{
width：'100％'，// //确定这是同样的图表和控制，所以轴对齐
高度：'80％'
}，
'hAxis'：{
'baselineCol或'：'none'
}
}，
//这个视图有两列：开始日期和结束日期。
'chartView'：{
'列'：[3，4]
}
}
}，
//初始范围：2015-08 -10至2015-08-10。
//'state'：{'range'：{'start'：new Date（20150810185227），
//'end'：new Date（20150810205436）}
//}
}）;
$ b var chart = new google.visualization.ChartWrapper（{
'chartType'：'Timeline'，$ b $'containerId'：'chart'，
'options' ：{
'width'：985，
'height'：600，
'chartArea'：{
width：'100％'，// //确定这是相同的对于图表和控件，轴对齐
height：'80％'
}，
}，
'view'：{
'columns'：[ 0，1，2，3，4]
}
}）;
var data = new google.visualization.DataTable（）;
data.addColumn（{type：'string'，id：'Student'}）;
data.addColumn（{type：'string'，id：'Event Type'}）;
data.addColumn（{type：'string'，role：'tooltip'，'p'：{'html'：true}}）;
data.addColumn（{type：'datetime'，id：'Start'}）;
data.addColumn（{type：'datetime'，id：'End'}）;
data.addRows（[
['学生571'，'Pretest'，'学生571开始生物化学学习路径前测试'，新日期（2015,08,10,18,52,02），新日期（2015,08,10,18,52,27）]，
['学生571'，'学习路径'，'学生571观看氨基酸视频'，新日期（2015,08,10， 18,52,27），新日期（2015,08,10,18,52,32）]，
['学生571'，'学习路径'，'学生571观看视频：Bio102水'，新日期（2015,08,10,18,52,32），新日期（2015,08,10,18,52,33）]，
['学生571'，'学习路径'，'学生571观看Amino Acids videos'，新日期（2015,08,10,18,52,33），新日期（2015,08,10,18,52,40）]，
['学生571'，'学习路径'，'学生571查看主要有机化合物的元素'，新日期（2015,08,10,18,52,40），新日期（2015,08,10,18,52,55）] ，
['学生571'，'学习路径'，'学生571查看氨基酸视频'，新日期（2015,08,10,18,52,55），新日期（2015,08,10,19,01,48）]，
['学生571'，'补充信息'，'学生571查看碳水化合物网站'，新日期（2015,08,10,19 ，01,48），新日期（2015,08,10,19,01,49）]，
['学生571'，'学习路径'，'学生571查看脂质课本'，新日期（2015） ，08,10,19,01,49），新日期（2015,08,10,19,02,13）]，
['学生571'，'学习路径'，'学生571观看视频： Bio102水'，新日期（2015,08,10,19,02,13），新日期（2015,08,10,19,02,42）]，
['学生571'，'学习路径'，'学生571观看氨基酸视频'，新日期（2015,08,10,19,02,42），新日期（2015,08,10,19,03,02）]，
['学生571，学习路径，学生571观看氨基酸视频，新日期（2015,08,10,19,03,02），新日期（2015,08,10,19,16,08）] ，
['学生571'，'学习路径'，'学生571观看视频：Bio102 Water'，新日期（2015,08,10,19,16,08），新日期（2015,08,10 ，19,16,11）]，
['Student 5 71'，'学习路径'，'学生571查看主要有机化合物的元素'，新日期（2015,08,10,19,16,11），新日期（2015,08,10,19,16） ，18）]，
['学生571'，'学习路径'，'学生571查看生物缓冲网站3（动画）'，新日期（2015,08,10,19,16,18），新日期（2015,08,10,19,16,42）]，
['学生571'，'补充信息'，'学生571查看碳水化合物网站'，新日期（2015,08,10,19， 16,42），新日期（2015,08,10,19,16,48）]，
['学生571'，'学习路径'，'学生571查看脂质课本'，新日期（2015， 08,10,19,16,48），新日期（2015,08,10,19,16,53）]，
['学生571'，'补充信息'，'学生571查看核酸网站'，新日期（2015,08,10,19,16,53），新日期（2015,08,10,19,16,54）]，
['学生571'，'补充信息'， '学生571观看视频：水的属性'，新日期（2015,08,10,19,16,54），新日期（2015,08,10,19,16,55）]，
['学生571'，'补充信息'，'学生571查看Lipids网站'，新日期（2015,08,10,19,16,55），新日期（2015,08,10,19,16 ，'b $ b'''学生571'，'补充信息'，'学生571查看复合碳水化合物是由单糖形成 - 生物化学 - NCBI Bookshelf'，新日期（2015,08,10,19， 16,57），新日期（2015,08,10,19,17,03）]，
['学生571'，'学习路径'，'学生571观看氨基酸视频'，新日期（2015） ，08,10,19,17,03），新日期（2015,08,10,19,18,27）]，
['学生571'，'问题'，'学生571回答了细胞表面受体问题正确'，新日期（2015,08,10,19,18,27），新日期（2015,08,10,19,18,59）]，
['学生571'，'问题'，'学生571回答不正确的细胞表面受体问题'，新日期（2015,08,10,19,18,59），新日期（2015,08,10,19,19,21）]，
['学生571'，'问题'，'学生571回答了细胞表面受体的追求新日期（2015,08,10,19,19,21），新日期（2015,08,10,19,19,27）]，
['学生571'，'学习路径'，'学生571观看视频：Bio102 Water'，新日期（2015,08,10,19,19,27），新日期（2015,08,10,19,19,43）]，
[ '学生571'，'学习路径'，'学生571观看视频：Bio102 Water'，新日期（2015,08,10,19,19,43），新日期（2015,08,10,19,19,56） ）]，
['学生571'，'学习路径'，'学生571观看氨基酸视频'，新日期（2015,08,10,19,19,56），新日期（2015,08， 10,19,19,57）]，
['学生571'，'学习路径'，'学生571观看视频：Bio102 Water'，新日期（2015,08,10,19,19,57） ，新日期（2015,08,10,19,20,33）]，
['学生571'，'学习路径'，'学生571观看氨基酸视频'，新日期（2015,08,10 ，19,20,33），新日期（2015,08,10,19,21,00）]，
['学生571'，'学习路径'，'学生571观看氨基酸视频'，新日期（2015,08,10,19,21,00），新达te（2015,08,10,19,21,02）]，
['学生571'，'学习路径'，'学生571观看视频：Bio102 Water'，新日期（2015,08,10， 19,21,02），新日期（2015,08,10,19,21,50）]，
['学生571'，'学习路径'，'学生571观看视频：Bio102 Water'，新日期（2015,08,10,19,21,50），新日期（2015,08,10,19,22,14）]，
['学生571'，'问题'，'学生571回答水问题属性，新日期（2015,08,10,19,22,14），新日期（2015,08,10,19,30,32）]，
['学生571'， '学习路径'，'学生571查看主要有机化合物的元素'，新日期（2015,08,10,19,30,32），新日期（2015,08,10,20,21,16） ]，
['学生571'，'学习路径'，'学生571查看生物缓冲网站3（动画）'，新日期（2015,08,10,20,21,16），新日期，08,10,20,22,01）]，
['学生571'，'补充信息'，'学生571查看碳水化合物网站'，新日期（2015,08,10， 20,22,01），新日期（2015,08,10,20,23,58）]，
['学生571'，'学习路径'，'学生571查看脂质课本'，新日期2015,08,10,20,23,58），新日期（2015,08,10,20,24,35）]，
['学生571'，'补充信息'，'学生571查看核酸Acids网站'，新日期（2015,08,10,20,24,35），新日期（2015,08,10,20,33,34）]，
['学生571'，'补充信息'，'学生571观看视频：水的属性'，新日期（2015,08,10,20,33,34），新日期（2015,08,10,20,33,53）]，
['学生571'，'补充信息'，'学生571查看脂类网站'，新日期（2015,08,10,20,33,53），新日期（2015,08,10,20,43,43） ）]，
''学生571'，'补充信息'，'学生571查看复合碳水化合物是由单糖链接形成的 - 生物化学 - NCBI Bookshelf'，新日期（2015,08,10,20,43， 43），新日期（2015,08,10,20,53,28）]，
['学生571'，'测试我'，'学生571得分81％生物化学学习途径评估'，新日期（2015,08,10,20,53,28），新日期（2015,08,10,20,54,36）]
]）;
var options = {
tooltip：{isHtml：true}
};
dashboard.bind（control，chart）;
dashboard.draw（data，options）;
}
< / script>
< / body>
解决方案
您需要设置 ui.minRangeSize ，以便您的图表始终可以绘制某些内容。
或您可以取消错误，如下例所示...
google.load （'visualization'，'1'，{packages：['corechart'，'table'，'gauge'，'controls']}）; google.setOnLoadCallback（drawVisualization）;函数drawVisualization（）{var dashboard = new google.visualization.Dashboard（document.getElementById（'dashboard'））; var control = new google.visualization.ControlWrapper（{'controlType'：'ChartRangeFilter'，'containerId'：'control'，'options'：{'filterColumnIndex'：3，'ui'：{// SET MIN RANGE // 'minRangeSize'：（60 * 60 * 1000），'chartType'：'TimeLine'，'chartOptions'：{'width'：900，'height'：70，'chartArea'：{width：'100％'，height ：'80％'}，'hAxis'：{'baselineColor'：'none'}}，'chartView'：{'columns'：[3，4]}}}，}）; google.visualization.events.addListener（control，'error'，onError）;函数onError（error）{console.log（'error：'+ error.id +' - '+ error.message）; google.visualization.errors.removeError（error.id）; } {var chart = new google.visualization.ChartWrapper（{'chartType'：'Timeline'，'containerId'：'chart'，'options'：{'width'：985，'height'：600，'chartArea'：{ width：'100％'，height：'80％'}，}，'view'：{'columns'：[0，1，2，3，4]}}）; var data = new google.visualization.DataTable（）; data.addColumn（{type：'string'，id：'Student'}）; data.addColumn（{type：'string'，id：'Event Type'}）; data.addColumn（{type：'string'，role：'tooltip'，'p'：{'html'：true}}）; data.addColumn（{type：'datetime'，id：'Start'}）; data.addColumn（{type：'datetime'，id：'End'}）; data.addRows（[[''学生571'，'Pretest'，'学生571开始生物化学学习路径前测'，新日期（2015,08,10,18,52,02），新日期（2015,08,10） ，18,52,27）]，['学生571'，'学习路径'，'学生571观看氨基酸视频'，新日期（2015,08,10,18,52,27），新日期（2015， 08,10,18,52,32）]，['学生571'，'学习路径'，'学生571观看视频：Bio102水'，新日期（2015,08,10,18,52,32），新日期（2015,08,10,18,52,33）]，['学生571'，'学习路径'，'学生571观看氨基酸视频'，新日期（2015,08,10,18,52,33 ），新日期（2015,08,10,18,52,40）]，['学生571'，'学习路径'，'学生571查看主要有机化合物的元素'，新日期（2015,08 ，10,18,52,40），新日期（2015,08,10,18,52,55）]，['学生571'，'学习路径'，'学生571查看氨基酸视频'，新日期2015,08,10,18,52,55），新日期（2015,08,10,19,01,48）]，['Stu凹痕571'，'补充信息'，'学生571观看碳水化合物网站'，新日期（2015,08,10,19,01,48），新日期（2015,08,10,19,01,49）]， ['学生571'，'学习路径'，'学生571查看脂质教科书'，新日期（2015,08,10,19,01,49），新日期（2015,08,10,19,02,13） ]，['学生571'，'学习路径'，'学生571观看视频：Bio102 Water'，新日期（2015,08,10,19,02,13），新日期（2015,08,10,19， 02,42）]，['学生571'，'学习路径'，'学生571观看氨基酸视频'，新日期（2015,08,10,19,02,42），新日期（2015,08,10） ，新学年（2015,08,10,19,03,02），新日期（2015， 08,10,19,16,08）]，['学生571'，'学习路径'，'学生571观看视频：Bio102 Water'，新日期（2015,08,10,19,16,08），新日期（2015,08,10,19,16,11）]，['学生571'，'学习路径'，'学生571查看元素主要有机化合物，新日期（2015,08,10,19,16,11），新日期（2015,08,10,19,16,18）]，['学生571'，'学习Path'，'学生571查看生物缓冲网站3（动画）'，新日期（2015,08,10,19,16,18），新日期（2015,08,10,19,16,42）]，[ '学生571'，'补充信息'，'学生571查看碳水化合物网站'，新日期（2015,08,10,19,16,42），新日期（2015,08,10,19,16,48）] ，学生571，学习路径，学生571查看脂质教科书，新日期（2015,08,10,19,16,48），新日期（2015,08,10,19,16,53） ）]，['学生571'，'补充信息'，'学生571查看核酸网站'，新日期（2015,08,10,19,16,53），新日期（2015,08,10,19， 16,54）]，['学生571'，'补充信息'，'学生571观看视频：水的属性'，新日期（2015,08,10,19,16,54），新日期08,10,19,16,55）]，['学生571'，'补充信息'，'学生571观看Lipids网站'，新日期（2015,08,10,19,16,55），新日期（2015,08,10,19,16,57）]，['学生571'，'补充信息'，'学生571查看复合碳水化合物是由单糖形成的 - 生物化学 - NCBI Bookshelf'，新日期（2015,08,10,19,16,57），新日期（2015,08,10,19,17,03）]， ['学生571'，'学习路径'，'学生571观看氨基酸视频'，新日期（2015,08,10,19,17,03），新日期（2015,08,10,19,18,27） ）]，['学生571'，'问题'，'学生571回答细胞表面受体问题'，新日期（2015,08,10,19,18,27），新日期（2015,08,10，新的日期（2015,08,10,19,18,59），新的日期（2015年，第19,18,59页）]，['学生571'，'问题'，'学生571回答细胞表面受体问题' ，08,10,19,19,21）]，['学生571'，'问题'，'学生571回答正确的细胞表面受体问题'，新日期（2015,08,10,19,19,21） ，新日期（2015,08,10,19,19,27）]，新生日期（2015,08,10,19,19,27），新日期（2015,08,10,19,19， 43）]，['学生571'，'学习路径'，'学生571观看视频：Bio102 Water'，新日期（2015,08,10,19,19,43），新日期（2015,08,10， 19,19,56）]，'学生571'，'学习路径'，'学生571观看氨基酸视频'，新日期（2015,08,10,19,19,56），新日期（2015,08 ，10,19,19,57）]，['学生571'，'学习路径'，'学生571观看视频：Bio102 Water'，新日期（2015,08,10,19,19,57），新日期（2015,08,10,19,20,33）]，['学生571'，'学习路径'，'学生571观看氨基酸视频'，新日期（2015,08,10,19,20,33） ，新日期（2015,08,10,19,21,00）]，['学生571'，'学习路径'，'学生571观看氨基酸视频'，新日期（2015,08,10,19,21 ，00），新日期（2015,08,10,19,21,02）]，['学生571'，'学习路径'，'学生571 watche d视频：Bio102 Water'，新日期（2015,08,10,19,21,02），新日期（2015,08,10,19,21,50）]，['学生571'，'学习路径' ，'学生571观看视频：Bio102 Water'，新日期（2015,08,10,19,21,50），新日期（2015,08,10,19,22,14）]，['学生571' '问题'，'学生571回答水问题属性正确'，新日期（2015,08,10,19,22,14），新日期（2015,08,10,19,30,32）]，['新生日期（2015,08,10,19,30,32），新日期（2015,08,10,20，新生日期），学生571'，'学习路径'，'学生571' （动画）'，新的日期（2015,08,10,20,21,16），新的日期（2015） ，08,10,20,22,01）]，['学生571'，'补充信息'，'学生571查看碳水化合物网站'，新日期（2015,08,10,20,22,01），新日期（2015,08,10,20,23,58）]，['学生571'，'学习路径'，'学生571 v新的日期（2015,08,10,20,23,58），新的日期（2015,08,10,20,24,35）]，['学生571'，'补充信息'，'学生571查看核酸网站'，新日期（2015,08,10,20,24,35），新日期（2015,08,10,20,33,34）]，['学生571'，'补充信息'，'学生571观看视频：水的属性'，新日期（2015,08,10,20,33,34），新日期（2015,08,10,20,33,53）]，''学生571'，'补充信息'，'学生571观看脂类网站'，新日期（2015,08,10,20,33,53），新日期（2015,08,10,20,43,43）]，[ '学生571'，'补充信息'，'学生571查看复合碳水化合物是由单糖链接形成的 - 生物化学 - NCBI Bookshelf'，新日期（2015,08,10,20,43,43），新日期（2015， 08,10,20,53,28）]，['学生571'，'测试我'，'学生571在生物化学学习途径评估中获得81％'，新日期（2015,08,10,20,53， 28），新日期（2015,08,10,20,54,36）]] ）; var options = {tooltip：{isHtml：true}}; dashboard.bind（控制，图表）; dashboard.draw（数据，选项）; }
< script src =https：// www .google.com / JSAPI>< /脚本> <风格> div.google-visualization-tooltip {font-size：0.9em;填充：10px;宽度：200px; }< / style> < div id =dashboard> < div id =chartstyle =position：relative; width：985px; height：200px;>< / div> < div>选择要放大的时间范围。< / div> < div id =control>< / div> < / DIV> < div id =junk_divstyle =display：none;>< / div>
b $ b
I've created a timeline viz using Google Charts and added a dashboard with a chart range filter to allow people to move around and even zoom in so as to see certain entries more clearly. While it mostly works, sometimes it throws a "participants failed to draw" error. I've looked up other responses for this type of error but couldn't find anything that worked. See a sampling below:
- https://groups.google.com/forum/#!topic/google-visualization-api/AFfEjG6lG7k
- Google Chart with slicer returns: One or more participants failed to draw()×
- https://stackoverflow.com/questions/30944118/google-charts-timeline-with-chartrangefilter-error-one-or-more-participants-fai
- One or more participants failed to draw()
- One or more participants failed to draw(): error
As far as I can make out, the issue is that, when at a certain zoom level, the tooltips (which each element has) is not showing. It's being read as null, which is prompting the error. Can anyone recommend a fix?
Code below:
<!DOCTYPE html>
<meta charset="utf-8">
<head>
<title>LeaP Pharmacy Student Path Data</title>
<style>
div.google-visualization-tooltip {
font-size: 0.9em;
padding: 10px;
width: 200px;
}
</style>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
</head>
<body style="font-family: Arial;border: 0 none;">
<div id="dashboard">
<div id="chart" style="position: relative; width: 985px; height: 200px;"></div>
<div>Select a time range to zoom in.</div>
<div id="control"></div>
</div>
<div id="junk_div" style="display: none;"></div>
<script type="text/javascript">
google.load('visualization', '1', {
packages: ['corechart', 'table', 'gauge', 'controls']
});
google.setOnLoadCallback(drawVisualization);
function drawVisualization() {
var dashboard = new google.visualization.Dashboard(
document.getElementById('dashboard'));
var control = new google.visualization.ControlWrapper({
'controlType': 'ChartRangeFilter',
'containerId': 'control',
'options': {
// Filter by the date axis.
'filterColumnIndex': 3,
'ui': {
'chartType': 'TimeLine',
'chartOptions': {
'width': 900,
'height': 70,
'chartArea': {
width: '100%', // make sure this is the same for the chart and control so the axes align right
height: '80%'
},
'hAxis': {
'baselineColor': 'none'
}
},
// This, this view has two columns: the start and end dates.
'chartView': {
'columns': [3, 4]
}
}
},
// Initial range: 2015-08-10 to 2015-08-10.
//'state': {'range': {'start': new Date(20150810185227),
// 'end': new Date(20150810205436)}
// }
});
var chart = new google.visualization.ChartWrapper({
'chartType': 'Timeline',
'containerId': 'chart',
'options': {
'width': 985,
'height': 600,
'chartArea': {
width: '100%', // make sure this is the same for the chart and control so the axes align right
height: '80%'
},
},
'view': {
'columns': [0, 1, 2, 3, 4]
}
});
var data = new google.visualization.DataTable();
data.addColumn({ type: 'string', id: 'Student' });
data.addColumn({ type: 'string', id: 'Event Type' });
data.addColumn({ type: 'string', role: 'tooltip', 'p': {'html': true}});
data.addColumn({ type: 'datetime', id: 'Start' });
data.addColumn({ type: 'datetime', id: 'End' });
data.addRows([
[ 'Student 571', 'Pretest', 'Student 571 began Biological Chemistry Learning Path Pretest', new Date(2015,08,10,18,52,02), new Date(2015,08,10,18,52,27) ],
[ 'Student 571', 'Learning Path', 'Student 571 watched Amino Acids videos', new Date(2015,08,10,18,52,27), new Date(2015,08,10,18,52,32) ],
[ 'Student 571', 'Learning Path', 'Student 571 watched Video: Bio102 water', new Date(2015,08,10,18,52,32), new Date(2015,08,10,18,52,33) ],
[ 'Student 571', 'Learning Path', 'Student 571 watched Amino Acids videos', new Date(2015,08,10,18,52,33), new Date(2015,08,10,18,52,40) ],
[ 'Student 571', 'Learning Path', 'Student 571 viewed Elements of the Major Organic Compounds of Life', new Date(2015,08,10,18,52,40), new Date(2015,08,10,18,52,55) ],
[ 'Student 571', 'Learning Path', 'Student 571 viewed Amino Acids videos', new Date(2015,08,10,18,52,55), new Date(2015,08,10,19,01,48) ],
[ 'Student 571', 'Supplemental Info', 'Student 571 viewed Carbohydrates Websites', new Date(2015,08,10,19,01,48), new Date(2015,08,10,19,01,49) ],
[ 'Student 571', 'Learning Path', 'Student 571 viewed Lipids Textbooks', new Date(2015,08,10,19,01,49), new Date(2015,08,10,19,02,13) ],
[ 'Student 571', 'Learning Path', 'Student 571 viewed Video: Bio102 Water', new Date(2015,08,10,19,02,13), new Date(2015,08,10,19,02,42) ],
[ 'Student 571', 'Learning Path', 'Student 571 watched Amino Acids videos', new Date(2015,08,10,19,02,42), new Date(2015,08,10,19,03,02) ],
[ 'Student 571', 'Learning Path', 'Student 571 watched Amino Acids videos', new Date(2015,08,10,19,03,02), new Date(2015,08,10,19,16,08) ],
[ 'Student 571', 'Learning Path', 'Student 571 watched Video: Bio102 Water', new Date(2015,08,10,19,16,08), new Date(2015,08,10,19,16,11) ],
[ 'Student 571', 'Learning Path', 'Student 571 viewed Elements of the Major Organic Compounds of Life', new Date(2015,08,10,19,16,11), new Date(2015,08,10,19,16,18) ],
[ 'Student 571', 'Learning Path', 'Student 571 viewed Biological Buffers Website 3 (animation)', new Date(2015,08,10,19,16,18), new Date(2015,08,10,19,16,42) ],
[ 'Student 571', 'Supplemental Info', 'Student 571 viewed Carbohydrates Websites', new Date(2015,08,10,19,16,42), new Date(2015,08,10,19,16,48) ],
[ 'Student 571', 'Learning Path', 'Student 571 viewed Lipids Textbooks', new Date(2015,08,10,19,16,48), new Date(2015,08,10,19,16,53) ],
[ 'Student 571', 'Supplemental Info', 'Student 571 viewed Nucleic Acids Websites', new Date(2015,08,10,19,16,53), new Date(2015,08,10,19,16,54) ],
[ 'Student 571', 'Supplemental Info', 'Student 571 watched Video: The Properties of Water', new Date(2015,08,10,19,16,54), new Date(2015,08,10,19,16,55) ],
[ 'Student 571', 'Supplemental Info', 'Student 571 viewed Lipids Websites', new Date(2015,08,10,19,16,55), new Date(2015,08,10,19,16,57) ],
[ 'Student 571', 'Supplemental Info', 'Student 571 viewed Complex Carbohydrates Are Formed by Linkage of Monosaccharides - Biochemistry - NCBI Bookshelf', new Date(2015,08,10,19,16,57), new Date(2015,08,10,19,17,03) ],
[ 'Student 571', 'Learning Path', 'Student 571 watched Amino Acids Videos', new Date(2015,08,10,19,17,03), new Date(2015,08,10,19,18,27) ],
[ 'Student 571', 'Questions', 'Student 571 answered Cell-surface receptors question correctly', new Date(2015,08,10,19,18,27), new Date(2015,08,10,19,18,59) ],
[ 'Student 571', 'Questions', 'Student 571 answered Cell-surface receptors question incorrectly', new Date(2015,08,10,19,18,59), new Date(2015,08,10,19,19,21) ],
[ 'Student 571', 'Questions', 'Student 571 answered Cell-surface receptors question correctly', new Date(2015,08,10,19,19,21), new Date(2015,08,10,19,19,27) ],
[ 'Student 571', 'Learning Path', 'Student 571 watched Video: Bio102 Water', new Date(2015,08,10,19,19,27), new Date(2015,08,10,19,19,43) ],
[ 'Student 571', 'Learning Path', 'Student 571 watched Video: Bio102 Water', new Date(2015,08,10,19,19,43), new Date(2015,08,10,19,19,56) ],
[ 'Student 571', 'Learning Path', 'Student 571 watched Amino Acids Videos', new Date(2015,08,10,19,19,56), new Date(2015,08,10,19,19,57) ],
[ 'Student 571', 'Learning Path', 'Student 571 watched Video: Bio102 Water', new Date(2015,08,10,19,19,57), new Date(2015,08,10,19,20,33) ],
[ 'Student 571', 'Learning Path', 'Student 571 watched Amino Acids Videos', new Date(2015,08,10,19,20,33), new Date(2015,08,10,19,21,00) ],
[ 'Student 571', 'Learning Path', 'Student 571 watched Amino Acids Videos', new Date(2015,08,10,19,21,00), new Date(2015,08,10,19,21,02) ],
[ 'Student 571', 'Learning Path', 'Student 571 watched Video: Bio102 Water', new Date(2015,08,10,19,21,02), new Date(2015,08,10,19,21,50) ],
[ 'Student 571', 'Learning Path', 'Student 571 watched Video: Bio102 Water', new Date(2015,08,10,19,21,50), new Date(2015,08,10,19,22,14) ],
[ 'Student 571', 'Questions', 'Student 571 answered Properties of Water question correctly', new Date(2015,08,10,19,22,14), new Date(2015,08,10,19,30,32) ],
[ 'Student 571', 'Learning Path', 'Student 571 viewed Elements of the Major Organic Compounds of Life', new Date(2015,08,10,19,30,32), new Date(2015,08,10,20,21,16) ],
[ 'Student 571', 'Learning Path', 'Student 571 viewed Biological Buffers Website 3 (animation)', new Date(2015,08,10,20,21,16), new Date(2015,08,10,20,22,01) ],
[ 'Student 571', 'Supplemental Info', 'Student 571 viewed Carbohydrates Websites', new Date(2015,08,10,20,22,01), new Date(2015,08,10,20,23,58) ],
[ 'Student 571', 'Learning Path', 'Student 571 viewed Lipids Textbooks', new Date(2015,08,10,20,23,58), new Date(2015,08,10,20,24,35) ],
[ 'Student 571', 'Supplemental Info', 'Student 571 viewed Nucleic Acids Websites', new Date(2015,08,10,20,24,35), new Date(2015,08,10,20,33,34) ],
[ 'Student 571', 'Supplemental Info', 'Student 571 watched Video: The Properties of Water', new Date(2015,08,10,20,33,34), new Date(2015,08,10,20,33,53) ],
[ 'Student 571', 'Supplemental Info', 'Student 571 viewed Lipids Websites', new Date(2015,08,10,20,33,53), new Date(2015,08,10,20,43,43) ],
[ 'Student 571', 'Supplemental Info', 'Student 571 viewed Complex Carbohydrates Are Formed by Linkage of Monosaccharides - Biochemistry - NCBI Bookshelf', new Date(2015,08, 10,20,43,43), new Date(2015,08, 10,20,53,28) ],
[ 'Student 571', 'Test Me', 'Student 571 scored 81% on Biological Chemistry Learning Path assessment', new Date(2015,08,10,20,53,28), new Date(2015,08,10,20,54,36) ]
]);
var options = {
tooltip: {isHtml: true}
};
dashboard.bind(control, chart);
dashboard.draw(data, options);
}
</script>
</body>
解决方案
You need to set ui.minRangeSize so that your chart always has something to draw.
Or you can suppress the error, as in this example...
google.load('visualization', '1', {
packages: ['corechart', 'table', 'gauge', 'controls']
});
google.setOnLoadCallback(drawVisualization);
function drawVisualization() {
var dashboard = new google.visualization.Dashboard(
document.getElementById('dashboard'));
var control = new google.visualization.ControlWrapper({
'controlType': 'ChartRangeFilter',
'containerId': 'control',
'options': {
'filterColumnIndex': 3,
'ui': {
// SET MIN RANGE
//'minRangeSize': (60 * 60 * 1000),
'chartType': 'TimeLine',
'chartOptions': {
'width': 900,
'height': 70,
'chartArea': {
width: '100%',
height: '80%'
},
'hAxis': {
'baselineColor': 'none'
}
},
'chartView': {
'columns': [3, 4]
}
}
},
});
google.visualization.events.addListener(control, 'error', onError);
function onError(error) {
console.log('error: ' + error.id + ' - ' + error.message);
google.visualization.errors.removeError(error.id);
}
var chart = new google.visualization.ChartWrapper({
'chartType': 'Timeline',
'containerId': 'chart',
'options': {
'width': 985,
'height': 600,
'chartArea': {
width: '100%',
height: '80%'
},
},
'view': {
'columns': [0, 1, 2, 3, 4]
}
});
var data = new google.visualization.DataTable();
data.addColumn({ type: 'string', id: 'Student' });
data.addColumn({ type: 'string', id: 'Event Type' });
data.addColumn({ type: 'string', role: 'tooltip', 'p': {'html': true}});
data.addColumn({ type: 'datetime', id: 'Start' });
data.addColumn({ type: 'datetime', id: 'End' });
data.addRows([
[ 'Student 571', 'Pretest', 'Student 571 began Biological Chemistry Learning Path Pretest', new Date(2015,08,10,18,52,02), new Date(2015,08,10,18,52,27) ],
[ 'Student 571', 'Learning Path', 'Student 571 watched Amino Acids videos', new Date(2015,08,10,18,52,27), new Date(2015,08,10,18,52,32) ],
[ 'Student 571', 'Learning Path', 'Student 571 watched Video: Bio102 water', new Date(2015,08,10,18,52,32), new Date(2015,08,10,18,52,33) ],
[ 'Student 571', 'Learning Path', 'Student 571 watched Amino Acids videos', new Date(2015,08,10,18,52,33), new Date(2015,08,10,18,52,40) ],
[ 'Student 571', 'Learning Path', 'Student 571 viewed Elements of the Major Organic Compounds of Life', new Date(2015,08,10,18,52,40), new Date(2015,08,10,18,52,55) ],
[ 'Student 571', 'Learning Path', 'Student 571 viewed Amino Acids videos', new Date(2015,08,10,18,52,55), new Date(2015,08,10,19,01,48) ],
[ 'Student 571', 'Supplemental Info', 'Student 571 viewed Carbohydrates Websites', new Date(2015,08,10,19,01,48), new Date(2015,08,10,19,01,49) ],
[ 'Student 571', 'Learning Path', 'Student 571 viewed Lipids Textbooks', new Date(2015,08,10,19,01,49), new Date(2015,08,10,19,02,13) ],
[ 'Student 571', 'Learning Path', 'Student 571 viewed Video: Bio102 Water', new Date(2015,08,10,19,02,13), new Date(2015,08,10,19,02,42) ],
[ 'Student 571', 'Learning Path', 'Student 571 watched Amino Acids videos', new Date(2015,08,10,19,02,42), new Date(2015,08,10,19,03,02) ],
[ 'Student 571', 'Learning Path', 'Student 571 watched Amino Acids videos', new Date(2015,08,10,19,03,02), new Date(2015,08,10,19,16,08) ],
[ 'Student 571', 'Learning Path', 'Student 571 watched Video: Bio102 Water', new Date(2015,08,10,19,16,08), new Date(2015,08,10,19,16,11) ],
[ 'Student 571', 'Learning Path', 'Student 571 viewed Elements of the Major Organic Compounds of Life', new Date(2015,08,10,19,16,11), new Date(2015,08,10,19,16,18) ],
[ 'Student 571', 'Learning Path', 'Student 571 viewed Biological Buffers Website 3 (animation)', new Date(2015,08,10,19,16,18), new Date(2015,08,10,19,16,42) ],
[ 'Student 571', 'Supplemental Info', 'Student 571 viewed Carbohydrates Websites', new Date(2015,08,10,19,16,42), new Date(2015,08,10,19,16,48) ],
[ 'Student 571', 'Learning Path', 'Student 571 viewed Lipids Textbooks', new Date(2015,08,10,19,16,48), new Date(2015,08,10,19,16,53) ],
[ 'Student 571', 'Supplemental Info', 'Student 571 viewed Nucleic Acids Websites', new Date(2015,08,10,19,16,53), new Date(2015,08,10,19,16,54) ],
[ 'Student 571', 'Supplemental Info', 'Student 571 watched Video: The Properties of Water', new Date(2015,08,10,19,16,54), new Date(2015,08,10,19,16,55) ],
[ 'Student 571', 'Supplemental Info', 'Student 571 viewed Lipids Websites', new Date(2015,08,10,19,16,55), new Date(2015,08,10,19,16,57) ],
[ 'Student 571', 'Supplemental Info', 'Student 571 viewed Complex Carbohydrates Are Formed by Linkage of Monosaccharides - Biochemistry - NCBI Bookshelf', new Date(2015,08,10,19,16,57), new Date(2015,08,10,19,17,03) ],
[ 'Student 571', 'Learning Path', 'Student 571 watched Amino Acids Videos', new Date(2015,08,10,19,17,03), new Date(2015,08,10,19,18,27) ],
[ 'Student 571', 'Questions', 'Student 571 answered Cell-surface receptors question correctly', new Date(2015,08,10,19,18,27), new Date(2015,08,10,19,18,59) ],
[ 'Student 571', 'Questions', 'Student 571 answered Cell-surface receptors question incorrectly', new Date(2015,08,10,19,18,59), new Date(2015,08,10,19,19,21) ],
[ 'Student 571', 'Questions', 'Student 571 answered Cell-surface receptors question correctly', new Date(2015,08,10,19,19,21), new Date(2015,08,10,19,19,27) ],
[ 'Student 571', 'Learning Path', 'Student 571 watched Video: Bio102 Water', new Date(2015,08,10,19,19,27), new Date(2015,08,10,19,19,43) ],
[ 'Student 571', 'Learning Path', 'Student 571 watched Video: Bio102 Water', new Date(2015,08,10,19,19,43), new Date(2015,08,10,19,19,56) ],
[ 'Student 571', 'Learning Path', 'Student 571 watched Amino Acids Videos', new Date(2015,08,10,19,19,56), new Date(2015,08,10,19,19,57) ],
[ 'Student 571', 'Learning Path', 'Student 571 watched Video: Bio102 Water', new Date(2015,08,10,19,19,57), new Date(2015,08,10,19,20,33) ],
[ 'Student 571', 'Learning Path', 'Student 571 watched Amino Acids Videos', new Date(2015,08,10,19,20,33), new Date(2015,08,10,19,21,00) ],
[ 'Student 571', 'Learning Path', 'Student 571 watched Amino Acids Videos', new Date(2015,08,10,19,21,00), new Date(2015,08,10,19,21,02) ],
[ 'Student 571', 'Learning Path', 'Student 571 watched Video: Bio102 Water', new Date(2015,08,10,19,21,02), new Date(2015,08,10,19,21,50) ],
[ 'Student 571', 'Learning Path', 'Student 571 watched Video: Bio102 Water', new Date(2015,08,10,19,21,50), new Date(2015,08,10,19,22,14) ],
[ 'Student 571', 'Questions', 'Student 571 answered Properties of Water question correctly', new Date(2015,08,10,19,22,14), new Date(2015,08,10,19,30,32) ],
[ 'Student 571', 'Learning Path', 'Student 571 viewed Elements of the Major Organic Compounds of Life', new Date(2015,08,10,19,30,32), new Date(2015,08,10,20,21,16) ],
[ 'Student 571', 'Learning Path', 'Student 571 viewed Biological Buffers Website 3 (animation)', new Date(2015,08,10,20,21,16), new Date(2015,08,10,20,22,01) ],
[ 'Student 571', 'Supplemental Info', 'Student 571 viewed Carbohydrates Websites', new Date(2015,08,10,20,22,01), new Date(2015,08,10,20,23,58) ],
[ 'Student 571', 'Learning Path', 'Student 571 viewed Lipids Textbooks', new Date(2015,08,10,20,23,58), new Date(2015,08,10,20,24,35) ],
[ 'Student 571', 'Supplemental Info', 'Student 571 viewed Nucleic Acids Websites', new Date(2015,08,10,20,24,35), new Date(2015,08,10,20,33,34) ],
[ 'Student 571', 'Supplemental Info', 'Student 571 watched Video: The Properties of Water', new Date(2015,08,10,20,33,34), new Date(2015,08,10,20,33,53) ],
[ 'Student 571', 'Supplemental Info', 'Student 571 viewed Lipids Websites', new Date(2015,08,10,20,33,53), new Date(2015,08,10,20,43,43) ],
[ 'Student 571', 'Supplemental Info', 'Student 571 viewed Complex Carbohydrates Are Formed by Linkage of Monosaccharides - Biochemistry - NCBI Bookshelf', new Date(2015,08, 10,20,43,43), new Date(2015,08, 10,20,53,28) ],
[ 'Student 571', 'Test Me', 'Student 571 scored 81% on Biological Chemistry Learning Path assessment', new Date(2015,08,10,20,53,28), new Date(2015,08,10,20,54,36) ]
]);
var options = {
tooltip: {isHtml: true}
};
dashboard.bind(control, chart);
dashboard.draw(data, options);
}
<script src="https://www.google.com/jsapi"></script>
<style>
div.google-visualization-tooltip {
font-size: 0.9em;
padding: 10px;
width: 200px;
}
</style>
<div id="dashboard">
<div id="chart" style="position: relative; width: 985px; height: 200px;"></div>
<div>Select a time range to zoom in.</div>
<div id="control"></div>
</div>
<div id="junk_div" style="display: none;"></div>
这篇关于Google图表时间线参与者未能绘制的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
