- Home
- Products
- Charts
- Guides
- Overview
- A simple example
- Labeling the bars
- An advanced example
- Putting bars on one row
- Changing the fonts
- Controlling the colors
- Overlapping gridlines
- Customizing tooltips
- Loading
- Data format
- Configuration options
- Methods
- Events
- Data policy
Overview
A timeline is a chart that depicts how a set ofresources are used over time. If you're managing a software projectand want to illustrate who is doing what and when, or if you'reorganizing a conference and need to schedule meeting rooms, a timelineis often a reasonable visualization choice. One popular type oftimeline is the Gantt chart.
Note: In JavaScript Date objects, months are indexed starting at zero and go up through eleven, with January being month 0 and December being month 11. If your timeline seems off by a month, this is most likely why. For more information, see the Dates and Times page.
A simple example
Let's say you want to plot when American presidents served theirterms. Here, the "resources" are the presidents, and we can plot eachpresident's term as a bar:
Hovering over a bar brings up a tooltip with more detailed information.
After loading the timeline package and defining acallback to draw the chart when the page is rendered,the drawChart() method instantiatesa google.visualization.Timeline() and then fillsa dataTable with one row for each president.
Inside the dataTable, the first column is thepresident's name, and the second and third columns are the start andend times. These have the JavaScript Date type, but theycould also be plain numbers.
Finally, we invoke the draw() method of the chart,which displays it inside a div with the same identifier(timeline) used when container was declaredin the first line of drawChart().
<html> <head> <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <script type="text/javascript"> google.charts.load('current', {'packages':['timeline']}); google.charts.setOnLoadCallback(drawChart); function drawChart() { var container = document.getElementById('timeline'); var chart = new google.visualization.Timeline(container); var dataTable = new google.visualization.DataTable(); dataTable.addColumn({ type: 'string', id: 'President' }); dataTable.addColumn({ type: 'date', id: 'Start' }); dataTable.addColumn({ type: 'date', id: 'End' }); dataTable.addRows([ [ 'Washington', new Date(1789, 3, 30), new Date(1797, 2, 4) ], [ 'Adams', new Date(1797, 2, 4), new Date(1801, 2, 4) ], [ 'Jefferson', new Date(1801, 2, 4), new Date(1809, 2, 4) ]]); chart.draw(dataTable); } </script> </head> <body> <div id="timeline" style="height: 180px;"></div> </body></html>Google Charts timelines are customizable, and in the followingexamples we'll show you some common ways to tailor the appearance ofyour timelines.
Labeling the bars
In addition to the row labels ("Washington", "Adams", "Jefferson"above) you can label individual bars. Here, we change the row labelsto simple numbers and place each president's name on his bar.
In this code, we've inserted a new column into our data to hold thebar labels: the full name of each president. When there are fourcolumns in a timeline dataTable, the first is interpretedas the row label, the second as the bar label, and the third andfourth as start and end.
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script><script type="text/javascript"> google.charts.load("current", {packages:["timeline"]}); google.charts.setOnLoadCallback(drawChart); function drawChart() { var container = document.getElementById('example2.1'); var chart = new google.visualization.Timeline(container); var dataTable = new google.visualization.DataTable(); dataTable.addColumn({ type: 'string', id: 'Term' }); dataTable.addColumn({ type: 'string', id: 'Name' }); dataTable.addColumn({ type: 'date', id: 'Start' }); dataTable.addColumn({ type: 'date', id: 'End' }); dataTable.addRows([ [ '1', 'George Washington', new Date(1789, 3, 30), new Date(1797, 2, 4) ], [ '2', 'John Adams', new Date(1797, 2, 4), new Date(1801, 2, 4) ], [ '3', 'Thomas Jefferson', new Date(1801, 2, 4), new Date(1809, 2, 4) ]]); chart.draw(dataTable); }</script><div id="example2.1" style="height: 200px;"></div>Our new row labels above aren't very informative, so let's removethem with the timeline showRowLabels option.
By default, showRowLabelsis true. Setting it to false removes the rowlabels:
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script><script type="text/javascript"> google.charts.load("current", {packages:["timeline"]}); google.charts.setOnLoadCallback(drawChart); function drawChart() { var container = document.getElementById('example2.2'); var chart = new google.visualization.Timeline(container); var dataTable = new google.visualization.DataTable(); dataTable.addColumn({ type: 'string', id: 'Term' }); dataTable.addColumn({ type: 'string', id: 'Name' }); dataTable.addColumn({ type: 'date', id: 'Start' }); dataTable.addColumn({ type: 'date', id: 'End' }); dataTable.addRows([ [ '1', 'George Washington', new Date(1789, 3, 30), new Date(1797, 2, 4) ], [ '2', 'John Adams', new Date(1797, 2, 4), new Date(1801, 2, 4) ], [ '3', 'Thomas Jefferson', new Date(1801, 2, 4), new Date(1809, 2, 4) ]]); var options = { timeline: { showRowLabels: false } }; chart.draw(dataTable, options); }</script><div id="example2.2" style="height: 180px;"></div>An advanced example
To make our timeline more complex, let's add vice presidents andsecretaries of state to our chart. John Adams was vice presidentbefore he became president, and Thomas Jefferson was secretary ofstate, then vice president, and finally president.
In timelines, a resource will have the same color even when itappears on multiple rows, so in the following chart each person isrepresented with a consistent color.
Some secretaries of state served for very short times, so thischart is a good test of labeling. When a label is too big for the bar,it's abbreviated or eliminated, depending on the bar size. Users canalways hover over the bar to get tooltip information.
The timeline will lay out the rows in order—president on topof vice president on top of secretary of state—because that'sthe order that they appear in the code below. However, the layout ofthe bars is determined solely by the start and end times, so swappingtwo secretaries of state or two presidents inthe dataTable has no effect on the chart.
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script><script type="text/javascript"> google.charts.load("current", {packages:["timeline"]}); google.charts.setOnLoadCallback(drawChart); function drawChart() { var container = document.getElementById('example3.1'); var chart = new google.visualization.Timeline(container); var dataTable = new google.visualization.DataTable(); dataTable.addColumn({ type: 'string', id: 'Position' }); dataTable.addColumn({ type: 'string', id: 'Name' }); dataTable.addColumn({ type: 'date', id: 'Start' }); dataTable.addColumn({ type: 'date', id: 'End' }); dataTable.addRows([ [ 'President', 'George Washington', new Date(1789, 3, 30), new Date(1797, 2, 4) ], [ 'President', 'John Adams', new Date(1797, 2, 4), new Date(1801, 2, 4) ], [ 'President', 'Thomas Jefferson', new Date(1801, 2, 4), new Date(1809, 2, 4) ], [ 'Vice President', 'John Adams', new Date(1789, 3, 21), new Date(1797, 2, 4)], [ 'Vice President', 'Thomas Jefferson', new Date(1797, 2, 4), new Date(1801, 2, 4)], [ 'Vice President', 'Aaron Burr', new Date(1801, 2, 4), new Date(1805, 2, 4)], [ 'Vice President', 'George Clinton', new Date(1805, 2, 4), new Date(1812, 3, 20)], [ 'Secretary of State', 'John Jay', new Date(1789, 8, 25), new Date(1790, 2, 22)], [ 'Secretary of State', 'Thomas Jefferson', new Date(1790, 2, 22), new Date(1793, 11, 31)], [ 'Secretary of State', 'Edmund Randolph', new Date(1794, 0, 2), new Date(1795, 7, 20)], [ 'Secretary of State', 'Timothy Pickering', new Date(1795, 7, 20), new Date(1800, 4, 12)], [ 'Secretary of State', 'Charles Lee', new Date(1800, 4, 13), new Date(1800, 5, 5)], [ 'Secretary of State', 'John Marshall', new Date(1800, 5, 13), new Date(1801, 2, 4)], [ 'Secretary of State', 'Levi Lincoln', new Date(1801, 2, 5), new Date(1801, 4, 1)], [ 'Secretary of State', 'James Madison', new Date(1801, 4, 2), new Date(1809, 2, 3)] ]); chart.draw(dataTable); }</script><div id="example3.1" style="height: 200px;"></div>Putting bars on one row
Unlike popes, there can only be one U.S. president at a time, so if we label all of our rows as "President", the timeline will combine the three rows of our first chart into one row for a cleaner presentation. You can control this behavior with the groupByRowLabel option.
Here's the default behavior:
Now let's set groupByRowLabel to false andsplit the one row into three:
The code to turn off grouping:
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script><script type="text/javascript"> google.charts.load("current", {packages:["timeline"]}); google.charts.setOnLoadCallback(drawChart); function drawChart() { var container = document.getElementById('example4.2'); var chart = new google.visualization.Timeline(container); var dataTable = new google.visualization.DataTable(); dataTable.addColumn({ type: 'string', id: 'Role' }); dataTable.addColumn({ type: 'string', id: 'Name' }); dataTable.addColumn({ type: 'date', id: 'Start' }); dataTable.addColumn({ type: 'date', id: 'End' }); dataTable.addRows([ [ 'President', 'George Washington', new Date(1789, 3, 30), new Date(1797, 2, 4) ], [ 'President', 'John Adams', new Date(1797, 2, 4), new Date(1801, 2, 4) ], [ 'President', 'Thomas Jefferson', new Date(1801, 2, 4), new Date(1809, 2, 4) ]]); var options = { timeline: { groupByRowLabel: false } }; chart.draw(dataTable, options); }</script><div id="example4.2" style="height: 200px;"></div>Controlling the colors
By default, Google Charts chooses colors optimized for aestheticsand readability (including users with visual disabilities). You cantailor the default behavior with the colorByRowLabel,singleColor, backgroundColorand colors options.
The colorByRowLabel option colors all bars on the samerow the same. This can be a good choice when there are gaps betweenyour bars.
colorByRowLabel defaults to false, sohere we override that and set it to true.
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script><script type="text/javascript"> google.charts.load("current", {packages:["timeline"]}); google.charts.setOnLoadCallback(drawChart); function drawChart() { var container = document.getElementById('example5.1'); var chart = new google.visualization.Timeline(container); var dataTable = new google.visualization.DataTable(); dataTable.addColumn({ type: 'string', id: 'Room' }); dataTable.addColumn({ type: 'string', id: 'Name' }); dataTable.addColumn({ type: 'date', id: 'Start' }); dataTable.addColumn({ type: 'date', id: 'End' }); dataTable.addRows([ [ 'Magnolia Room', 'Beginning JavaScript', new Date(0,0,0,12,0,0), new Date(0,0,0,13,30,0) ], [ 'Magnolia Room', 'Intermediate JavaScript', new Date(0,0,0,14,0,0), new Date(0,0,0,15,30,0) ], [ 'Magnolia Room', 'Advanced JavaScript', new Date(0,0,0,16,0,0), new Date(0,0,0,17,30,0) ], [ 'Willow Room', 'Beginning Google Charts', new Date(0,0,0,12,30,0), new Date(0,0,0,14,0,0) ], [ 'Willow Room', 'Intermediate Google Charts', new Date(0,0,0,14,30,0), new Date(0,0,0,16,0,0) ], [ 'Willow Room', 'Advanced Google Charts', new Date(0,0,0,16,30,0), new Date(0,0,0,18,0,0) ]]); var options = { timeline: { colorByRowLabel: true } }; chart.draw(dataTable, options); }</script><div id="example5.1" style="height: 100px;"></div>If you want all bars the same color regardless of what row they're on, usethe singleColor option:
In the code below, singleColor is set to a hex valueto color all the bars light green:
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script><script type="text/javascript"> google.charts.load("current", {packages:["timeline"]}); google.charts.setOnLoadCallback(drawChart); function drawChart() { var container = document.getElementById('example5.2'); var chart = new google.visualization.Timeline(container); var dataTable = new google.visualization.DataTable(); dataTable.addColumn({ type: 'string', id: 'Room' }); dataTable.addColumn({ type: 'string', id: 'Name' }); dataTable.addColumn({ type: 'date', id: 'Start' }); dataTable.addColumn({ type: 'date', id: 'End' }); dataTable.addRows([ [ 'Magnolia Room', 'CSS Fundamentals', new Date(0,0,0,12,0,0), new Date(0,0,0,14,0,0) ], [ 'Magnolia Room', 'Intro JavaScript', new Date(0,0,0,14,30,0), new Date(0,0,0,16,0,0) ], [ 'Magnolia Room', 'Advanced JavaScript', new Date(0,0,0,16,30,0), new Date(0,0,0,19,0,0) ], [ 'Gladiolus Room', 'Intermediate Perl', new Date(0,0,0,12,30,0), new Date(0,0,0,14,0,0) ], [ 'Gladiolus Room', 'Advanced Perl', new Date(0,0,0,14,30,0), new Date(0,0,0,16,0,0) ], [ 'Gladiolus Room', 'Applied Perl', new Date(0,0,0,16,30,0), new Date(0,0,0,18,0,0) ], [ 'Petunia Room', 'Google Charts', new Date(0,0,0,12,30,0), new Date(0,0,0,14,0,0) ], [ 'Petunia Room', 'Closure', new Date(0,0,0,14,30,0), new Date(0,0,0,16,0,0) ], [ 'Petunia Room', 'App Engine', new Date(0,0,0,16,30,0), new Date(0,0,0,18,30,0) ]]); var options = { timeline: { singleColor: '#8d8' }, }; chart.draw(dataTable, options); }</script><div id="example5.2" style="height: 150px;"></div>You can control the background color of the rowswith the backgroundColor option:
The backgroundColor is specified as a hex value. Here,we pair it with colorByRowLabel to show tracks in aconference:
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script><script type="text/javascript"> google.charts.load("current", {packages:["timeline"]}); google.charts.setOnLoadCallback(drawChart); function drawChart() { var container = document.getElementById('example5.3'); var chart = new google.visualization.Timeline(container); var dataTable = new google.visualization.DataTable(); dataTable.addColumn({ type: 'string', id: 'Room' }); dataTable.addColumn({ type: 'string', id: 'Name' }); dataTable.addColumn({ type: 'date', id: 'Start' }); dataTable.addColumn({ type: 'date', id: 'End' }); dataTable.addRows([ [ 'Magnolia Room', 'CSS Fundamentals', new Date(0,0,0,12,0,0), new Date(0,0,0,14,0,0) ], [ 'Magnolia Room', 'Intro JavaScript', new Date(0,0,0,14,30,0), new Date(0,0,0,16,0,0) ], [ 'Magnolia Room', 'Advanced JavaScript', new Date(0,0,0,16,30,0), new Date(0,0,0,19,0,0) ], [ 'Gladiolus Room', 'Intermediate Perl', new Date(0,0,0,12,30,0), new Date(0,0,0,14,0,0) ], [ 'Gladiolus Room', 'Advanced Perl', new Date(0,0,0,14,30,0), new Date(0,0,0,16,0,0) ], [ 'Gladiolus Room', 'Applied Perl', new Date(0,0,0,16,30,0), new Date(0,0,0,18,0,0) ], [ 'Petunia Room', 'Google Charts', new Date(0,0,0,12,30,0), new Date(0,0,0,14,0,0) ], [ 'Petunia Room', 'Closure', new Date(0,0,0,14,30,0), new Date(0,0,0,16,0,0) ], [ 'Petunia Room', 'App Engine', new Date(0,0,0,16,30,0), new Date(0,0,0,18,30,0) ]]); var options = { timeline: { colorByRowLabel: true }, backgroundColor: '#ffd' }; chart.draw(dataTable, options); }</script><div id="example5.3" style="height: 150px;"></div>Then, to set the background color to alternating or non-alternating by row index,use the alternatingRowStyle option (active v51+):
<script src="https://www.gstatic.com/charts/loader.js"></script><script> google.charts.load("current", {packages:["timeline"]}); google.charts.setOnLoadCallback(drawChart); function drawChart() { var container = document.getElementById('example5.4'); var chart = new google.visualization.Timeline(container); var dataTable = new google.visualization.DataTable(); dataTable.addColumn({ type: 'string', id: 'Room' }); dataTable.addColumn({ type: 'string', id: 'Name' }); dataTable.addColumn({ type: 'date', id: 'Start' }); dataTable.addColumn({ type: 'date', id: 'End' }); dataTable.addRows([ [ 'Magnolia Room', 'CSS Fundamentals', new Date(0,0,0,12,0,0), new Date(0,0,0,14,0,0) ], [ 'Magnolia Room', 'Intro JavaScript', new Date(0,0,0,14,30,0), new Date(0,0,0,16,0,0) ], [ 'Magnolia Room', 'Advanced JavaScript', new Date(0,0,0,16,30,0), new Date(0,0,0,19,0,0) ], [ 'Gladiolus Room', 'Intermediate Perl', new Date(0,0,0,12,30,0), new Date(0,0,0,14,0,0) ], [ 'Gladiolus Room', 'Advanced Perl', new Date(0,0,0,14,30,0), new Date(0,0,0,16,0,0) ], [ 'Gladiolus Room', 'Applied Perl', new Date(0,0,0,16,30,0), new Date(0,0,0,18,0,0) ], [ 'Petunia Room', 'Google Charts', new Date(0,0,0,12,30,0), new Date(0,0,0,14,0,0) ], [ 'Petunia Room', 'Closure', new Date(0,0,0,14,30,0), new Date(0,0,0,16,0,0) ], [ 'Petunia Room', 'App Engine', new Date(0,0,0,16,30,0), new Date(0,0,0,18,30,0) ]]); var options = { timeline: { colorByRowLabel: true }, alternatingRowStyle: false }; chart.draw(dataTable, options); }</script><div id="example5.4" style="height: 150px;"></div>If you want to control the colors of individual bars, usethe colors option:
colors takes an array of hex values, which are appliedto the bars in order:
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script><script type="text/javascript"> google.charts.load("current", {packages:["timeline"]}); google.charts.setOnLoadCallback(drawChart); function drawChart() { var container = document.getElementById('example5.5'); var chart = new google.visualization.Timeline(container); var dataTable = new google.visualization.DataTable(); dataTable.addColumn({ type: 'string', id: 'Role' }); dataTable.addColumn({ type: 'string', id: 'Name' }); dataTable.addColumn({ type: 'date', id: 'Start' }); dataTable.addColumn({ type: 'date', id: 'End' }); dataTable.addRows([ [ 'President', 'George Washington', new Date(1789, 3, 30), new Date(1797, 2, 4) ], [ 'President', 'John Adams', new Date(1797, 2, 4), new Date(1801, 2, 4) ], [ 'President', 'Thomas Jefferson', new Date(1801, 2, 4), new Date(1809, 2, 4) ]]); var options = { colors: ['#cbb69d', '#603913', '#c69c6e'], }; chart.draw(dataTable, options); }</script><div id="example5.5" style="height: 150px;"></div>If your chart requires more colors than listed, the chart willbehave as though singleColor is set to the first color inthe list. (This is true for all Google Charts, not just timelines.)
Another way of controlling the colors of individual bars is to use a columnwith the style role.
The code to add and populate a style column:
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script><script type="text/javascript"> google.charts.load("current", {packages:["timeline"]}); google.charts.setOnLoadCallback(drawChart); function drawChart() { var container = document.getElementById('example5.6'); var chart = new google.visualization.Timeline(container); var dataTable = new google.visualization.DataTable(); dataTable.addColumn({ type: 'string', id: 'Role' }); dataTable.addColumn({ type: 'string', id: 'Name' }); dataTable.addColumn({ type: 'string', id: 'style', role: 'style' }); dataTable.addColumn({ type: 'date', id: 'Start' }); dataTable.addColumn({ type: 'date', id: 'End' }); dataTable.addRows([ [ 'President', 'George Washington', '#cbb69d', new Date(1789, 3, 30), new Date(1797, 2, 4)], [ 'President', 'John Adams', '#603913', new Date(1797, 2, 4), new Date(1801, 2, 4) ], [ 'President', 'Thomas Jefferson', '#c69c6e', new Date(1801, 2, 4), new Date(1809, 2, 4) ]]); chart.draw(dataTable); }</script><div id="example5.6" style="height: 150px;"></div>Changing the fonts
You can choose the typeface and font for the labels of each rowwith rowLabelStyle, and for the labels on each barwith barLabelStyle. Both are demonstrated below.
Note: Be sure to choose typefaces that your users'browsers will be able to render.
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script><script type="text/javascript"> google.charts.load("current", {packages:["timeline"]}); google.charts.setOnLoadCallback(drawChart); function drawChart() { var container = document.getElementById('example6.1'); var chart = new google.visualization.Timeline(container); var dataTable = new google.visualization.DataTable(); dataTable.addColumn({ type: 'string', id: 'Role' }); dataTable.addColumn({ type: 'string', id: 'Name' }); dataTable.addColumn({ type: 'date', id: 'Start' }); dataTable.addColumn({ type: 'date', id: 'End' }); dataTable.addRows([ [ 'Washington', 'George Washington', new Date(1789, 3, 30), new Date(1797, 2, 4) ], [ 'Adams', 'John Adams', new Date(1797, 2, 4), new Date(1801, 2, 4) ], [ 'Jefferson', 'Thomas Jefferson', new Date(1801, 2, 4), new Date(1809, 2, 4) ]]); var options = { colors: ['#cbb69d', '#603913', '#c69c6e'], timeline: { rowLabelStyle: {fontName: 'Helvetica', fontSize: 24, color: '#603913' }, barLabelStyle: { fontName: 'Garamond', fontSize: 14 } } }; chart.draw(dataTable, options); }</script><div id="example6.1" style="height: 200px;"></div>You can't set the color of barLabel text.
Overlapping gridlines
Google Charts makes tiny adjustments to bar endpoints to avoidobscuring timeline gridlines. To prevent this behavior, setthe avoidOverlappingGridLines optionto false.
To illustrate the effect, here are two examples, the first with anoverlapped gridline and the second without.
Here's code that overlaps gridlines:
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <script type="text/javascript"> google.charts.load("current", {packages:["timeline"]}); google.charts.setOnLoadCallback(drawChart); function drawChart() { var container = document.getElementById('example7.1'); var chart = new google.visualization.Timeline(container); var dataTable = new google.visualization.DataTable(); dataTable.addColumn({ type: 'string', id: 'Room' }); dataTable.addColumn({ type: 'string', id: 'Name' }); dataTable.addColumn({ type: 'date', id: 'Start' }); dataTable.addColumn({ type: 'date', id: 'End' }); dataTable.addRows([ [ 'Magnolia Room', 'Google Charts', new Date(0,0,0,14,0,0), new Date(0,0,0,15,0,0)], [ 'Magnolia Room', 'App Engine', new Date(0,0,0,15,0,0), new Date(0,0,0,16,0,0)]]); var options = { timeline: { showRowLabels: false }, avoidOverlappingGridLines: false }; chart.draw(dataTable, options); } </script> <div id="example7.1" style="height: 200px;"></div>You can customize what users see when they hover over the bars of atimeline by adding a tooltip column into a five-column datatable. Toprovide non-default tooltips, every row of your datatable must haveall five columns (row label, bar label, tooltip, start, and end):
Hovering over a bar brings up a tooltip with the text defined inthe third column. In this chart, we have to set the second column todummy values (here, null) so that our tooltips can existin the third column.
<html> <head> <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <script type="text/javascript"> google.charts.load('current', {'packages':['timeline']}); google.charts.setOnLoadCallback(drawChart); function drawChart() { var container = document.getElementById('timeline-tooltip'); var chart = new google.visualization.Timeline(container); var dataTable = new google.visualization.DataTable(); dataTable.addColumn({ type: 'string', id: 'President' }); dataTable.addColumn({ type: 'string', id: 'dummy bar label' }); dataTable.addColumn({ type: 'string', role: 'tooltip' }); dataTable.addColumn({ type: 'date', id: 'Start' }); dataTable.addColumn({ type: 'date', id: 'End' }); dataTable.addRows([ [ 'Washington', null, 'George', new Date(1789, 3, 29), new Date(1797, 2, 3) ], [ 'Adams', null, 'John', new Date(1797, 2, 3), new Date(1801, 2, 3) ], [ 'Jefferson', null, 'Thomas', new Date(1801, 2, 3), new Date(1809, 2, 3) ]]); chart.draw(dataTable); } </script> </head> <body> <div id="timeline-tooltip" style="height: 180px;"></div> </body></html>Loading
The google.charts.load package name is timeline:
google.charts.load("current", {packages: ["timeline"]});The visualization's class name is google.visualization.Timeline:
var visualization = new google.visualization.Timeline(container);
Data format
Rows: Each row in the table represents a timeline bar.
Columns:
| Column 0 | Column 1 | Column 2 | Column 3 | Column 4 | |
|---|---|---|---|---|---|
| Purpose: | Row label | Bar label (optional) | Tooltip (optional) | Start | End |
| Data Type: | string | string | string | number or date | number or date |
| Role: | data | data | tooltip | data | data |
Configuration options
| Name | |
|---|---|
| alternatingRowStyle | Whether the chart should alternate background color by row index (i.e., tint background color of even-indexed rows a darker hue). If false, chart background will be one uniform color. If true, chart background will alternate tint by row index. (Note: active v51+) Type: boolean Default: true |
| avoidOverlappingGridLines | Whether display elements (e.g., the bars in a timeline) should obscure grid lines. If false, grid lines may be covered completely by display elements. If true, display elements may be altered to keep grid lines visible. Type: boolean Default: true |
| backgroundColor | The background color for the main area of the chart. Can be either a simple HTML color string, for example: Type: string or object Default: 'white' |
| colors | The colors to use for the chart elements. An array of strings, where each element is an HTML color string, for example: Type: Array of strings Default: default colors |
| enableInteractivity | Whether the chart throws user-based events or reacts to user interaction. If false, the chart will not throw 'select' or other interaction-based events (but will throw ready or error events), and will not display hovertext or otherwise change depending on user input. Type: boolean Default: true |
| fontName | The default font face for all text in the chart. You can override this using properties for specific chart elements. Type: string Default: 'Arial' |
| fontSize | The default font size, in pixels, of all text in the chart. You can override this using properties for specific chart elements. Type: number Default: automatic |
| forceIFrame | Draws the chart inside an inline frame. (Note that on IE8, this option is ignored; all IE8 charts are drawn in i-frames.) Type: boolean Default: false |
| height | Height of the chart, in pixels. Type: number Default: height of the containing element |
| timeline.barLabelStyle | An object that specifies the bar label text style. It has this format: {fontName: <string>, fontSize: <string>} Also see Type: object Default: null |
| timeline.colorByRowLabel | If set to true, colors every bar on the row the same. The default is to use one color per bar label. Type: boolean Default: false |
| timeline.groupByRowLabel | If set to false, creates one row for every Type: boolean Default: true |
| timeline.rowLabelStyle | An object that specifies the row label text style. It has this format: {color: <string>, fontName: <string>, fontSize: <string>} The Type: object Default: null |
| timeline.showBarLabels | If set to false, omits bar labels. The default is to show them. Type: boolean Default: true |
| timeline.showRowLabels | If set to false, omits row labels. The default is to show them. Type: boolean Default: true |
| timeline.singleColor | Colors all bars the same. Specified as a hex value (e.g., '#8d8'). Type: string Default: null |
| tooltip.isHtml | Set to Note: customization of the HTML tooltip content via the tooltip column data role is not supported by the Bubble Chart visualization. Type: boolean Default: true |
| tooltip.trigger | The user interaction that causes the tooltip to be displayed:
Type: string Default: 'focus' |
| width | Width of the chart, in pixels. Type: number Default: width of the containing element |
Methods
| Method | |
|---|---|
draw(data, options) | Draws the chart. The chart accepts further method calls only after the readyevent is fired. Extended description. Return Type: none |
clearChart() | Clears the chart, and releases all of its allocated resources. Return Type: none |
getSelection() | Returns an array of the selected chart entities. Selectable entities are bars, legend entries and categories. For this chart, only one entity can be selected at any given moment. Extended description . Return Type: Array of selection elements |
Events
| Name | |
|---|---|
error | Fired when an error occurs when attempting to render the chart. Properties: id, message |
onmouseover | Fired when the user mouses over a visual entity. Passes back the row and column indices of the corresponding data table element. A bar correlates to a cell in the data table, a legend entry to a column (row index is null), and a category to a row (column index is null). Properties: row, column |
onmouseout | Fired when the user mouses away from a visual entity. Passes back the row and column indices of the corresponding data table element. A bar correlates to a cell in the data table, a legend entry to a column (row index is null), and a category to a row (column index is null). Properties: row, column |
ready | The chart is ready for external method calls. If you want to interact with the chart, and call methods after you draw it, you should set up a listener for this event before you call the Properties: none |
select | Fired when the user clicks a visual entity. To learn what has been selected, call getSelection(). Properties: none |
Data policy
All code and data are processed and rendered in the browser. No data is sent to any server.
Except as otherwise noted, the content of this page is licensed under the Creative Commons Attribution 4.0 License, and code samples are licensed under the Apache 2.0 License. For details, see the Google Developers Site Policies. Java is a registered trademark of Oracle and/or its affiliates.
Last updated 2022-12-07 UTC.
[{ "type": "thumb-down", "id": "missingTheInformationINeed", "label":"Missing the information I need" },{ "type": "thumb-down", "id": "tooComplicatedTooManySteps", "label":"Too complicated / too many steps" },{ "type": "thumb-down", "id": "outOfDate", "label":"Out of date" },{ "type": "thumb-down", "id": "samplesCodeIssue", "label":"Samples / code issue" },{ "type": "thumb-down", "id": "otherDown", "label":"Other" }] [{ "type": "thumb-up", "id": "easyToUnderstand", "label":"Easy to understand" },{ "type": "thumb-up", "id": "solvedMyProblem", "label":"Solved my problem" },{ "type": "thumb-up", "id": "otherUp", "label":"Other" }]
