cancel
Showing results for 
Search instead for 
Did you mean: 
cancel
Showing results for 
Search instead for 
Did you mean: 

How to use a custom color schema in Pie Charts

Level 11

How to use a custom color schema in Pie Charts

Disclaimer: This post does of course not express any political views.

 

Pie Chart Coloring

 

In ThingWorx Pie Charts use a default color schema based on the DefaultChartStyle Definitions.

These schemas are using fixed numbering and coloring systems, e.g. 1 is blue, 2 is green, 3 is red and so on. All Pie Charts will be rendered with these colors in the same order, no matter which data the chart is using. Visualization of data with the default colors might not necessarily help in creating an easy to read chart.

 

Just take a look at the following example with the default color schema. Let's just take political parties - as they are usually associated with a distinct color - to illustrate how the default color schema will fail depending on the data displayed.

 

defaultChartNoPurple.png

 

defaultChartWithPurple.png 

 

In the first example, just by sheer coincidence the colors are perfectly matching the parties. When introducing a new party to the pool suddenly the blues are rendered green and the yellows rendered light-blue etc. This can be quite confusing, especially on election night ;)

 

Custom Color Schema

 

PoliticalParties Thing

 

To test a custom color schema, we first need to create a new Thing:
PoliticalParties as a GenericThing
Add a dataset property with the following PoliticalParties DataShape.

 

PoliticalParty_Property.png

 

PoliticalParty_DataShape.png 

 

Save the Thing and set the InfoTable to:

 

Key Value
The Purples 20
The Blues 20
The Greens 20
The Reds 20
The Yellows 20
Others 20

 

Number values don't actually matter too much, as the Pie Chart will automatically distribute them according to their percentage.

 

PoliticalParties Mashup

 

Create a new Mashup and add a PieChart to the canvas.
Bind the PoliticalParties > GetPropertyValues > dataset to the Data input of the Widget.
Ensure to set the LabelField to key and the ValueField to value for a correct mapping.

 

PoliticalParty_MashupDefinition.png

 

Save the Mashup and preview it.

 

It should show a non-matching color for each party listed in the InfoTable.

 

Custom Styles and States

 

Create new custom Style Definitions for each political party.

As the Pie Chart is only using the Background Color other properties can stay on the default.
I chose to go with a more muted version of the colors to make the chart easier to look at.

 

PolticialParty_StyleDefinition.png

 

PoliticalParty_Styles.png 

 

With the newly defined colors we can now generate a new State Definition as follows:

 

PoliticalParty_StateDefinition.png 

 

The States allow to evaluate the key-Strings in the Thing's InfoTable and assign a Style Definition depending on the actual value. In this definition we map a color schema based on the InfoTable's key-value to create a 1:1 mapping for the Strings.

 

This means, no matter where a certain party is positioned in the chart it will be tinted with its associated color.

 

Refining the Mashup

 

Back in the Mashup, select the PieChart.
In the ColorFormat property choose the newly created State Definition.

 

PoliticalParty_Mashup_StateDefinition.png

 

Save the Mashup and preview it.

With the States and Styles applies, colors are now displayed correctly.

 

customChart_nonOrdered.png 

 

Even when changing positions and numbers in the original InfoTable of the PoliticalParties Thing, the chart now considers the mapping of Strings and still displays the colors correctly.

 

customChart_ordered.png