Develop Reference

Google Chart Resize on Window Resize

How can I get my google chart to resize properly, currently it gets bigger when I expand the window but it does not shrink when i shrink the window. Essentially I've wrapped the entire google chart in a resize function but it isn't quite right:
function resize() {
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: 'Type' });
dataTable.addColumn({ type: 'string', id: 'Organisation' });
dataTable.addColumn({ type: 'date', id: 'Start' });
dataTable.addColumn({ type: 'date', id: 'End' });
dataTable.addRows([
[ 'Work Experience', 'GE', new Date(2010, 8, 1 ), new Date(2011, 8, 30) ],
[ 'Work Experience', 'Shell', new Date(2015, 2, 1), new Date(2016, 1, 1) ],
[ 'Work Experience', 'British Gas', new Date(2016, 1, 1), new Date(2017, 9, 1) ],
[ 'Work Experience', 'British Telecom', new Date(2017, 9, 1), new Date() ],
[ 'Work Experience', 'University', new Date(2011, 8, 30), new Date(2015, 2,1) ]
]);
var options = {
timeline: {showRowLabels: false},
backgroundColor: '#161616',
barLabelStyle: { fontName: 'Roboto', color: '#ffffff' },
height: 100,
hAxis: {textStyle:{color: '#ffffff'}}
};
google.visualization.events.addListener(chart, 'ready', function () {
var labels = container.getElementsByTagName('text');
Array.prototype.forEach.call(labels, function(label) {
if (label.getAttribute('text-anchor') === 'middle') {
label.setAttribute('fill', '#ffffff');
}
});
});
google.visualization.events.addListener(chart, 'ready', function () {
var rects = container.getElementsByTagName('rect');
Array.prototype.forEach.call(rects, function(rect) {
// find chart <rect> element
if ((rect.getAttribute('x') === '0') && (rect.getAttribute('y') === '0')) {
// remove stroke from last <rect> element
rect.setAttribute('stroke', 'none');
rect.setAttribute('stroke-width', '0');
}
});
});
chart.draw(dataTable, options);
}
}
window.onload = resize;
window.onresize = resize;

when resizing, you need to clear the chart, before re-drawing.
if the chart is not cleared, it can prevent the chart's container from shrinking.
then when re-drawn, it is the same size.
(this all depends on the page layout, but clearing will resolve most issues)
use method --> chart.clearChart()
also, the load callback only needs to be called once per page load.
no need to include the load statement in the resize event handler.
and, google's load statement will wait for the page to load by default.
and can be used in place of --> window.onload
see following working snippet...
google.charts.load('current', {
packages: ['timeline']
}).then(function () {
var container = document.getElementById('timeline');
var chart = new google.visualization.Timeline(container);
var dataTable = new google.visualization.DataTable();
dataTable.addColumn({ type: 'string', id: 'Type' });
dataTable.addColumn({ type: 'string', id: 'Organisation' });
dataTable.addColumn({ type: 'date', id: 'Start' });
dataTable.addColumn({ type: 'date', id: 'End' });
dataTable.addRows([
['Work Experience', 'GE', new Date(2010, 8, 1 ), new Date(2011, 8, 30)],
['Work Experience', 'Shell', new Date(2015, 2, 1), new Date(2016, 1, 1)],
['Work Experience', 'British Gas', new Date(2016, 1, 1), new Date(2017, 9, 1)],
['Work Experience', 'British Telecom', new Date(2017, 9, 1), new Date()],
['Work Experience', 'University', new Date(2011, 8, 30), new Date(2015, 2,1)]
]);
var options = {
timeline: {showRowLabels: false},
backgroundColor: '#161616',
barLabelStyle: {fontName: 'Roboto', color: '#ffffff'},
height: 100,
hAxis: {textStyle:{color: '#ffffff'}}
};
google.visualization.events.addListener(chart, 'ready', function () {
var labels = container.getElementsByTagName('text');
Array.prototype.forEach.call(labels, function(label) {
if (label.getAttribute('text-anchor') === 'middle') {
label.setAttribute('fill', '#ffffff');
}
});
var rects = container.getElementsByTagName('rect');
Array.prototype.forEach.call(rects, function(rect) {
// find chart <rect> element
if ((rect.getAttribute('x') === '0') && (rect.getAttribute('y') === '0')) {
// remove stroke from last <rect> element
rect.setAttribute('stroke', 'none');
rect.setAttribute('stroke-width', '0');
}
});
});
window.addEventListener('resize', drawChart);
drawChart();
function drawChart() {
chart.clearChart();
chart.draw(dataTable, options);
}
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="timeline"></div>

Why does style.display change the size of my div when set to 'block'?

I have 3 divs each one containing a google timeline chart.
3 buttons to toggle between each of the 3 divs.
I use javascript to hide the 2 other divs and show one.
If I set all of the divs to show they all have the same length and width.
However, when I start toggling in between them, only the one that started as display: 'block' keeps the same size and the rest become much smaller when toggled to show.
I've already tried setting the div size in my javascript functions, didn't work.
When I inspect element on one of the toggled divs it shows 400px for width.
google.charts.load('current', {
'packages': ['timeline']
});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var container = document.getElementById('timeline2');
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);
}
google.charts.setOnLoadCallback(drawChart2);
function drawChart2() {
var container = document.getElementById('timeline3');
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);
}
google.charts.setOnLoadCallback(drawChart3);
function drawChart3() {
var container = document.getElementById('timeline4');
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);
}
function showMonth() {
document.getElementById('timeline3').style.display = 'none';
document.getElementById('timeline4').style.display = 'none';
document.getElementById('timeline2').style.display = 'block';
}
function showWeek() {
document.getElementById('timeline3').style.display = 'block';
document.getElementById('timeline4').style.display = 'none';
document.getElementById('timeline2').style.display = 'none';
}
function showDay() {
document.getElementById('timeline3').style.display = 'none';
document.getElementById('timeline4').style.display = 'block';
document.getElementById('timeline2').style.display = 'none';
}
#timeline2 {
height: 300px;
width: 1791px;
background-color: red;
}
#timeline3 {
display: none;
height: 300px;
width: 1791px;
background-color: blue;
}
#timeline4 {
display: none;
height: 300px;
width: 1791px;
background-color: pink;
}
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<button class='monthb' onclick="showMonth()">Month</button>
<button class='weekb' onclick="showWeek()">Week</button>
<button class='dayb' onclick="showDay()">Day</button>
<br />
<div id="timeline2"></div>
<div id="timeline3"></div>
<div id="timeline4"></div>

