You can easily add date pickers to a Klip so that the data automatically filters to the date range a user selects.
Let's set up an example using a Bar/Line chart.
Drag in two User Input Control components from the Components palette: one is our start date picker and other is our end date picker.
In the Properties panel of each User Input Control component:
Type in a control label to identify each date picker (eg: Start Date and End Date)
Select a control type of date picker
Create a variable for each date picker (eg: startdate and enddate)
Consider the scope of your variable. If you only want the date picker to apply to this Klip, select a scope of Only this klip. Click here to learn more about the other scopes you can select.
Select an Output format of Unix time (as seconds).
Select the Display format you want the user to see when selecting the date.
Tip: Use the Layout Grid component to display these components next to each other.
Drag in a Bar/Line chart component.
Select the data:
For the X:Axis, select the date column from your data source.
In the Properties panel, format as Date/time and for input format select the date format from your data source (eg: M/d/yyyy), if it is not automatically selected for you.
Tip: If you have questions about date syntax, see our date and time article.
Select the display format of the date you want to see in your Klip.
Select a sort order of Oldest to Newest.
Select Group repeating labels if you have multiple instances of the same date in your data source.
Adjust the Label Angle if required.
For the Series, select the column of data you want to measure.
In the Properties Panel, select an Aggregation method (eg: Sum)
Adding your date pickers to filter the data based on a start and end date.
Select the X:Axis sub-component, click the three vertical dots, and select Filter.
On the Condition tab, select On or after your startdate variable.
Select + Add condition
Select on or before your enddate variable.
Add the Klip to a dashboard, and select a start and end date, and verify that the data is correctly displayed.