There are number of business cases where your customers request to view canvas app data as charts . However, when they make changes to fields inside the canvas app, it is a bit tricky to show these changes in real time and populate the chart. I see two challenges here:

1. Data structure : Charts usually need source data to be in tabular format
2. Data source refresh : Every time a field is updated, chart source should be refreshed

We can easily overcome these challenges via a PowerApps collection. Its array like format lets you create a tabular data structure and collections can be refreshed using ClearCollect action.

Let’s look at this example:

I have five number input fields for each country along with two charts. I need to update these charts when there is a field update

We can simply create a collection and update it whenever field values are changing.

Click on any text field and go to “OnChange” attribute. Update it with below code.

ClearCollect(
    ChartCollection,
    
      { Canada: TextInput1.Text,
       Australia:TextInput2.Text,
       USA:TextInput3.Text,
       UK: TextInput4.Text,
       Brazil: TextInput5.Text}
    
)

** In above code, I am clearing out the existing collection, creating a collection with country names and assigning text field values to them.

We need to update OnChange attribute of all relevant data fields with above code

Our objective – whenever a field is updated, app will clear the existing collection and load new field values to the collection.

Now, let’s test the collection. Run the app and start entering values to the data fields. Then, go to View> Collection

Here is a sample collection after loading values:

Now that we have our data in tabular format, we can easily configure the charts while using the new collection as chart data source

Go ahead and configure series, labels and chart styling for this column chart. Once done, save and publish.

Now, let’s test this.

As we keep on adding/updating values, chart is updating in real time

Same functionality can be extended to create pie charts, however, with this collection format, it is not possible to get the chart labels populated. For this, we need to create a separate collection with a different format .

Instead of updating charts on field changes, we can add a button which will update the chart upon submission. I will discuss both pie chart and button configuration in my next post.

Happy Learning!

Categories: PowerApps

Tags: canvasapps, charts, collections