Hello,
I have the following three timelines (also in the attached html file). Is
it possible to:
1. Set the min max values of the hAxis? As it is now, the min/max values of
the hAxis are getting their values from the min "From" and max "To" of the
data. I would like to customize the min/max values of the hAxis.
2. In the second chart (yellow), the hAxis displays the weekdays from Sun
9/20 to Wed 9/30. Sundays are bold. Is it possible to customize the format
of all the days except Sundays (Mon to Sat)? For example, I would like to
have "Monday" instead of "Mon". But only for the non-bold days.
Thanks,
-N
<html>
<head>
<script type="text/javascript" src="https://www.google.com/jsapi";
></script>
<script type="text/javascript">
google.load("visualization", "1", {packages:["timeline"]});
google.setOnLoadCallback(drawChart);
google.setOnLoadCallback(drawChart2);
google.setOnLoadCallback(drawChart3);
function drawChart() {
var container = document.getElementById('timeline_1');
var chart = new google.visualization.Timeline(container);
var dataTable = new google.visualization.DataTable();
dataTable.addColumn({ type: 'string', id: 'President' });
dataTable.addColumn({ type: 'string', id: 'Name' });
dataTable.addColumn({ type: 'date', id: 'From' });
dataTable.addColumn({ type: 'date', id: 'To' });
dataTable.addRows([
[ 'Shire', 'Bilbo Baggins', new Date(2015, 8, 20), new Date(2015,
8, 28) ],
[ 'Lonely Mountain', 'Thorin Oakenshield', new Date(2015, 8, 27),
new Date(2015, 9, 4) ],
[ 'Mordor', 'Gandalf the Grey', new Date(2015, 9, 5), new Date(
2015, 9, 14) ]]);
var options = {
backgroundColor: 'cyan',
tooltip: { isHtml: true }
};
chart.draw(dataTable, options);
}
function drawChart2() {
var container = document.getElementById('timeline_2');
var chart = new google.visualization.Timeline(container);
var dataTable = new google.visualization.DataTable();
dataTable.addColumn({ type: 'string', id: 'President' });
dataTable.addColumn({ type: 'string', id: 'Name' });
dataTable.addColumn({ type: 'date', id: 'From' });
dataTable.addColumn({ type: 'date', id: 'To' });
dataTable.addRows([
[ 'Shire', 'Bilbo Baggins', new Date(2015, 8, 20), new Date(2015,
8, 30) ]]);
var options = {
backgroundColor: 'yellow',
tooltip: { isHtml: true }
};
chart.draw(dataTable, options);
}
function drawChart3() {
var container = document.getElementById('timeline_3');
var chart = new google.visualization.Timeline(container);
var dataTable = new google.visualization.DataTable();
dataTable.addColumn({ type: 'string', id: 'President' });
dataTable.addColumn({ type: 'string', id: 'Name' });
dataTable.addColumn({ type: 'date', id: 'From' });
dataTable.addColumn({ type: 'date', id: 'To' });
dataTable.addRows([
[ 'Shire', 'Bilbo Baggins', new Date(2015, 8, 20), new Date(2015,
8, 22) ]]);
var options = {
backgroundColor: 'pink',
tooltip: { isHtml: true }
};
chart.draw(dataTable, options);
}
</script>
</head>
<body>
<div id="timeline_1" style="height: 180px;"></div>
<br><br><br>
<div id="timeline_2" style="height: 180px;"></div>
<br>
<div id="timeline_3" style="height: 180px;"></div>
</body>
</html>
--
You received this message because you are subscribed to the Google Groups
"Google Visualization API" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to google-visualization-api+unsubscr...@googlegroups.com.
To post to this group, send email to google-visualization-api@googlegroups.com.
Visit this group at http://groups.google.com/group/google-visualization-api.
To view this discussion on the web visit
https://groups.google.com/d/msgid/google-visualization-api/f9f491dc-e10b-4709-bcc1-b4fec3c49d2d%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.
