[00:00] In this lesson we'll look at the Timeseries Chart in the Design panel. And I'll head over to my Component palette and grab a Timeseries Chart. So I'll click and drag and drop, there we are, and I'm going to zoom in just so it's a little easier to see. Now, the Timeseries Chart is a line chart with a data axis configured on the domain so you can see that right down here and so it's just showing us some dates. Now to get any sort of meaningful data out of here, we need to provide a data key which you'll see with the chart selected, there's that Data Key property in the Property Inspector. If we check the Data panel we'll see that I have a tag_history query all ready for our chart to use. So let's go back the the Design panel, select our chart, go over to the Key Browser, we'll expand data sources, and we'll drag and drop tag_history to our Data Key. Next we need to specify a domain key. When the Timeseries Chart is created the domain key is by default set to this t_stamp value, but you can set it to any sort of timestamp or time value column you'd like. Now, since we're using a tag_history query, if we drill down to our tag_history data source, you can see that t_stamp's already a column being returned. So the domain key is already set. The bare minimum last thing we need to do to show some tag history on the chart is to add our pens. Now, there are two pens by default, but these are just placeholders, they don't really have any data associated with them. So I'm going to click on one of them, click the remove icon a couple of times to remove our pens. So there's two ways to add pens. First you can click on the plus icon on the right here, and it'll create a new pen for us. And what we could have done, we could have done this to our test pens too, is just drag and drop one of our keys to this Range Key column, let go, and now this pen is looking at a Random Double tag. Just go ahead and change the name here too, so My Double. Alternatively we could just drag and drop our keys from our data source. So Random Integer and Random Long. And that's all we really need to do to show tag history. We'll head over to the Preview panel. You can see I already have some values showing up. Zoom in again here and it looks like I wasn't getting any values till about two o'clock today. Let's look at some of the properties that are available on the Timeseries Chart. Head back to the Design Panel, I'll click on the chart, and let's start with our Pens here. If I click on the Edit icon to the right of the Pens table, we can change the Data Key, the Pen Name, the Axis, now this is referring to the range axis not the domain axis. Now, you can change the color, do a hunter green color, and change the Style, so we can do a Shape, we can do an Area, let's do Line And Shape. You can specify the width of the line, the dash pattern, you can use a different shape, if we want to fill the shape or not, and then you could also set a Bar style if you'd like as well, and then place some labels over the Bar, so just to show what the values are. I'll leave that off for right now though. And once you're done here, we can click on the little back arrow. This will take us back to our Pens, or our Property Inspector. And if we scroll down we can take a look at the properties for the axis, so we'll click on the axis, click on the Edit icon, you can change the name, label, the type, the position, so if you want it on the left side, you want it on the right side, you want to just hide it entirely. I'll scroll down here. You can disable Auto Range. And when you do you can specify your lower and upper bound values. You can also specify if you want manual tick units. We'll go ahead and leave this at five for right now. Click back, and we'll see that our axis has been updated, and of course we can add multiple axises if we want and give them new names, make them Auto Range or not from here. When I create a new axis, want to make sure that we configure our pens, or at least one of or pens that use it otherwise it won't show up on the chart here. Now the last area of properties that you want to pay attention to is this Properties tab at the top here. Now these are properties specific to the chart. So we can change our data or domain key from here. We can change the font on our domain axis, as well as the bar width or the gap threshold. And you see there's not that many, we very quickly going down our basic properties, but there is one important one which is this Date Format. Now normally the format on the domain axis is dependent on the date range shown on the chart. So if we take a look at the Preview panel and we scroll over, you can see I'm really only seeing six hours, and it's just showing the hours so from 10 to four. If we go back to the Design panel here and we select our chart one more time, head back to our Properties, we can override this though with this Date Format. So when there's no value in here, it'll automatically detect it, but if we put in say, the year, month, and our day, hit Enter, the date on the domain range will always use this format.