Timeline Chart bar with date axis to be displayed on top

showkat ali
Jul 23, 2024
4 min read
0 Comments
Like 0
1930 View

How to Display the Timeline Chart Bar with Date Axis on Top in Google Visualization

Google Visualization Charts are a flexible tool for displaying timelines; however, you may occasionally need to modify the chart's layout to improve readability and presentation. This detailed tutorial will help you to align the date axis and timeline chart bar at the top of your chart.

timeline chart date axis displayed on top

Step 1: Load the Google Charts Library

First, include the Google Charts library in your HTML document. This script tag in the <head> section is essential for loading the necessary components.

<head>
  <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
</head>

Step 2: Set Up Your HTML Structure

Create a `<div>` element where the chart will be rendered. Make sure it has a defined height for proper display.

<body>
  <div id="timeline" style="height: 180px;"></div>
</body>

Step 3: Draw the Timeline Chart

Write the JavaScript function to initialize and draw your timeline chart. Here’s an example of how to set up the chart with the date axis positioned at the top.

<script type="text/javascript">
  google.charts.load('current', {'packages':['timeline']});
  google.charts.setOnLoadCallback(drawChart);

  function drawChart() {
    var container = document.getElementById('timeline');
    var chart = new google.visualization.Timeline(container);
    var dataTable = new google.visualization.DataTable();

    dataTable.addColumn({ type: 'string', id: 'Event' });
    dataTable.addColumn({ type: 'date', id: 'Start' });
    dataTable.addColumn({ type: 'date', id: 'End' });

    // Example data
    dataTable.addRows([
      [ 'Event 1', new Date(), new Date(new Date().setMonth(new Date().getMonth() + 1)) ],
      [ 'Event 2', new Date(new Date().setMonth(new Date().getMonth() + 1)), new Date(new Date().setMonth(new Date().getMonth() + 2)) ],
      [ 'Event 3', new Date(new Date().setMonth(new Date().getMonth() + 2)), new Date(new Date().setMonth(new Date().getMonth() + 3)) ]
    ]);

    // Calculate today and the end date (e.g., 3 months from today)
    var today = new Date();
    var endDate = new Date();
    endDate.setMonth(today.getMonth() + 3);

    var options = {
      timeline: {
        showRowLabels: false
      },
      avoidOverlappingGridLines: false,
      hAxis: {
        format: 'MMM yyyy', // Display months and years
        gridlines: {
          count: -1
        },
        minValue: today, // Start from today
        maxValue: endDate // End date
      },
      chartArea: {
        width: '90%',
        height: '80%'
      }
    };

    function afterDraw() {
      var svg = document.getElementsByTagName("svg")[0];
      var g = svg.getElementsByTagName("g")[1];
      svg.style.overflow = 'visible';
      svg.parentNode.style.top = '45px';
      var height = Number(g.getElementsByTagName("text")[0].getAttribute('y')) + 20;
      g.setAttribute('transform', 'translate(0, -' + height + ')');
    }

    function resizeChart() {
      chart.draw(dataTable, options);
      afterDraw();
    }

    window.addEventListener('resize', resizeChart);
    resizeChart(); // Initial draw
  }
</script>

Explanation of Key Components

google.charts.load and google.charts.setOnLoadCallback: These functions load the Google Charts library and set the callback function to draw the chart once the library is ready.
dataTable.addRowsFill in the chart with your data. Each row represents an event with a start and end date.
options Object:
- timeline.showRowLabels: Hides row labels for a cleaner look.
- avoidOverlappingGridLines: Prevents overlapping of grid lines.
- hAxis.format: Sets the format of the date axis to display months and years.
- hAxis.minValue and hAxis.maxValue: Defines the start and end of the timeline, starting from today and extending to 3 months from today.
- chartArea.width and chartArea.height: Adjusts the chart's area to fit within the container.
afterDraw Function:
- Adjusts the position of the SVG elements to ensure the timeline is properly displayed at the top of the chart.
resizeChart Function:
- Redraws the chart and applies the afterDraw adjustments when the window is resized.
window.addEventListener('resize', resizeChart): Ensures the chart is responsive and maintains the correct layout when the window size changes.

Summary

This tutorial assists you in positioning the date axis and timeline chart bar at the top of your Google Visualization Chart. You can alter the chart's appearance to suit your requirements by modifying its settings and applying dynamic date calculations. This configuration makes sure your data is presented efficiently and clearly, whether you are showcasing project timelines or historical events.

Feel free to adjust the minValue and maxValue to fit the specific range of dates relevant to your data, and customize the format of the hAxis to suit your preferences.