javascript - Google Charts Timeline grid - change timeline label span - Stack Overflow

admin管理员组

文章数量:1389875

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?

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?

• javascript
• google-visualization

Share Improve this question Follow asked Oct 27, 2016 at 9:18 LemurLemur 2,66544 gold badges2828 silver badges4242 bronze badges 2

• I dont want to limit the range, I just want to make the grid more dense. For now I hacked it by setting the size as 150% of viewport width and zoomed out in CSS... – Lemur Commented Oct 30, 2016 at 21:46
• Do you have any code? Google Visualization API has several ways to do each task so it's important to know what you have already done and we could start there. For instance, your x-axis has even numbered labels, so we need to know how your data source was made. – zer00ne Commented Oct 31, 2016 at 3:33

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

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./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./jsapi in the head of your document or as an external resource on codepen //

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.

本文标签： javascriptGoogle Charts Timeline gridchange timeline label spanStack Overflow