[00:00] In this lesson, we'll be taking a look at the chart range selector component, which allows us to show a miniature chart that we can use to select a date range from a main chart like a time series chart. So to get us started I have a time series chart here, already configured to show me historical data on a Sine pen. The one thing missing is a way to change what time range I'm seeing data for. So for that let's go ahead and drag in a chart range selector. And once I've done that, let's dive into some of the properties. On the right hand side you'll see a data property, which is expecting all of the chart data we'll be using, just like any other chart component would. It's an array of objects where each object includes values for all pens, as well as a special time value which will be the x-axis. So to make this work, I want my chart range selector to show the same data as the time series chart up above. So what I'm going to do is select my time series chart, find the series property and expand the first series. Then find the data property inside, which is bound to a tag history binding and right click then say copy binding. That'll take the tag history binding I've configured on my charts and copy it to my clipboard. From there I can select the chart range selector, find the data property, right click and say paste binding. And with that our two charts have the same data on them. Most of the other properties on the chart range selector are pretty similar to properties on a time series chart. We can specify things like how our x and y axis should look as well as what color scheme we'd like to use for our pens. Now on my range selector, I can test out making a selection, by going into preview mode and making a selection by dragging. Then I can move that selection around by dragging again or resizing the selection interval, or zooming in and panning just like I can on a time series chart. For the rest of this example, we'll take a look at how to make our time series chart respect the selection. What I need to do is come out of preview mode, then select my time series chart, and I'm going to go back into my series and find that tag history binding. Now if we look at the binding, we'll see that we're getting all data for the past hour. But I want the range to come from the selector. So I'm going to change the time range on the binding to historical and then lengthy start and end dates to the selector. So I'm going to find the little FX icon on the start date, clear out the contents, then use the property icon to find the chart range selector, expand props, expand selected range and click that start prop, then click okay. Then I'll do the same thing for the end dates just clicking through, until I find the end prop. And once everything is hooked up I'll click okay. And that's it. Now if I go into preview mode, we can see that sliding around our chart range selector will update what we see on our charts.