[00:00] In this lesson, we'll take a look at the Perspective Time Series Chart Component. Designed for working with time-based data on the x- axis. To get us started, I have a flex container in my view here, and I'm just going to open up my component palette and drag in a Time Series Charts. Then I'll go into the property editor and just set the time series chart's grow value to one. So it takes up all available space. Now in my tag browser on the left hand side, I have some historized Sine tags which are just following simple wave forms. But let's go ahead and walk through pulling that into our new chart. In my property editor, the series property controls what data is actually displayed in the chart. So currently in my sample data here there's a single series with the name of boiler and then a data array. That data array can have multiple keys in it so if I expand data and then zero, we will see that our series currently has temperature and pressure pens, which are being displayed on my chart. There's also a time value which the chart is automatically set up to use as the x-axis. So I'm going to rename my series to sineData. And then for the actual data prop here I'll click the chain link icon to configure a tag history binding on the components. So on that tag history binding I'll change the point count to something like 500 to pull in 500 data points and I'll just leave the time range alone. So I'll get to see the last hour of data in here on my charts. So now that I have the range, I want to pull in some pens. So on the right hand side I'll find the tag icon and I'll just pull in a couple of pens by selecting the tag and clicking OK. So how about just sine zero and sine one? And once I have that I'm done with the whole minding, so I'll click Ok. And just like that, we'll get some good data coming into our charts. Now I'd like to note that the tag history binding is pulling in a data set to fill in the data, and that's just fine. If we use a data set to pull things in, each column in the data set will be its own pen. And the first column will be treated as the time column, which happens to be correct as is. So with that done, let's take a look at how we can customize our chart a bit more. Now I want a time to get to every property in this example but as always, our user manual is a great guide on all the properties that this component has to offer. With that said, let's go ahead and find our plots property down below. The plots array will contain an element for each subplot in our chart which is basically a different set of pens and axes. And inside of that array element, we actually have a chance to configure those pens and axes. So in total, most of the configuration for our chart will happen in this plot's array. Inside my plot I have trends, which is an array containing an element for each data series I'd like to show on my chart. So I'll start by creating a trend, and then inside of that trend I'll set the series to sine data. Now, I was already getting data on my chart, but coming into the trends section here, allows me to do things like change the type say, create a bar chart or an area chart or set up an axis in the axes array down below then specify it for the series. And if I find that axes array and add an element to it, we can see that creating an access is as simple as specifying a name, minimum, and maximum as well as specifying some formatting options for the access labels and tick marks. Going back into my trends, I can also use the columns array here to choose a specific subset of the pens in my data to show. So if I wanted to just do sine zero or sine one. I can also use that array to change the colors and properties of the pens directly but I'll be taking a different approach to that in just a moment. Finally, at the bottom here we have baselines which allow us to add calculated pens like an average, or a UCL or LCL value based on some other pen. So if I collapse the plots array I do have an opportunity here to configure some other settings, like a title for my chart or how I'd like the time access to look along the bottom or the time range displayed even below that. We also have an x-trace section. So if I go into preview mode and hover over the charts we can see what our pin values are at a specific point. So I can use the x-trace section to control how that feature behaves. I can also select specific pens to highlight them and make them easier to see as well as zoom in and out using my mouse's scroll wheel. And if I zoom in I can also pan around just by clicking and dragging. So a couple more properties here on the right hand side I have a legend, which I could turn on to get a sense of which pens are which, and I can change the position of the legend to be on any of the four sides of the chart. And finally, the last set of properties on my chart concern color schemes. So if I don't want to take responsibility for coloring each of my pens myself, we can use a color scheme here to define some default colors. And there are many different schemes to choose from. Whichever scheme you pick will be subject to different requirements based on the current pen state meaning whether it's been selected or a different pen has been selected and so on. So that about wraps up our discussion of the Time Series Chart, it's a great way of visualizing time oriented data in perspective.