How to set Min and Max date for Google timline Charts [2020]
Question
I would like to set the Min and Max date in Google timeline charts. I have tried:
var options = {
height: 450,
timeline: {
groupByRowLabel: true
},
legend: 'none',
tooltip: {isHtml: true},
hAxis: {
minValue : new Date(2018, 11, 31),
maxValue : new Date(2020, 1, 3)
},
};
As you see, i see 2015 so it doesn't work:
Someone said in another post:
you can use options --> hAxis.minValue & hAxis.maxValue
I thought that's what I was doing. How to do?
Here is my code:
<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'],'language': 'fr'}); google.charts.setOnLoadCallback(drawChart); function drawChart() { var data = new google.visualization.DataTable(); data.addColumn({ type: 'string', id: 'President' }); data.addColumn({ type: 'string', id: 'dummy bar label' }); data.addColumn({ type: 'string', role: 'tooltip' }); data.addColumn({ type: 'date', id: 'Start' }); data.addColumn({ type: 'date', id: 'End' }); data.addRows([ [ 'Washington', null, 'George', new Date(2015, 3, 29), new Date(2018, 2, 3) ], [ 'Washington', null, 'George', new Date(2018, 3, 29), new Date(2020, 2, 3) ], [ 'Adams', null, 'John', new Date(2019, 2, 3), new Date(2020, 2, 3) ], [ 'Jefferson', null, 'Thomas', new Date(2018, 2, 3), new Date(2020, 2, 3) ]]); var options = { height: 450, timeline: { groupByRowLabel: true }, legend: 'none', tooltip: {isHtml: true}, hAxis: { minValue: new Date(2018, 11, 31), maxValue: new Date(2020, 1, 3) }, }; var chart = new google.visualization.Timeline(document.getElementById('chart_div')); chart.draw(data, options); } </script> </head> <body> <div id="chart_div"></div> </body> </html>
1 answers
solution1
1 2020-12-03 17:57:18
options hAxis.minValue & hAxis.maxValue only work to expand the x-axis.
where hAxis.minValue is less than the earliest date in the data table,
and hAxis.maxValue is greater than the latest date in the data table.
they will not reduce the x-axis within the dates that exist in the data table.
see following working snippet...
google.charts.load('current', { packages: ['timeline'], language: 'fr' }).then(function () { var data = new google.visualization.DataTable(); data.addColumn({ type: 'string', id: 'President' }); data.addColumn({ type: 'string', id: 'dummy bar label' }); data.addColumn({ type: 'string', role: 'tooltip' }); data.addColumn({ type: 'date', id: 'Start' }); data.addColumn({ type: 'date', id: 'End' }); data.addRows([ [ 'Washington', null, 'George', new Date(2015, 3, 29), new Date(2018, 2, 3) ], [ 'Washington', null, 'George', new Date(2018, 3, 29), new Date(2020, 2, 3) ], [ 'Adams', null, 'John', new Date(2019, 2, 3), new Date(2020, 2, 3) ], [ 'Jefferson', null, 'Thomas', new Date(2018, 2, 3), new Date(2020, 2, 3) ] ]); var options = { height: 450, timeline: { groupByRowLabel: true }, legend: 'none', tooltip: {isHtml: true}, hAxis: { minValue: new Date(2010, 11, 31), maxValue: new Date(2030, 1, 3) } }; var chart = new google.visualization.Timeline(document.getElementById('chart_div')); chart.draw(data, options); });
<script src="https://www.gstatic.com/charts/loader.js"></script> <div id="chart_div"></div>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.