问题
I am newbie to JS. I want to visualize the time interval data where each event is defined as follows:
[label; start time: end time]
Label: string And Start/end time are in millisecond/microseconds
I can visualize this data with Google Timeline visualization:
But I want add some other properties to this. Since my interval data will be in milliseconds.
- I want to have grid spaced lets say some x values.
- Labeled X - axis like 0----5----10----15
- Zooming option: Similar to what we have in Google AnnotatedTimeLine. Since a given row we may have thousands of events and we are interested to analyze the details within given time range [2200ms-2500ms].
how can we have zooming option in TimeLine like given in above image(AnnotatedTimeLine ).
In Short, I am seeking Google AnnotatedTimeLine like facilities in Google TimeLine package. How can I do that ?
Since our data is interval data (not a time-series data) we can't use AnnotatedTimeLine visualization.
Any help will be appreciated. :)
回答1:
first, there aren't any configuration options to control the x-axis labels
they are set dynamically when the chart is drawn, and change depending on the time range displayed
next, the zooming option found on an annotation chart is available as a control for any chart
the ChartRangeFilter can be bound to a chart using a Dashboard
see following working snippet...
(adapted from another answer)
google.charts.load('current', {
callback: drawDashboard,
packages: ['controls']
});
function drawDashboard() {
var dashboard = new google.visualization.Dashboard(
document.getElementById('dashboard')
);
var control = new google.visualization.ControlWrapper({
controlType: 'ChartRangeFilter',
containerId: 'control',
options: {
filterColumnIndex: 3,
ui: {
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', function (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%'
},
tooltip: {
isHtml: true
}
},
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)]
]);
dashboard.bind(control, chart);
dashboard.draw(data);
}div.google-visualization-tooltip {
font-size: 0.9em;
padding: 10px;
width: 200px;
}<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="dashboard">
<div id="chart" style="position: relative; width: 985px; height: 100px;"></div>
<div>Select a time range to zoom in.</div>
<div id="control"></div>
</div>来源：https://stackoverflow.com/questions/40957367/interactive-timeline-charts-for-interval-event-label-start-end-data