Jerome Lefebvre

Stacked Area Graph

Blog Post created by Jerome Lefebvre on Jan 7, 2019

Showing data as a stacked area graph is a common way to represent data, often used to show how much one part affected the whole. For example, the contribution of site A to the production of the whole company.


PI Vision does not have a symbol to represent this data natively (this would be ideal for a custom symbol), so I will show how this can be done using regular Excel functionality and how we can mimic such representation using Formula data reference in AF.



In Excel, we will see how to make a graph that looks like this:


These two graphs make use of the standard Excel Stacked Area graphs (2D)


What we first need to do is pull data from our PI system using PI DataLink.

In this case, we want to make sure that for each X position, we have a value, thus we will use "Sample Data" retrieval method to pull data from our PI System.

In this case, we need to specify a Start Time, End Time and an interval. Along with the various data items we are interested in, in this case 3 tags.



This pulls in all the Y values for our Stacked Area graph, to get the X values, we will retrieve the associated timestamps.

Stacked Area Graph does not work with fractional part of a day (minutes/hours), thus we need to create an additional column that contains the timestamps represented as doubles




We can now add in a stacked graph, what needs to be configured first is the "data" portion of the graph.


The horizontal (Category) will be our column made of numbers that represent the timestamp (in this graph, the A column)

Then for each tag, we will add in a series. For example, the configuration for the first tag will be:


We now have our stacked area. The last issue is that the X-axis is not easily readable until we convert it back to timestamps.

We can do so from the format Axis menu


We then specify that these are numbers that are represented at Times.


PI Vision

In PI Vision, without relying on custom symbols, we can get the following.


To do this, we need to created various attributes to hold the data we want to display. These will be Formula data references.

All they are is they add the value of each tags you want to add, base on the order you want them to be displayed.


When you want to represent things for a Stacked Area 100% graph, you need to divide by the sum of the of the various tags you introduce.


Clearly the AF approach lacks scalability. Adding or removing a single tag means re-writing your AF structure, clearly not ideal, unless you know exactly what you want to display on your chart.


What would be best is to vote to make this a regular symbol for PI Vision, by using the user voice item below.


Bar chart and stacked bar chart – User Feedback for OSIsoft Products and Services

PI Vision custom symbols

And at last, JavaScript libraries do implement stacked area as symbols.

Thus, it should not be hard to implement a custom symbol that represents data in this way.

The best way down this road, would be to understand an other sample custom symbol we provide, such as this one:

PI-Vision-Custom-Symbols/sym-amcharts-trend.js at master · osisoft/PI-Vision-Custom-Symbols · GitHub