It seems like the chart's width is determined by examining the width of its container. However if the container isn't visible, it cannot properly determine the width.
Consider hiding the div after each chart.draw(). (These could afford to be refactored to remove some duplicate logic but for sake of the demonstration, I've simply added it to the two charts that are supposed to start as hidden.)
google.charts.load('current', {
'packages': ['timeline']
});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var container = document.getElementById('timeline2');
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);
}
google.charts.setOnLoadCallback(drawChart2);
function drawChart2() {
var container = document.getElementById('timeline3');
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);
document.getElementById('timeline3').style.display = 'none';
}
google.charts.setOnLoadCallback(drawChart3);
function drawChart3() {
var container = document.getElementById('timeline4');
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);
document.getElementById('timeline4').style.display = 'none';
}
function showMonth() {
document.getElementById('timeline3').style.display = 'none';
document.getElementById('timeline4').style.display = 'none';
document.getElementById('timeline2').style.display = 'block';
}
function showWeek() {
document.getElementById('timeline3').style.display = 'block';
document.getElementById('timeline4').style.display = 'none';
document.getElementById('timeline2').style.display = 'none';
}
function showDay() {
document.getElementById('timeline3').style.display = 'none';
document.getElementById('timeline4').style.display = 'block';
document.getElementById('timeline2').style.display = 'none';
}
#timeline2 {
height: 300px;
width: 1791px;
}
#timeline3 {
height: 300px;
width: 1791px;
}
#timeline4 {
height: 300px;
width: 1791px;
}
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<button class='monthb' onclick="showMonth()">Month</button>
<button class='weekb' onclick="showWeek()">Week</button>
<button class='dayb' onclick="showDay()">Day</button>
<br />
<div id="timeline2"></div>
<div id="timeline3"></div>
<div id="timeline4"></div>

Change color of column stroke in Google Visualization Timeline

I'm attempting to change the stroke color for columns in the Google Visualization Timeline.
I am able to do that but I can't specify that only the vertical stroke lines should be changed not the horizontal lines.
Is there a way to identify just the vertical lines? The svg calls both horizontal lines and vertical "path d".
google.charts.load('current', {
callback: drawChart,
packages: ['timeline']
});
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) ]
]);
var observer = new MutationObserver(setcolumnstroke);
google.visualization.events.addListener(chart, 'ready', function () {
setcolumnstroke();
observer.observe(container, {
childList: true,
subtree: true
});
});
function setcolumnstroke() {
Array.prototype.forEach.call(container.getElementsByTagName('path'), function (path) {
path.setAttribute('stroke', '#000000');
});
}
chart.draw(dataTable);
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="timeline"></div>

