Earlier we discussed how we can use collections to pass field values to canvas app charts in realtime. Before moving on, I recommend that you read my previous post to understand the scenario and steps.

So far, we were able to add field values to a collection and use it as a data source for our column chart. Here is our collection structure.

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

If we try to use this collection as data source for a pie chart, labels won’t appear. The expected format for a pie chart should have Country as Labels and Values as Series to populate the chart properly.

Our collection now requires a format like below.

Let’s write another collection (PieChartCollection) according to above key value pairs.

    ClearCollect(
       PieChartCollection,

     {Country : "Canada",Value : TextInput1.Text } ,
     {Country: "Australia",Value: TextInput2.Text } ,
     {Country :"USA", Value : TextInput3.Text  },
     {Country :"UK", Value: TextInput4.Text } ,
     {Country: "Brazil", Value : TextInput5.Text  }
);

Now, we need to update the OnChange attribute for all relevant fields.

Let’s look at the PieChartCollection table. We can see the key value pairs now.

As the final step, we need to set the new PieChartCollection as the data source for our pie chart.

Now, let’s test this. Start entering values into fields. It should update both the charts in realtime.

PowerApps Collection is a powerful tool that can help you structure data. After understanding the proper collection format, you can easily populate charts as needed.

Download the msapp file here. You can directly import it to PowerApps and start testing the charts.

This was just a sample for you to understand how collections work in realtime chart generation. However, this solution could be implemented in a way that won’t repeat the same OnChange code for all required fields. We will discuss that in the next post.

Happy Learning!

Categories: PowerApps

Tags: canvasapps, charts