Adding Charts to your Microsoft Power App

In a previous article I shared how you could add a Power BI report into your Power App (Embed Power BI report in Power Apps | LinkedIn). ?As a follow up I’d like to share how you can add a chart or two to your app – all based on the data you are creating with your Power App. Power App provides features that allow the maker to add a Column chart, Line Chart and/or Pie chart using the data base that is tied to the app. As a fan of visualized data, I think these charts provide quick insight to trends of the data being created by the app.

In this scenario I have taken information from my fitness activity tracker to build a Power App that tracks my walks and runs including distance, calories burned per walk and whether the walk is on a treadmill or a cross-country type of activity. For this exercise I created an Excel spreadsheet and saved as a table in my OneDrive for Business – file name is CardioTracker2 and table name is Cardio2. Note – I realize that Excel is not the best tool for creating a database but provides good utility for this scenario.

Open maker.powerapps.com. In the Start for data section click on Excel Online. Next you will want to click on Connections to connect to the OneDrive for Business. Choose correct Excel file, then appropriate table and click Connect. Using this table Power Apps Studio will create a three screen app for you. Please reference this article for a bit more details on the above process (Citizen Developer Journey - My First "Power Apps" App | LinkedIn).?For reference, the following are the three screens created by the Power Apps Studio.

a.??????BrowseScreen – this is a gallery or summary view of each line-item entry within the Excel spreadsheet

b.??????DetailScreen – shows all the information associated with each line item entry with your Excel spreadsheet

c.??????EditScreen – this provides the user the ability to edit line item data or add new entries to the Excel spreadsheet

Though these screens need a bit of “clean up” I want to start the process of adding a new screen which will house the visualized data aka charts. Within the ribbon click on New Screen and then Blank.

Let’s rename this new screen Charts. To do this click on the ellipse next to the text Screen1 and select Rename.

Though still early in the build process it is probably a good time to Save and Name your app.

With the newly created Charts screen open go to Charts. This opens the options of adding a Column chart, a Line chart, or a Pie chart. There is also the option on adding a Power BI tile – as referenced above I covered this in a separate article.

I want to have a visual of the number of calories I burn per walk /run. So let us add a Column chart – simply click on Column chart. Power Apps adds a default chart to the screen?

Now we need to tell Power Apps Studio to fetch data from the Cardio2 table and put into the chart. First, we want to highlight the bar chart itself. In the case of this example, I am clicking on ColumnChart2 within the Tree view to highlight.

Now that the chart is highlighted, I will click on the Items dropdown in the Properties section and click on Cardio2 – the table that is associated with this app.?

With the connection to the data source (table = Cardio2) Power Apps Studio has put data into the cart. Here we see a chart of the number of calories burned per walk or run.?

Time to clean this chart up a bit. Let’s change title of chart to “Calories Burned” -?within the function bar type Calories Burned. Make sure Text is listed in the Properties drop-down.

In the Advanced section o the Properties pane you are able to change the chart by the dropdowns for Labels and the Series dropdown – all of these are tied to the columns in your table. For this chart Labels defines what is shown along the X axis of the chart. The Series dropdown are the data that fills in the chart.?

For this visual (above) only one series (column of data from the table) is charted. You, as the maker, can add multiple series to the chart. To do this click on Properties then in the Number of series field type the number of columns (from the table) you would like to chart. Then go to the Advanced section and select. Example – I have typed 2 in the Number of series field. The chart automatically pulls data from the (table) columns selected in the Advanced section for Series 1 and Series 2. In this case the data being reflected are calories burned per walk and number of miles per corresponding walk.?

To change reflected data simply click open the Advance tab and selected the data fields from the corresponding dropdown boxes for Series 1, Series 2, etc.

Note – as you add data to the database (through your Power Apps) the charts you create are dynamically adjusted to reflect this information.

The workflow process above also applies to the creation of Line charts and Pie charts.

I think the ability to visualize data can be a powerful tool. Give this a shot and share your experience - Power Apps Studio makes it a fairly painless to build and include in your app.

As always, thanks for reading and please share any thoughts or comments on this article.?