Here's one way: Take the X coordinate from the d attribute (the first digit after M and the first digit after L) if they are the same, it is a vertical line.
Regex Answer
Using regex to match the first numbers after M to the numbers after L: M(\d+).*L\1
google.charts.load('current', {
callback: drawChart,
packages: ['timeline']
});
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) ]
]);
var observer = new MutationObserver(setcolumnstroke);
google.visualization.events.addListener(chart, 'ready', function () {
setcolumnstroke();
observer.observe(container, {
childList: true,
subtree: true
});
});
function setcolumnstroke() {
Array.prototype.forEach.call(container.getElementsByTagName('path'), function (path) {
// Check for vertical lines
if ( path.getAttribute('d').match(/M(\d+).*L\1/) ) {
path.setAttribute('stroke', '#FF0000');
} else {
path.setAttribute('stroke', '#000000');
}
});
}
chart.draw(dataTable);
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="timeline"></div>
Old Answer:
Using substring method: if (d.substring(1, 4) == d.substring(d.indexOf('L')+1, d.indexOf('L')+4))
// The X coordinate of the M (move) command
d.substring(1, 4)
// The X coordinate of the L (line) command
d.substring(d.indexOf('L')+1, d.indexOf('L')+4))
Note this would break if it is not formatted exactly as M...L... but perhaps google charts path output is always in that format.
google.charts.load('current', {
callback: drawChart,
packages: ['timeline']
});
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) ]
]);
var observer = new MutationObserver(setcolumnstroke);
google.visualization.events.addListener(chart, 'ready', function () {
setcolumnstroke();
observer.observe(container, {
childList: true,
subtree: true
});
});
function setcolumnstroke() {
Array.prototype.forEach.call(container.getElementsByTagName('path'), function (path) {
let d = path.getAttribute('d');
let dl = d.indexOf('L');
if ( d.substring(1, d.indexOf(',')) == d.substring(dl+1, d.indexOf(',', dl)) ) {
path.setAttribute('stroke', '#FF0000');
} else {
path.setAttribute('stroke', '#000000');
}
});
}
chart.draw(dataTable);
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="timeline"></div>

Google Chart Api Time Table

I'm using Google Chart Api Time Table.
It draw like this.
How to know when I onclick that Bar?
google.charts.load('current', {'packages':['timeline']});
function ready(data){
var datas = data;
// console.log(datas[0]['event_name']);
// alert(datas);
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
// console.log(datas[0]['event_name']);
var arrayLength = datas.length;
// console.log(arrayLength);
var events = new Array();
var container = document.getElementById('timeline');
var chart = new google.visualization.Timeline(container);
var dataTable = new google.visualization.DataTable();
dataTable.addColumn({ type: 'string', id: 'President', name : '123213' });
dataTable.addColumn({ type: 'date', id: 'Start' });
dataTable.addColumn({ type: 'date', id: 'End' });
for ( var i = 0; i < arrayLength ; i++ ){
dataTable.addRows([
[datas[i]['event_name'], new Date(datas[i]['start_day']), new Date(datas[i]['end_day'])],
]);
}
// dataTable.addRows([
// [ 'Washington', new Date(1789,03, 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);
}
}
This is my code. When I click the bar I want to know that ID or Name.

Why custom tooltip doesn't show up?

