diff --git a/assets/src/scripts/components/hydrograph/index.js b/assets/src/scripts/components/hydrograph/index.js
index 57d52ae0ee17da813f0654224bf390be9b885c15..13bba480efa5c4b9e10c1fc6b5249e12c244aaa2 100644
--- a/assets/src/scripts/components/hydrograph/index.js
+++ b/assets/src/scripts/components/hydrograph/index.js
@@ -299,7 +299,7 @@ const watermark = function (elem) {
         }, layoutSelector));
 };
 
-const createDaterangeControls = function(elem) {
+const createDaterangeControls = function(elem, siteno) {
     const DATE_RANGE = [{
         label: 'seven-day',
         name: '7 days',
@@ -324,20 +324,21 @@ const createDaterangeControls = function(elem) {
         .attr('name', 'ts-daterange-input')
         .attr('id', (d) => d.label)
         .attr('value', (d) => d.period)
-        .on('change', function() {
-            console.log('Clicked on ' + li.select('input:checked').attr('value'));
-        });
+        .on('change', dispatch(function() {
+            return Actions.retrieveExtendedTimeseries(
+                siteno,
+                li.select('input:checked').attr('value')
+            );
+        }));
     li.append('label')
         .attr('for', (d) => d.label)
         .text((d) => d.name);
     li.select(`#${DATE_RANGE[0].label}`).attr('checked', true);
-
-
 };
 
-const timeSeriesGraph = function (elem) {
+const timeSeriesGraph = function (elem, siteno) {
     elem.call(watermark)
-            .call(createDaterangeControls);
+            .call(createDaterangeControls, siteno);
 
     elem.append('div')
         .attr('class', 'hydrograph-container')
@@ -483,7 +484,7 @@ const attachToNode = function (store, node, {siteno} = {}) {
         .call(provide(store));
     select(node).select('.graph-container')
         .call(link(controlGraphDisplay, timeSeriesSelector('current')))
-        .call(timeSeriesGraph)
+        .call(timeSeriesGraph, siteno)
         .call(cursorSlider)
         .append('div')
             .classed('ts-legend-controls-container', true)
diff --git a/assets/src/scripts/selectors/timeseriesSelector.js b/assets/src/scripts/selectors/timeseriesSelector.js
new file mode 100644
index 0000000000000000000000000000000000000000..e1e0f76f0c370027dafc8556da4c3b82f038e69e
--- /dev/null
+++ b/assets/src/scripts/selectors/timeseriesSelector.js
@@ -0,0 +1,21 @@
+const { createSelector } = require('reselect');
+
+export const variablesSelector = state => state.series.variables ? state.series.variables : null;
+
+/**
+ * @return {Object}     Variable details for the currently selected variable.
+ */
+export const currentVariableSelector = createSelector(
+    variablesSelector,
+    state => state.timeseriesState.currentVariableID,
+    (variables, variableID) => {
+        return variableID ? variables[variableID] : null;
+    }
+);
+
+export const currentParmCdSelector = createSelector(
+    currentVariableSelector,
+    (currentVar) => {
+        return currentVar && currentVar.variableCode ? currentVar.variableCode.value : null;
+    }
+);
\ No newline at end of file
diff --git a/assets/src/scripts/store/index.js b/assets/src/scripts/store/index.js
index e859393b01b45598ed9eaba23540866bef14b47d..a0e60d6d9c63e035a67468e95d84590596f5f135 100644
--- a/assets/src/scripts/store/index.js
+++ b/assets/src/scripts/store/index.js
@@ -8,6 +8,7 @@ const { getMedianStatistics, getPreviousYearTimeseries, getTimeseries,
     parseMedianData, sortedParameters } = require('../models');
 const { normalize } = require('../schema');
 const { fetchFloodFeatures, fetchFloodExtent } = require('../floodData');
+const { currentParmCdSelector } = require('../selectors/timeseriesSelector');
 
 const { floodDataReducer: floodData } = require('./floodDataReducer');
 const { floodStateReducer: floodState } = require('./floodStateReducer');
@@ -104,6 +105,41 @@ export const Actions = {
             );
         };
     },
+    retrieveExtendedTimeseries(site, period) {
+        return function(dispatch, getState) {
+            const parmCd = currentParmCdSelector(getState());
+            const endTime = new Date(); //TODO get this from the current data
+            let startTime = new Date(endTime);
+            switch (period) {
+                case 'P1M':
+                    startTime.setDate(startTime.getDate()  - 30);
+                    break;
+
+                case 'P1Y': {
+                    startTime.setFullYear(startTime.getFullYear() - 1);
+                    break;
+                }
+                default:
+                    console.log('No known period specified');
+            }
+            return getTimeseries({
+                sites: [site],
+                params: [parmCd],
+                startDate: startTime,
+                endDate: endTime
+            }).then(
+                series => {
+                    const tsKey = `current:${period}: ${parmCd}`
+                    const collection = normalize(series, tsKey);
+                    dispatch(Actions.addSeriesCollection(tsKey, collection));
+                },
+                () => {
+                    console.log(`Unable to fetch data for period ${period} and parameter code ${parmCd}`);
+                    dispatch(Actions.addSeriesCollection(`current:${period}: ${parmCd}`, {}));
+                }
+            );
+        };
+    },
     retrieveFloodData(siteno) {
         return function (dispatch) {
             const floodFeatures = fetchFloodFeatures(siteno);