diff --git a/assets/src/scripts/components/hydrograph/index.js b/assets/src/scripts/components/hydrograph/index.js
index e6d046b44701bb7c29c46c8fe4fde2a583ceded0..8394f6e8d2388f92246137d69e3621ed135ba6d9 100644
--- a/assets/src/scripts/components/hydrograph/index.js
+++ b/assets/src/scripts/components/hydrograph/index.js
@@ -324,7 +324,7 @@ const createDaterangeControls = function(elem, siteno) {
         name: '1 year',
         period: 'P1Y'
     }];
-    const container = elem.append('ul')
+    const container = elem.insert('ul', ':first-child')
         .attr('id', 'ts-daterange-select-container')
         .attr('class', 'usa-fieldset-inputs usa-unstyled-list');
     const li = container.selectAll('li')
@@ -349,9 +349,7 @@ const createDaterangeControls = function(elem, siteno) {
 
 const timeSeriesGraph = function (elem, siteno) {
     elem.call(watermark)
-        .call(createDaterangeControls, siteno);
-
-    elem.append('div')
+        .append('div')
         .attr('class', 'hydrograph-container')
         .call(createTitle)
         .call(createTooltipText)
@@ -494,7 +492,9 @@ const attachToNode = function (store, node, {siteno} = {}) {
 
     store.dispatch(Actions.resizeUI(window.innerWidth, node.offsetWidth));
     select(node)
-        .call(provide(store));
+        .call(provide(store))
+        .call(createDaterangeControls, siteno);
+
     select(node).select('.graph-container')
         .call(link(controlGraphDisplay, timeSeriesSelector('current')()))
         .call(timeSeriesGraph, siteno)
diff --git a/assets/src/scripts/components/hydrograph/index.spec.js b/assets/src/scripts/components/hydrograph/index.spec.js
index 3f47ff774b07c89de87c095b028c936a46c9c27e..caa3ce06d9dac9f9737c08666814494ff9b27505 100644
--- a/assets/src/scripts/components/hydrograph/index.spec.js
+++ b/assets/src/scripts/components/hydrograph/index.spec.js
@@ -396,4 +396,29 @@ describe('Hydrograph charting module', () => {
             expect(select(graphNode).select('.provisional-data-alert').attr('hidden')).toBe('true');
         });
     });
+
+    fdescribe('Creating date range controls', () => {
+        let store;
+        beforeEach(() => {
+            store = configureStore(TEST_STATE);
+            attachToNode(store, graphNode, {siteno: '12345678'});
+
+        });
+
+        it('Expects the date range controls to be created', () => {
+            let dateRangeContainer = select(graphNode).select('#ts-daterange-select-container');
+
+            expect(dateRangeContainer.size()).toBe(1);
+            expect(dateRangeContainer.selectAll('input[type=radio]').size()).toBe(3);
+        });
+
+        it('Expects to retrieve the extended timeseries when the radio buttons are change', () => {
+            spyOn(Actions, 'retrieveExtendedTimeseries');
+            let lastRadio = select(graphNode).select('#one-year');
+            lastRadio.attr('checked', true);
+            lastRadio.dispatch('change');
+
+            expect(Actions.retrieveExtendedTimeseries).toHaveBeenCalledWith('12345678', 'P1Y');
+        });
+    });
 });
diff --git a/assets/src/scripts/store/index.js b/assets/src/scripts/store/index.js
index 8358006eb353444ddbba152f74b364ef154097dd..ebb471a9ad0fc8a5c73b73729103883b1e3e5d9f 100644
--- a/assets/src/scripts/store/index.js
+++ b/assets/src/scripts/store/index.js
@@ -8,7 +8,7 @@ const { getMedianStatistics, getPreviousYearTimeseries, getTimeseries,
     parseMedianData, sortedParameters } = require('../models');
 const { normalize } = require('../schema');
 const { fetchFloodFeatures, fetchFloodExtent } = require('../floodData');
-const { currentParmCdSelector, currentDateRangeSelector, hasFetchedTimeseries } = require('../selectors/timeseriesSelector');
+const { getCurrentParmCd, getCurrentDateRange, hasTimeseries } = require('../selectors/timeseriesSelector');
 
 const { floodDataReducer: floodData } = require('./floodDataReducer');
 const { floodStateReducer: floodState } = require('./floodStateReducer');
@@ -108,10 +108,10 @@ export const Actions = {
     retrieveExtendedTimeseries(site, period) {
         return function(dispatch, getState) {
             const state = getState();
-            const parmCd = currentParmCdSelector(state);
+            const parmCd = getCurrentParmCd(state);
             const tsKey = period === 'P7D' ? 'current' : `current:${period}:${parmCd}`;
             dispatch(Actions.setCurrentDateRange(period));
-            if (!hasFetchedTimeseries(tsKey)(state)) {
+            if (!hasTimeseries(tsKey)()()(state)) {
                 const endTime = new Date(); //TODO get this from the current data
                 let startTime = new Date(endTime);
 
@@ -164,7 +164,7 @@ export const Actions = {
     updateCurrentVariable(siteno, variableID) {
         return function(dispatch, getState) {
             dispatch(Actions.setCurrentVariable(variableID));
-            dispatch(Actions.retrieveExtendedTimeseries(siteno, currentDateRangeSelector(getState())));
+            dispatch(Actions.retrieveExtendedTimeseries(siteno, getCurrentDateRange(getState())));
         };
     },
     startTimeseriesPlay(maxCursorOffset) {