I'm trying to show a custom tooltip on mouve over the bars, it show always the default tooltip.
I'm just trying to show a simple html code in the tooltip, so I can modify it after
What am I missing? thanks
google.charts.load('current', {
'packages': ['timeline'],
'language': 'fr'
});
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: 'Code'
});
dataTable.addColumn({
type: 'string',
id: 'Color'
});
dataTable.addColumn({
type: 'string',
role: 'tooltip',
'p': {
'html': true
}
});
dataTable.addColumn({
type: 'string',
id: 'Libelle'
});
dataTable.addColumn({
type: 'date',
id: 'Start'
});
dataTable.addColumn({
type: 'date',
id: 'End'
});
var objects = [];
objects.push({
code: "PRV1001",
color: "Color1",
zz: "<div><strong>2010</strong></div>",
id: "PRV1001",
dateStart: new Date(2016, 3, 1),
dateFinnish: new Date(2016, 3, 15)
});
objects.push({
code: "PRV1002",
color: "Color2",
zz: "<div><strong>2010</strong></div>",
id: "PRV1002",
dateStart: new Date(2016, 3, 4),
dateFinnish: new Date(2016, 3, 9)
});
objects.push({
code: "PRV1003",
color: "Color3",
zz: "<div><strong>2010</strong></div>",
id: "PRV1003",
dateStart: new Date(2016, 3, 3),
dateFinnish: new Date(2016, 3, 12)
});
var rows = [];
for (var i = 0; i < objects.length; i++) {
rows.push([objects[i].code, objects[i].color, objects[i].zz, objects[i].id, objects[i].dateStart, objects[i].dateFinnish]);
}
console.log(rows);
dataTable.addRows(rows);
/****************Colors*************************/
var colors = [];
var colorMap = {
// should contain a map of category -> color for every category
Color1: '#e63b6f',
Color2: '#19c362',
Color3: '#592df7'
}
for (var i = 0; i < dataTable.getNumberOfRows(); i++) {
colors.push(colorMap[dataTable.getValue(i, 1)]);
}
var options = {
colors: colors,
focusTarget: 'category',
tooltip: {
//trigger: 'none'
isHtml: true
}
};
google.visualization.events.addListener(chart, 'select', function() {
selection = chart.getSelection();
if (selection.length > 0) {
console.log(dataTable.getValue(selection[0].row, 0));
}
});
// use a DataView to hide the category column from the Timeline
var view = new google.visualization.DataView(dataTable);
view.setColumns([0, 2, 3, 4, 5]);
chart.draw(view, options);
}
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="Goolge Chart HTML Tooltips">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
</head>
<body>
<div id="timeline" style="height: 180px;"></div>
</body>
</html>

see the data format for a timeline chart...
Column 0 - Row label
Column 1 - Bar label (optional)
Column 2 - Tooltip (optional)
Column 3 - Start
Column 4 - End
the issue stems from the view...
view.setColumns([0, 2, 3, 4, 5]);
so the chart thinks Column 2 is the Bar label
the issue can be corrected by swapping Column 2 with 3
view.setColumns([0, 3, 2, 4, 5]);
see following working snippet...
google.charts.load('current', {
'packages': ['timeline'],
'language': 'fr'
});
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: 'Code'
});
dataTable.addColumn({
type: 'string',
id: 'Color'
});
dataTable.addColumn({
type: 'string',
role: 'tooltip',
'p': {
'html': true
}
});
dataTable.addColumn({
type: 'string',
id: 'Libelle'
});
dataTable.addColumn({
type: 'date',
id: 'Start'
});
dataTable.addColumn({
type: 'date',
id: 'End'
});
var objects = [];
objects.push({
code: "PRV1001",
color: "Color1",
zz: "<div><strong>2010</strong></div>",
id: "PRV1001",
dateStart: new Date(2016, 3, 1),
dateFinnish: new Date(2016, 3, 15)
});
objects.push({
code: "PRV1002",
color: "Color2",
zz: "<div><strong>2010</strong></div>",
id: "PRV1002",
dateStart: new Date(2016, 3, 4),
dateFinnish: new Date(2016, 3, 9)
});
objects.push({
code: "PRV1003",
color: "Color3",
zz: "<div><strong>2010</strong></div>",
id: "PRV1003",
dateStart: new Date(2016, 3, 3),
dateFinnish: new Date(2016, 3, 12)
});
var rows = [];
for (var i = 0; i < objects.length; i++) {
rows.push([objects[i].code, objects[i].color, objects[i].zz, objects[i].id, objects[i].dateStart, objects[i].dateFinnish]);
}
dataTable.addRows(rows);
/****************Colors*************************/
var colors = [];
var colorMap = {
// should contain a map of category -> color for every category
Color1: '#e63b6f',
Color2: '#19c362',
Color3: '#592df7'
}
for (var i = 0; i < dataTable.getNumberOfRows(); i++) {
colors.push(colorMap[dataTable.getValue(i, 1)]);
}
var options = {
colors: colors,
focusTarget: 'category',
tooltip: {
isHtml: true
}
};
google.visualization.events.addListener(chart, 'select', function() {
selection = chart.getSelection();
if (selection.length > 0) {
console.log(dataTable.getValue(selection[0].row, 0));
}
});
// use a DataView to hide the category column from the Timeline
var view = new google.visualization.DataView(dataTable);
view.setColumns([0, 3, 2, 4, 5]);
chart.draw(view, options);
}
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="Goolge Chart HTML Tooltips">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
</head>
<body>
<div id="timeline" style="height: 180px;"></div>
</body>
</html>