On Thursday, February 2, 2017 at 2:01:35 AM UTC+5:30, Mojbel wrote: > > Hey there! > > I've been getting my hand dirty on Google Charts the past few hours and > I'm making a similar chart as in An advanced example > <https://google-developers.appspot.com/chart/interactive/docs/gallery/timeline#an-advanced-example>. > > The hAxis shows the year in 10-year step. I've been trying to have every > month as a major gridline with ticks and gridlines options with no luck so > far. > > <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> > > <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,0,0,0), new > Date(1797, 2, 4,0,0,0) ], > [ 'President', 'John Adams', new Date(1797, 2, 4,0,0,0), new > Date(1801, 2, 4,0,0,0) ], > [ 'President', 'Thomas Jefferson', new Date(1801, 2, 4,0,0,0), new > Date(1809, 2, 4,0,0,0) ], > [ 'Vice President', 'John Adams', new Date(1789, 3, 21,0,0,0), new > Date(1797, 2, 4,0,0,0)], > [ 'Vice President', 'Thomas Jefferson', new Date(1797, 2, 4,0,0,0), > new Date(1801, 2, 4,0,0,0)], > [ 'Vice President', 'Aaron Burr', new Date(1801, 2, 4,0,0,0), new > Date(1805, 2, 4,0,0,0)], > [ 'Vice President', 'George Clinton', new Date(1805, 2, 4,0,0,0), > new Date(1812, 3, 20,0,0,0)], > [ 'Secretary of State', 'John Jay', new Date(1789, 8, 25,0,0,0), new > Date(1790, 2, 22,0,0,0)], > [ 'Secretary of State', 'Thomas Jefferson', new Date(1790, 2, > 22,0,0,0), new Date(1793, 11, 31)], > [ 'Secretary of State', 'Edmund Randolph', new Date(1794, 0, 2), new > Date(1795, 7, 20,0,0,0)], > [ 'Secretary of State', 'Timothy Pickering', new Date(1795, 7, > 20,0,0,0), new Date(1800, 4, 12,0,0,0)], > [ 'Secretary of State', 'Charles Lee', new Date(1800, 4, 13,0,0,0), > new Date(1800, 5, 5,0,0,0)], > [ 'Secretary of State', 'John Marshall', new Date(1800, 5, > 13,0,0,0), new Date(1801, 2, 4,0,0,0)], > [ 'Secretary of State', 'Levi Lincoln', new Date(1801, 2, 5,0,0,0), > new Date(1801, 4, 1,0,0,0)], > [ 'Secretary of State', 'James Madison', new Date(1801, 4, 2,0,0,0), > new Date(1809, 2, 3,0,0,0)] > ]); > > > var options = { > timeline: { showRowLabels: true, > groupByRowLabel:true }, > avoidOverlappingGridLines: false, > hAxis : { > gridlines : { count:15, color:'#B9B9B9'}, > textStyle : {fontSize: 10}, > format : 'MMM/dd/yyyy', > showTextEvery : 1, > slantedTextAngle : 90, > slantedText: true, > > } > > }; > chart.draw(dataTable,options); > } > </script> > > <div id="example3.1" style="height: 90%;width:1200%;"></div> > > >
-- 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 [email protected]. To post to this group, send email to [email protected]. Visit this group at https://groups.google.com/group/google-visualization-api. To view this discussion on the web visit https://groups.google.com/d/msgid/google-visualization-api/caad6749-1031-428e-996c-20ec2e6abf76%40googlegroups.com. For more options, visit https://groups.google.com/d/optout.
