Google Chart Rangefilter Specify Relative Date Range

Question

This post Google Column Graph Single Date and value showing as multiple adjucent bars has a clue in the hidden code snippet which helped me solve the question posed below.

I'm passing json-like data into google chart datatable. The head and tail are shown below.

Head:

var GSPC = 
{
  cols:[
    {label: "Date", type: "date"},
    {label: "High", type: "number"},
    {label: "Low", type: "number"},
  ],
  rows:[
  {c:[{v:"Date(1985,01,02)"},{v:167.20},{v:165.19}]},
  {c:[{v:"Date(1985,01,03)"},{v:166.11},{v:164.38}]},
  {c:[{v:"Date(1985,01,04)"},{v:164.55},{v:163.36}]},

Tail:

  {c:[{v:"Date(2018,02,14)"},{v:2702.10},{v:2648.87}]},
  {c:[{v:"Date(2018,02,15)"},{v:2731.51},{v:2689.82}]},
  {c:[{v:"Date(2018,02,16)"},{v:2754.42},{v:2725.11}]},
  ]
};

I have two ? marks in the javascript code below where I don't know how to set the range start and range end. The range end should be the last date in the DATA variable and the range start would be arbitrarily set relative to the range end (e.g. two years prior). How do I set the end of range to the final data value in the date array and how do I set the start of range to a prior date relative to the end date?

javascript - chart control wrapper

function drawDashBoard_GSPC() {

    var data = new google.visualization.DataTable(GSPC);

    var dashboard = new google.visualization.Dashboard(document.getElementById('GSPC_DashBoard'));

    var control = new google.visualization.ControlWrapper({
    controlType: 'ChartRangeFilter',
    containerId: 'Control',
      options: {
        filterColumnLabel: 'Date',
        ui: {
            snapToData: false,
            chartOptions: {
              chartArea: {
                left: 75, // set equal to left margin of scatter chartArea
                top: 0, // set to 0
                width: 1100, // set equalt to width of scatter chartArea
                height: 40 // set to 40
              }
            }
        }
      },
      state: {
        range: {             // SET START = 2 YEARS FROM END DATE
             start: ?,
             end: ?,
        }
      }
    });

SystemTheory SystemTheory · Accepted Answer · 2018-02-21T15:28:22

This post Google Column Graph Single Date and value showing as multiple adjucent bars provided the clue that helped me discover the solution below. This code takes the numDays integer as input then multiplies by oneDay which appears to be calculated as the number of milliseconds in a day. In the range setting only the 'start' date is calculated by subtracting rangeDays from the maximum (end date) value.

    // set date range
    var numDays = 730;
    var oneDay = (1000 * 60 * 60 * 24);
    var rangeDays = numDays * oneDay;
    var dateRange = data.getColumnRange(0);

    // range slider control
    var control = new google.visualization.ControlWrapper({
      controlType: 'ChartRangeFilter',
      containerId: 'GSPC_Control',
      options: {
        filterColumnLabel: 'Date',
        ui: {
            snapToData: false,
            chartOptions: {
              chartArea: {
                left: 75, // set equal to left margin of scatter chartArea
                top: 0, // set to 0
                width: 1100, // set equalt to width of scatter chartArea
                height: 40 // set to 40
              }
            }
        }
      },
      state: {
        range: {    // set 2 year window if data available
             start: new Date(dateRange.max.getTime() - rangeDays)
             //end: 
        }
      }

Google Chart Rangefilter Specify Relative Date Range

1 Answers