[00:00] In this lesson we're going to discuss the Power Chart, a charting component in the perspective module designed to work with tag history data that does a multitude of built in features and customization options. We will be devoting a few videos to these components, in this one we'll be focusing on the basics of using the component and configuring a few basic options. To get started, I've got a flex container here and I'll find my way into the component palette and drag over a Power Chart component. Then I'll go into the position properties and set the grow value to one, just so that it takes up all available space in my view here. Now on the left-hand side in my tag browser I have a handful of Sine tags, which I've set up tag history for already. And if I want to show them on my Power Chart the process is pretty simple. I'm just going to put my designer in preview mode, and then I'm going to click the Tag icon in the top left corner of the chart select through into my historical tag provider and then pick which tags I'd like to see.

[01:06] I can Control + Click to select multiple. So how about I just select the first three here, and then when I'm done I'll click Add Selected Tags at the bottom and just like that we have some tag data in our chart. So now that we have some tag pens let's talk about some of our charts special features. I'll begin by collapsing my little side panel here using the icon in the top right. Now, our chart area is divided into a few different sections in the main area we have our actual chart data with a time axis along the bottom and a y-axis showing actual values. Below the chart we have a little table showing some aggregate data for different pens things like the Current Value on the pen, the Minimum Value in our charts, the average value and so on. We can also hover over different pens in that section to manage the pen or remove it from our charts. And across the top we have several different configuration options for the chart, from the left, we have that handy button we've used earlier to add more pens to the chart, and next to that we have a time range selector for the chart.

[02:05] If I click on that section, it opens up a little selector that allows us to show a time range like the last 30 minutes or eight hours or two days or a historical range which allows us to choose any two dates we want as the start and end date for the chart. Now, as we consider this setting and other configuration settings it's important to keep in mind that so far I've been working entirely in preview mode here. So this is all exactly how you'd see it as a user in a real perspective session. One of the key features of the Power Chart is that the vast majority of the available chart properties are built into the component interface. For instance this time selector we've just seen is basically just controlling some underlying time properties which we can find in the config property at the top specifically. The other configuration options we'll look at here are similarly tied to properties behind the scenes. Occasionally you will find some properties like the mode settings we're about to get into that have some extra options in the property editor but we've tried where possible to give the user total control over how their chart is configured right from the session.

[03:08] The other thing to note about this setup is that, however my chart looks in the designer is how it I'll look by default in a real session. So adding in pens, configuring a time range and so on, will actually affect what the user sees initially when they open up this view. So with that said, let's take a look at some of the other icons on our chart here. The first little grouping of four icons on the right-hand side is for controlling the chart mode, so to speak. The chart mode effectively determines how the user can interact with the main chart area. The first chart mode, which is the default is Pen and Zoom, which allows the user to zoom into the chart, using the scroll wheel on their mouse and then drag side to side to view different portions of the time range clicking the Expand icon in the top right restores the original range. If I select the second mode that one is called X Trace, which allows the user to hover over the chart, to see x values at the time associated with the mouse cursor's position.

[04:04] If I click the mouse, it'll actually leave an X Trace marker at the specified location, and I can place multiple markers, if I'd like. To remove the markers I click the little More icon with three dots on the right-hand side, which has a clear X Traces option. Next step, we have Range Brush which allows us to revisit our table running along the bottom. As we've established that table is showing us aggregate data for the chart, but while I'm in Range Brush mode I can drag across specific chart ranges like so and see the same aggregate data for just that time range. I can resize that brush or drag it around, and I can even create additional brushes by dragging across a separate time range. If I want to get rid of a range, I just click the Trash can icon next to it table. So let's just clear out our brushes. Finally, the very last mode is Annotation mode. This mode allows us to make notes that are attached to individual data points on our chart, so for instance, I can click on a point here and say, "My note," and then hit Save, that'll save the annotation to the tag history tables in the database, specifically the annotations table.

[05:16] So that annotation will be shown to anyone who pulls up this tag history data. And on a final note, I can hover over the annotation to modify or delete it. Now, besides the Chart modes, there are some other properties along the top here, one is Full screen, which will hide the table and icons from the chart and allow the chart to take up a little bit more space. Next to that is the Settings icon which will allow us to dive a bit deeper into our chart content configuring Tag, Pens, Axes, and Subplots. We'll leave this section alone for a later video, but I will note that the columns tab here allows us to customize what is displayed in the Pen table across the bottom as well as what is shown when we create one or more range brushes in Range Brush mode. So the very last icon here is this More icon which just allows us to export the chart data as a CSV file or print the chart to a printer or a PDF file.

[06:07] This wraps up our basic discussion of the Power Chart components. It's a great way to chart history data across the perspective platform.