Version:

This lesson is part of the Perspective Components and Bindings course. You can browse the rest of the lessons below.

Supplemental Videos

Description

Learn how to work with the Perspective XY Chart component.

Video recorded using: Ignition 8.0

Transcript

(open in window)

[00:00] In this lesson, we'll talk about the XY chart in the Perspective Module. The XY chart is a fantastic chart to use if you're trying to show timeseries data, or if you just have multiple sets of numbers you need to show on different axes. We'll begin by creating an XY chart. I'll head over to the Perspective Component Palette. And under the Chart category, we'll grab XY, drag that onto our view. Now we can see there's already a trend on here. This is just being populate by an initial data set. So just sample data. If we take a look at the Property Editor here, under data sources there's this thing called example, and if I expand that, we see the various elements. If I keep drilling in we can see that I have three items right now. So there's a timestamp, which is currently being shown on the x axis. And then process_temp and output_temp, which are being shown on the y axis. So the work flow for the XY chart is that you bring your data in as a data source, you configure your axes and then you define a series of data. The series of data just specifies which data source, which axes, and which column. Now we can have multiple data sources. You can have separate data sources listed here, and show the pens from the various data sources on the chart. But let's start by populating this with our own data. So instead of adding a new data source, I'm simply going to replace the data inside of example here. I'll do that with a binding, I'll press the binding icon for example. I'll select tag history as the binding type. If you need more information on this type of binding, please check out the Tag History Binding video. And to keep the example clean, I think I'm just going to show the last 10 minutes of data. But I don't want to forget to add my tag path here. So let's hit the little tag button. I'll go to my Tags folder, and I have some tags, some Sine tags here, that I'm collecting historical data for with the tag history system, so I'll just select the Sine0. Again, please see the tag history videos for more information about configuring your tags for tag history. We'll hit okay here and technically we're ready to go. I have a dataset that has some content that's being brought in; however, I am going to change the value format here to document. The main reason why I'm doing this is a little bit of a convenience thing later on. It doesn't really matter what you set the value mode here to, in both cases we can use the data that this binding's bringing back on the XY chart. However, if I set this to document, I can actually examine each row. So we'll set value format to document, I'll hit okay, we can see that example now has 100 rows inside of it, and it's showing the sine0 data, as well as a timestamp associated with it. Now, the larger problem though, is that's not really much of a trend. So we've brought the data in, but we haven't told the chart what it should do with sine0. To do that, let's collapse our data sources here. And again we have all these properties, we'll kind of scroll down a bit more, there is a series property. Each element under series is a separate pin you want to show on the chart. So if I look at element zero here, we'll expand it, and we'll scroll down a little bit further. We can see that we have the name for the pin here, which is being represented on the chart in a couple locations. But the data, the data property here, if I expand that, these settings here dictate where the data for this pin's coming from. So again it's looking at the example data source. So if I created a new data source at the start here, I'd have to change the name here to match the name of the new data source. And then for the y axis here, we need to specify a column within that data source. Now we didn't really make any changes, our column is just sine0, so, sine0. And there's our trend. So again, multi-step process. You need to provide some data to the chart, and then tell the chart what to do with it. Now if I needed to add more pens or more series elements here, we know that we can always add a new array element under series, the schema for the series is already defined, so it'll auto populate with what properties you need to define. However, instead of typing everything out, I'm going to right click on series zero here, I'll copy, and then I'll right click on series two, I'll paste, that way I can just change the name as well as the data, so that it looks at a different column in my data source.

You are editing this transcript.

Make any corrections to improve this transcript. We'll review any changes before posting them.