Related
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>
I need to remove the chart border from timeline google chart. The script is the following:
<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.4');
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.4" style="height: 150px;"></div>
I need to change from:
enter image description here
to:
enter image description here
Someone can help me? Many thanks!!!
no config option exists,
but we can manually change the chart's svg,
on the chart's 'ready' event.
here, we find the chart <rect> element,
and remove the stroke...
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');
}
});
});
see following working snippet...
google.charts.load('current', {
packages:['timeline']
}).then(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: '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 = {
backgroundColor: {
//fill: 'red',
stroke: 'red'
},
colors: ['#cbb69d', '#603913', '#c69c6e'],
};
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);
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="example5.4"></div>
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>
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>
I would like to ask if it is possible that the haxis value (The one with dates below) for Google Timeline change to string format?
For example, Oct. 30 will be changed to Week 1, Nov. 6 to Week 2, and so on.
Any help and suggestions are welcomed and appreciated.
Thanks in advance!
the timeline chart is very limited compared to the core charts
both in terms of options available and helper methods for finding chart coordinates, etc...
but like core charts, timelines produce svg, which can be modified using javascript
see following working snippet...
once the chart's 'ready' event fires, all of the haxis labels are removed
then custom labels are added back for the week numbers
before removing all the labels, one is cloned, in order to keep the same font, color, y-coordinate, etc...
then the timeline bars are used to find the x-coordinate and add the new label
google.charts.load('current', {
callback: function () {
var container = document.getElementById('chart_div');
var chart = new google.visualization.Timeline(container);
var dataTable = new google.visualization.DataTable();
dataTable.addColumn({type: 'string', id: 'Category'});
dataTable.addColumn({type: 'date', id: 'Start'});
dataTable.addColumn({type: 'date', id: 'End'});
dataTable.addRows([
['Category A', new Date(2016, 9, 30), new Date(2016, 10, 5)],
['Category B', new Date(2016, 10, 6), new Date(2016, 10, 12)],
['Category C', new Date(2016, 10, 13), new Date(2016, 10, 19)]
]);
google.visualization.events.addListener(chart, 'ready', function () {
var rowIndex = 0; // data table row index
var weekLabel = null; // clone of text node - keep font settings, y-coord, etc...
// remove haxis labels
var labels = container.getElementsByTagName('text');
while (labels.length > dataTable.getNumberOfRows()) {
// ignore "category" labels
if (dataTable.getFilteredRows([{column: 0, value: labels[labels.length - 1].innerHTML}]).length === 0) {
if (weekLabel === null) {
weekLabel = labels[labels.length - 1].cloneNode(true);
}
labels[labels.length - 1].parentNode.removeChild(labels[labels.length - 1]);
}
}
// use timeline bars to find x coordinate for week labels
rowIndex = 0;
var svgParent = container.getElementsByTagName('svg')[0];
Array.prototype.forEach.call(container.getElementsByTagName('rect'), function(bar) {
var bounds; // bounding box of text element
// ignore rect if not a timeline bar
if (parseFloat(bar.getAttribute('x')) > 0) {
weekLabel = weekLabel.cloneNode(true);
weekLabel.innerHTML = 'Week ' + (rowIndex + 1);
svgParent.appendChild(weekLabel);
bounds = weekLabel.getBBox();
weekLabel.setAttribute('x', parseFloat(bar.getAttribute('x')) + bounds.width);
rowIndex++;
}
});
});
chart.draw(dataTable);
},
packages:['timeline']
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
google.charts.load("current", {packages:["timeline"], callback: drawChart});
function drawChart() {
var container = document.getElementById('chart_div');
var chart = new google.visualization.Timeline(container);
// hAxis put on top
google.visualization.events.addListener(chart, 'ready', afterDraw);
// Link in tooltip
google.visualization.events.addListener(chart, 'select', function(e) {
var tooltip = document.querySelector('.google-visualization-tooltip:not([clone])');
if (chart.ttclone) {
chart.ttclone.parentNode.removeChild(chart.ttclone)
}
chart.ttclone = tooltip.cloneNode(true);
chart.ttclone.setAttribute('clone', true);
chart.ttclone.style.pointerEvents = 'auto';
tooltip.parentNode.insertBefore(chart.ttclone, chart.tooltip);
});
var dataTable = new google.visualization.DataTable();
dataTable.addColumn({ type: 'string', id: 'Name' });
// for colorMap
dataTable.addColumn({ type: 'string', id: 'Course' });
dataTable.addColumn({ type: 'string', id: 'Subject' });
dataTable.addColumn({ type: 'string', id: 'ToolTip', role: 'tooltip', p:{html:true} });
dataTable.addColumn({ type: 'date', id: 'Start' });
dataTable.addColumn({ type: 'date', id: 'End' });
dataTable.addRows([
// Timeline Start
['Student 1', 'ENGR', 'Trigonometry', 'Trigonometry', new Date(2016, 9, 30), new Date(2016, 10, 06)],
['Student 2', 'IT', 'DB Management', 'DB Management', new Date(2016, 9, 30), new Date(2016, 10, 13)],
['Student 3', 'CS', 'Introduction to Programming', 'Introduction to Programming', new Date(2016, 9, 30), new Date(2016, 10, 27)],
]);
var colors = [];
var colorMap = {
ENGR: '#2ECC71', // Green
IT: '#E67E22', // Brown
CS: '#9B59B6', // Violet
}
for (var i = 0; i < dataTable.getNumberOfRows(); i++) {
colors.push(colorMap[dataTable.getValue(i, 1)]);
}
var rowHeight = 41;
var chartHeight = (dataTable.getNumberOfRows() + 1) * rowHeight;
var options = {
timeline: {
groupByRowLabel: true,
rowLabelStyle: {
fontName: 'Century Gothic',
fontSize: 14,
color: '#333333',
bold: 'true',
},
barLabelStyle: {
fontName: 'Century Gothic',
fontSize: 11,
},
showRowLabels: true,
showBarLabels: true,
},
hAxis: {
minValue: new Date(2016, 9, 30),
maxValue: new Date(2017, 9, 28),
},
avoidOverlappingGridLines: true,
height: chartHeight,
width: '100%',
colors: colors,
};
// 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]);
// Change HAxis labels to Week
google.visualization.events.addListener(chart, 'ready', function () {
var rowIndex = 0; // data table row index
var weekLabel = null; // clone of text node - keep font settings, y-coord, etc...
// remove haxis labels
var labels = container.getElementsByTagName('text');
while (labels.length > dataTable.getNumberOfRows()) {
// ignore "category" labels
if (dataTable.getFilteredRows([{column: 5, value: labels[labels.length - 1].innerHTML}]).length === 0) {
if (weekLabel === null) {
weekLabel = labels[labels.length - 1].cloneNode(true);
}
labels[labels.length - 1].parentNode.removeChild(labels[labels.length - 1]);
}
}
// use timeline bars to find x coordinate for week labels
rowIndex = 0;
var svgParent = container.getElementsByTagName('svg')[0];
Array.prototype.forEach.call(container.getElementsByTagName('rect'), function(bar) {
var bounds; // bounding box of text element
// ignore rect if not a timeline bar
if (parseFloat(bar.getAttribute('x')) > 0) {
weekLabel = weekLabel.cloneNode(true);
weekLabel.innerHTML = 'WW 70' + (rowIndex + 1);
svgParent.appendChild(weekLabel);
bounds = weekLabel.getBBox();
weekLabel.setAttribute('x', parseFloat(bar.getAttribute('x')) + bounds.width);
rowIndex++;
}
});
});
chart.draw(
view,
options,
dataTable, {
tooltip: {
isHtml: true,
},
timeline: {
showBarLabels: false,
}
});
}
// hAxis put on top
function afterDraw() {
var g = document.getElementsByTagName("svg")[0].getElementsByTagName("g")[1];
document.getElementsByTagName("svg")[0].parentNode.style.top = '40px';
document.getElementsByTagName("svg")[0].style.overflow = 'visible';
var height = Number(g.getElementsByTagName("text")[0].getAttribute('y')) + 15;
g.setAttribute('transform','translate(0,-'+height+')');
g = null;
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>