javascriptchartstimelinepygooglechart

google charts: timeline Scale


I use angular 6. In google chart timeline, how i can set the scale of the timeline to show just weeks or month, not show the day.

I set my graph like that :

Basegraph service

declare var google: any;

export class GoogleChartsBaseService {
  constructor() { 
    google.charts.load('current', {'packages':["timeline"], 'language': 'fr'});
  }

  protected buildChart(data: any[], chartFunc: any, options: any) : void {
    var func = (chartFunc, options) => {
      var datatable = google.visualization.arrayToDataTable(data);
      chartFunc().draw(datatable, options);
    };   
    var callback = () => func(chartFunc, options);
    google.charts.setOnLoadCallback(callback);
  }

}

Timeline service

    import { GoogleChartsBaseService } from './google-charts-base.service';
    import { Injectable } from '@angular/core';
    import { GanttChartConfig } from './../models/GanttChartConfig.model';

    declare var google: any;

    @Injectable()
    export class GoogleGanttChartService extends GoogleChartsBaseService {

      constructor() { super(); }

      public BuildPieChart(elementId: string, data: any[], config: GanttChartConfig) : void {  
        var chartFunc = () => { return new google.visualization.Timeline(document.getElementById(elementId)); };

     var rowHeight = 41;
        var chartHeight = data.length * rowHeight + 50;

    var options = {
            traitement: config.traitement,
                  datedebut: config.datedebut,
            datefin: config.datefin,
            chartArea:{},
            height: chartHeight
        };
           this.buildChart(data, chartFunc, options);
  }   
}

Solution

  • Simply set hAxis.

    var options = {
            traitement: config.traitement,
                  datedebut: config.datedebut,
            datefin: config.datefin,
            chartArea:{},
            height: chartHeight,
    
    
    hAxis: {
      format: 'dd MMMM yyyy',
    
    }