Google Charts set a computed date range

Question

I am trying to set an opening/initial state on a Google Visualisation Table chart by computing a date based on other details held eventually in sessionStorage - kinda like:

 var iLowD = Date(2000, 1, 11); //computed from other system or page
 var iHiD = Date(2022, 1, 1); //computed from other system
 var sSet = "{'lowValue': new Date(" + iLowD.getFullYear().toString() + ", " +iLowD.getMonth().toString()+ ", " + iLowD.getDate().toString() + "), 'highValue': new Date(" + iHiD.getFullYear().toString() + ", " +iHiD.getMonth().toString()+ ", " + iHiD.getDate().toString() + ")}" 
    sessionStorage.setItem('catPicker', sSet);

This will give us:

'state':{'lowValue': new Date(2000, 1, 11), 'highValue': new Date(2012, 1, 1)}

then later we will get this value from the sessionStorage and try and apply it to a reporting chart, such as:

 google.charts.load('current', {packages:['table', 'controls']});
    google.charts.setOnLoadCallback(drawVisualization);

  function drawVisualization() {
    var data = google.visualization.arrayToDataTable([
      ['Extrasolar planet',
       'Comment',
       'Year'],
      ['Gamma Cephei Ab',
       'Deduced from radial velocity variations of the star Gamma Cephei',
       new Date(1988, 6, 13)],
      ['HD 114762 b',
       'At least 11 times the mass of Jupiter',
       new Date(1989, 4, 4)],
      ['PSR B1257+12',
       'First confirmed discovery of an extrasolar planet',
       new Date(1992, 0, 22)],
      ['51 Pegasi b',
       'Hot Jupiter with a 4.2 day orbit',
       new Date(1995, 9, 6)],
      ['47 Ursae Majoris b',
       'First long-period planet discovered',
       new Date(1996, 0, 17)],
      ['Upsilon Andromedae',
       'First multiple planetary system around a main sequence star',
       new Date(1996, 7, 12)],
      ['Gliese 876 b',
       'First planet found orbiting a red dwarf',
       new Date(1998, 5, 23)],
      ['HD 209458 b',
       'First exoplanet seen transiting its parent star',
       new Date(1999, 10, 5)],
      ['Iota Draconis b',
       'Provided evidence that planets can exist around giant stars',
       new Date(2002, 0, 8)],
      ['PSR B1620-26 b',
       '12.7 billion year old planet orbiting a binary star system',
       new Date(2003, 6, 10)],
      ['2M1207 b',
       'First planet found orbiting a brown dwarf',
       new Date(2004, 6, 22)],
      ['Mu Arae c',
       'Hot Neptune',
       new Date(2004, 7, 25)],
      ['TrES-1 and HD 209458 b',
       'First detection of light from exoplanets',
       new Date(2005, 2, 22)],
      ['OGLE-2005-BLG-390Lb',
       'Detected used gravitational microlensing',
       new Date(2006, 1, 25)],
      ['Gliese 581 c',
       'Inhospitable due to runaway greenhouse effect',
       new Date(2007, 3, 4)],
      ['Fomalhaut b',
       'First exoplanet directly imaged by optical telescope',
       new Date(2008, 10, 13)],
      ['GJ 1214 b',
       'Might be 75% water and 25% rock',
       new Date(2009, 11, 16)],
      ['HD 10180',
       'Seven planets orbiting a sun-like star',
       new Date(2010, 7, 24)],
      ['55 Cancri e',
       'Orbital period of just 0.73 days',
       new Date(2011, 3, 27)],
      ['Alpha Centauri Bb',
       'Earth-mass planet in the star system closest to ours',
       new Date(2012, 9, 16)],
      ['PH2 b',
       'Potentially habitable Jupiter-sized planet',
       new Date(2013, 0, 13)],
      ['Kepler-69c',
       'First potentially habitable Earth-sized planet orbiting a sun-sized star',
       new Date(2013, 3, 18)]
    ]);

    // Define a DateRangeFilter slider control for the 'Year' column.

    var sDate = sessionStorage.getItem('catPicker');

    var slider = new google.visualization.ControlWrapper({
      'controlType': 'DateRangeFilter',
      'containerId': 'control',
      'options': {
        'filterColumnLabel': 'Year',
        'ui': { 'format': { 'pattern': 'yyyy' } }
        
      },
      'state':sDate //this is the bit that I can't work out how to set, so should be 'state':{'lowValue': new Date(2000, 0, 11), 'highValue': new Date(2016, 1, 1)}
    });

    var tableChart = new google.visualization.ChartWrapper({
      'chartType': 'Table',
      'containerId': 'chart',
      'options': {
        'width': '100%',
        'height': '100%',
        'chartArea': {top: 0, right: 0, bottom: 0}
      }
    });

    // Create the dashboard.
    var dashboard = new google.visualization.Dashboard(document.getElementById('daterange_div'));
    // Configure the slider to affect the bar chart, and then draw the dashboard.
    dashboard.bind(slider, tableChart);
    dashboard.draw(data);
  }

HTML to go with this, knicked from https://developers.google.com/chart/interactive/docs/gallery/controls#daterangefilter

<div id="daterange_div" style="border: 0px solid #ccc">
  <div id="control" style="padding-left: 2em"></div>
  <div id="chart"></div>
</div>

Idea: We may even then be able to remember the chart settings that a user has set and return the chart as they last opened it (by upping from sessionStorage to localStorage? hmm, mind racing) but I assume will need to be able to 'compute' the state first. If we were to go down the .setState path, when would we attach the initial setState so the user could then adjust it?

Answer 1

Thanks, the solution was to use an object as suggested:

    // Define a DateRangeFilter slider control for the 'Year' column.
**var stateStorage = {lowValue: new Date(2000, 1, 11), highValue: new Date(2012, 1, 1)};**
var slider = new google.visualization.ControlWrapper({
  controlType: 'DateRangeFilter',
  containerId: 'control',
  options: {
    filterColumnLabel: 'Year',
    ui: { 'format': { 'pattern': 'yyyy' } }
  },
  state: {
    lowValue: stateStorage.lowValue,
    highValue: stateStorage.highValue  
    }
});

and then apply the object parts to each property, however I then applied the whole object to the state:

    // Define a DateRangeFilter slider control for the 'Year' column.
var stateStorage = {lowValue: new Date(2000, 1, 11), highValue: new Date(2012, 1, 1)};
var slider = new google.visualization.ControlWrapper({
  controlType: 'DateRangeFilter',
  containerId: 'control',
  options: {
    filterColumnLabel: 'Year',
    ui: { 'format': { 'pattern': 'yyyy' } }
  },
  state: stateStorage 
});

and this also worked. Thanks.

Answer 2

when defining the control, you would set the state as follows...

  state: {
    range: {
      start: stateStorage.lowValue,
      end: stateStorage.highValue
    }
  }

where...

stateStorage = {lowValue: new Date(2000, 1, 11), highValue: new Date(2012, 1, 1)}

if you were to rename the keys in your storage,
from lowValue to start
and highValue to end,
and contain within a range object,
you could use...

  state: stateStorage

where...

stateStorage = {range: {start: new Date(2000, 1, 11), end: new Date(2012, 1, 1)}}