# Chart Range using Dropdown List

**URL:** <https://forum.inductiveautomation.com/t/chart-range-using-dropdown-list/12524>\
**Category:** General Discussion\
**Created:** [January 6, 2017, 1:16pm UTC](https://forum.inductiveautomation.com/t/chart-range-using-dropdown-list/12524 "2017-01-06T13:16:11Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![DwSoFt](https://avatars.discourse-cdn.com/v4/letter/d/b5ac83/32.png) [@DwSoFt](https://forum.inductiveautomation.com/u/DwSoFt)\
**Post date:** [January 6, 2017, 1:16pm UTC](https://forum.inductiveautomation.com/t/chart-range-using-dropdown-list/12524/1 "2017-01-06T13:16:11Z")

</div>

The operators for one of my clients, want to be able to quick select different ranges on their charts via drop down list, then fine tune using the bar at the bottom afterwards.

So far i have a dropdown list, but i dont seem to be able to get it working as i intend.

Any ideas?

---

<div class="post-metadata">

**Author:** ![paul-griffith](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/paul-griffith/32/37249_2.png) [@paul-griffith](https://forum.inductiveautomation.com/u/paul-griffith)\
**Post date:** [February 3, 2017, 11:55pm UTC](https://forum.inductiveautomation.com/t/chart-range-using-dropdown-list/12524/2 "2017-02-03T23:55:44Z")

</div>

This is probably easiest to explain with an example. In the attached, I use two invisible columns of the data property of the dropdown to hold a startdate and enddate. The startdate and enddate values are bound with a cell update binding to some custom properties on the dropdown component - these custom properties are driven by expressions. Then, on the date range component I put on the bottom half of the window, I bound the start date and end date properties to the dropdown’s dataset, using the rowIndex and a static column index. I wrapped it all in a try() so that, when the window first loads, if no value is selected on the dropdown the end user won’t see any nasty errors/overlays.

---

<div class="post-metadata">

**Author:** ![AlThePal](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/althepal/32/3603_2.png) [@AlThePal](https://forum.inductiveautomation.com/u/AlThePal)\
**Post date:** [February 4, 2017, 11:41am UTC](https://forum.inductiveautomation.com/t/chart-range-using-dropdown-list/12524/3 "2017-02-04T11:41:12Z")

</div>

Sometimes binding can end up quite involved - in this case I think coding directly is actually easier.

To do this, set up a dropdown with the following static data:

`Value Label
  1 Last 24 hours
  3 Last 3 days
  7 Last 7 days`Then attach the following code to the dropdown’s propertyChange event:

`if event.propertyName == 'selectedValue' and event.newValue > -1:
	days = event.newValue
	endDate = system.date.now()
	startDate = system.date.addDays(endDate, -days)
	dateRange = event.source.parent.getComponent('Date Range')
	dateRange.startDate = startDate 
	dateRange.endDate = endDate `  
This code checks to make sure the user has selected a valid entry from the list before calculating the start and end times and writing them directly to the date range control.

I’ve attached a project to show how this is done. Just right-click on the Windows entry in the Project Browser and select import to try this out.