Google Charts Timeline grid - change timeline label span

Question

I'm using Google Charts API to draw timeline of a multipart process. Right now it is adjusted automatically; for the chart shown below the window between grid lines is two days, and if I put more events there it can be a week or so making the chart unreadable.

How to set the chart to draw grid lines every day instead of adjusting it automatically? Or is there an alternative to this API I can use its source code to customize?

Answer 1

Make it as responsive, this links is an example. Check it out

https://codepen.io/flopreynat/pen/BfLkA

HTML:

<div class="row">
  <div class="col-md-12 text-center">
    <h1>Make Google charts responsive</h1>
    <p>Full blog post details <a href="http://flopreynat.com/blog/make-google-charts-responsive.html">on my blog</a></p>
  </div>
  <div class="col-md-4 col-md-offset-4">
    <hr />
  </div>
  <div class="clearfix"></div>
  <div class="col-md-6">
    <div id="chart_div1" class="chart"></div>
  </div>
  <div class="col-md-6">
    <div id="chart_div2" class="chart"></div>
  </div>
</div>

CSS:

.chart {
  width: 100%; 
  min-height: 450px;
}

JS:

google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart1);
function drawChart1() {
  var data = google.visualization.arrayToDataTable([
    ['Year', 'Sales', 'Expenses'],
    ['2004',  1000,      400],
    ['2005',  1170,      460],
    ['2006',  660,       1120],
    ['2007',  1030,      540]
  ]);

  var options = {
    title: 'Company Performance',
    hAxis: {title: 'Year', titleTextStyle: {color: 'red'}}
 };

var chart = new google.visualization.ColumnChart(document.getElementById('chart_div1'));
  chart.draw(data, options);
}

google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart2);
function drawChart2() {
  var data = google.visualization.arrayToDataTable([
    ['Year', 'Sales', 'Expenses'],
    ['2013',  1000,      400],
    ['2014',  1170,      460],
    ['2015',  660,       1120],
    ['2016',  1030,      540]
  ]);

  var options = {
    title: 'Company Performance',
    hAxis: {title: 'Year',  titleTextStyle: {color: '#333'}},
    vAxis: {minValue: 0}
  };

  var chart = new google.visualization.AreaChart(document.getElementById('chart_div2'));
  chart.draw(data, options);
}

$(window).resize(function(){
  drawChart1();
  drawChart2();
});

// Reminder: you need to put https://www.google.com/jsapi in the head of your document or as an external resource on codepen //

Answer 2

It may disppoinsed you that there is no way to set steps for a continuous chart.

But you can set gridlines:{count: } according to your step and timeline width.