Customizing hAxis of Date type

[Mojbel]

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. 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>

[Selva Kumar A]

      [ '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>

[Mojbel]

Thanks Selva!

[Selva Kumar A]

Hi  Mohammed,

Welcome

by

Selva

--
You received this message because you are subscribed to a topic in the Google Groups "Google Visualization API" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/google-visualization-api/83p8rCWnRyI/unsubscribe.
To unsubscribe from this group and all its topics, send an email to google-visualization-api+unsub...@googlegroups.com.
To post to this group, send email to google-visualization-api@googlegroups.com.
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/516aa63d-0dde-40ec-b17e-c77d1beb46bb%40googlegroups.com.

For more options, visit https://groups.google.com/d/optout.

--

regards

Selva