Timeline hAxis min/max values and label formatting

449 views

Skip to first unread message

Nikolaos Paraschou

unread,

Sep 9, 2015, 5:37:54 AM9/9/15

to Google Visualization API

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>