Call us! 512-349-0334 or (877) INDUSOFT

How to Create a Native-Object Pie Chart Symbol in InduSoft Web Studio

It’s easy to use or build a Pie Chart for use in any InduSoft Web Studio application. Certainly, there are many 3rd-Party ActiveX and .NET controls for sale that have sophisticated business charts and objects that could be used within an HMI or SCADA application. However, the limitation with these objects is the cost of purchasing the objects, and that Microsoft technologies are required to display them, forcing your application to only be run on platforms that support the ActiveX and .NET containers.

So, is there an alternative to these specialized business objects that will run natively in an InduSoft Web Studio runtime?

ANDON Symbol Modification

The simplest way to understand how to build or use this functionality is to download and modify one of the Andon symbols from our Free Add-ons Web Store Library. Using the symbol called ANDON_GaugeRedYellowGreen.sym and looking at the construction, it can be seen that half-hemisphere shaped closed polygons are rotated against one another to create a green/yellow/red segmented background for the needle. This “Pie Chart” section of the gauge uses hidden closed-polygon segments that are rotated out from behind a black mask also serving as the value display, in order to show a percentage of the full-scale value of the meter in each color. (See Figure 1).


Figure 1: ANDON Symbol construction

By placing tags into the custom property fields for RedLimit and GreenLimit, the red and green segments can be rotated from zero to full-scale (100%) when the tag has values from 0 to 100. Several other colored segments could also be added, and using this technique, a simple half-hemisphere (180°) Pie Chart object can be constructed that works quite well and is easy to understand, having many Pie Chart Slices. The disadvantages of using this technique is that the final object is not a true round Pie Chart object, and that the rotational values as a percentage of full-scale value and against each of the other values needs to be calculated in a script outside of the symbol.

Radial Progress Bar Symbol Modification

Next, taking this technique one step further, and downloading the RadialProgressBar.sym from our Free Add-Ons Library, it can be seen that this same technique can be applied to a 360° object, creating an actual Pie Chart symbol, as shown in Figure 2.


Figure 2: Radial Progress Bar Symbol pie chart construction technique and modification

Note that when using this technique, one part of the symbol is an Arc, which needs to be defined as the same color as the background color of the screen, so it makes direct portability between different applications a potential issue. In the Symbol Editor shown in Figure 2 lower left, the four closed-polygon segments that create the Pie Chart Slices are shown as purple, and the mask Arc Object segment is shown as grey. Each of the segments has a constraint in the Rotational Animation expression only allowing it to turn 0 to 90, 90 to 180, 180 to 270, and 270 to 360 degrees, respectively. The constraint is on the value input tag allowing 0-25, 25-50, etc. (see bottom right pictures). Finally, the top picture in Figure 2 shows the symbol in correct operation with the final (number 4) segment rotating over the mask piece, filling the circle.

The main disadvantage of this technique is that each pie slice requires four unique segments. If there are a large number of Pie Chart Slices, such as ten, then there will be ten identical constraints (with unique tag names such as Value1, Value2, Value3, etc.) for each of the four segments of the value (total of 40). This makes housekeeping, management, and use of the object a little bit difficult or tricky. Additionally, since the filter constraint for each segment was created using the value of the custom property (#TagName:), this means that the value of the pie chart object can only be 0 to 100 in order for it to work correctly, and any other values used within the object must be scaled accordingly in a script.

The Pie Chart Symbol

In order to make a Pie Chart symbol that is more consistent and usable across a wide range of input values and a large number of inputs (or pie slices), a different approach to the Pie Chart creation can be used. Downloading and opening the demonstrates a more flexible and accurate representation of a Pie Chart display (PieChart.sym). Also within the .zip file is another symbol, PieChartLegend.sym which displays the numerical values of the Pie Chart slices (actual value and a percentage of the whole) in a grid format. In addition to these symbols themselves, there is also a self-explanatory demo application in a separate .zip file demonstrating how the Pie Chart Symbol and the Pie Chart Legend Symbol can be used together (Figure 3).


Figure 3: Pie Chart Symbol and Pie Chart Legend Symbol shown running in the demo application

The Pie Chart object is constructed using 360 (0 through 359) 1° segments, tab-ordered (0° at the front, 359° at the back) and stacked together (Figure 4). Each segment has a Rotation Animation and a Color Animation so that each of them has the ability to show the selected color of any pie-slice value (either the default color, a new 16-million numerical color value, or a tag with the desired numerical color value), and each of the 1°segments has its own unique degree-position (0° to 359°) around the “pie”. Additionally, by adding a start-offset custom property tag to the rotational position value, the whole object can be “rotated” clockwise as a single entity, or rather, the starting position of the Value 1 Slice can be set to be anywhere around the Pie Chart. The default position using no offset (or offset “0”) is at the 6 o’clock position of the circle. 1° segments are used since they display very well on monitors or devices of varying sizes and resolutions, while still showing each value segment fairly accurately, no matter how small each is in comparison to the others. Larger segments can be substituted to reduce the number of segments if desired, however, display resolution of each slice of the final Pie Chart object will be affected and may not be desirable with segments larger than 1° in most cases.


Figure 4: Pie Chart Linked Symbol construction (Development and Symbol Editor Screens)

How it Works

This Pie Chart Symbol technique has about a ten-slice maximum limitation at this time, due to the currently allowed expression length limit (1024 characters) in the Color Animation, depending on how compact each custom property name and tag name is in the filter.

In the downloadable PieChart.sym object, the Color Animation filter expression in each 1° segment has a unique cascading single-line “If” statement (Figure 5a without the CR, LF, and Tabs as shown for easier reading, and 5b) with the Custom Property Names being made as short as possible (e.g., “#V0:”) in order to keep the expression length limit from overrunning the 1024 character-length field.


Figure 5a: The Color Animation expression. “Degree” is substituted in this expression for the unique numerical value of the position (0° to 359°) of each segment in the symbol.


Figure 5b: The Color Animation and Rotation Animation expression functionality.

During Runtime, the actual tag names entered into the “Object Properties” fields (Figure 6) are substituted for the custom property names that are defined in the Linked Symbol.


Figure 6: Custom Properties of the Pie Chart Symbol shown with default color (Col0-Col9) values and tags (Size, Offset and Value Array)

Using tag names longer than a few characters will likely cause a field-length overrun and cause the filter expression to fail as shown in Figure 7, Right. Therefore, it is recommended that an array tag name be a single character (suggested “V” for “Value”, as shown), leaving room for the array index characters (a 4 character total, e.g., “V[0]”). For instance, if the array tag name “Value[0]” is substituted (Figure 7, Left), the character length during runtime becomes too long and the field is overrun, making the color of the 1° segments display in the non-configured native object 2-tone colors (Green and Purple).


Figure 7: Substituting the tag name “Value” for “V” causes the Color Expression to overrun the field length during Runtime

The Pie Chart Legend Symbol

The Pie Chart Legend Symbol simply calculates and displays the percentage value of each Pie Chart slice according to the color of the segment, along with the actual tag value. The Object Properties are shown in Figure 8.



Download the finished Pie Chart symbol for InduSoft Web Studio here

Comments are closed.