Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to set Min and Max date for Google timeline charts?

I would like to set the Min and Max date in Google timeline charts. Google Timeline Charts

I have tried using

 hAxis: {
        viewWindow: {
          min: new Date(2014, 1, 31)
        }}

and

 hAxis: {
        viewWindow: {
          minValue: new Date(2014, 1, 31)
        }}  

both does not work. If there is no way to set the date ranges, how to get the Min and Max date values that is set by the api itself?

like image 341
wishchaser Avatar asked Mar 12 '14 05:03

wishchaser


People also ask

How do I add dates to Google Sheets chart?

Select the Google Sheet you'd like to use for this widget (the "Spreadsheet" option) Select the tab that contains the data you want to use ("Spreadsheet Tab") Specify the date column in the "Dimension Column" in your pie chart or bar chart widget or in the "Date Column" in your table, line chart or sparkline widget.

What is time line chart?

Overview. A timeline is a chart that depicts how a set of resources are used over time. If you're managing a software project and want to illustrate who is doing what and when, or if you're organizing a conference and need to schedule meeting rooms, a timeline is often a reasonable visualization choice.

How do I use react Google charts?

First, we import react-google-charts and get the Chart property. Next, we create a data variable that will house the data to be displayed on the pie chart. The pie chart is highly customizable; for a more complex chart, you only need to update the data to the array.


1 Answers

Google Charts version 43 (released October 2, 2015) supports minValue and maxValue for the horizontal axis:

....

var options = {
  hAxis: {
    minValue: new Date(1785, 0, 0),
    maxValue: new Date(1816, 0, 0)
  }
};

....

You have to load it via the frozen version loader though since apparently it wasn't successfully deployed by the usual process.

It looks like minValue and maxValue works only for putting spacing at the beginning and end of the timeline. So if you specify a minValue that is later than the start date of one of your data points, the timeline still starts at that data point and not at the minValue.

Here is a jsfiddle that shows minValue and maxValue providing spacing at the beginning and end of the first Google Timeline example: https://jsfiddle.net/o27ttyy3

like image 96
Mike H Avatar answered Sep 28 '22 08:09

Mike H