Using Chart Control In Microsoft PowerApps

Before reading this article, please go through some important article links, mentioned below.

In PowerApps, we can add the Chart control.

Chart Control

A chart, also called a graph, is a graphical representation of the data. Here, the data is represented by symbols, such as bars in a bar chart, lines in a line chart or slices in a pie chart. It's a sheet of exhibiting the information in a tabular form. It allows the users to see the data to better understand it, and predict current and future data.

Types of Chart Control

  1. Column Chart
    It displays the content in a tabular manner.

  2. Line Chart
    It displays information as a series of data points called 'markers' connected by straight line segments.

  3. Pie Chart
    It displays the data in a circular manner.

Now, we are going to see the Column Chart in this article.

  • Column Chart
  • Line Chart
  • Pie Chart

Follow the steps, mentioned below to work with Chart Control in PowerApps.

Step 1

Log into the Power Apps

After downloading PowerApps from Window store, we need Microsoft related organization’s Office 365 ID or (MSDN, Microsoft, Skype, Office 365 etc.) to login with it.

PowerApps

Step 2
 
Create a New App in Power App

After login, we can see the Dashboard. Subsequently, we click on the New button.

PowerApps

Step 3

Choose the Blank app.
.
PowerApps

Step 4
 
Designing the App

Now, let's start designing the app. On the left side, we can see the individual screens to add our data. On the right side, we see the list of layouts. On the top, we see the formula bar. There you can see the Properties of the screen, which you will select. On the right side, we see the Add DataSource to add the external data Source.

PowerApps

Step 5
 
Drag and Drop the button Control
  1. Go to the Insert menu followed by controls and drag the Button tool.

    PowerApps

  2. Drop the Button tool on the screen.

    PowerApps

  3. Add the Options
    Select the Button and add the coding, mentioned below to the OnSelect property.

    Coding
    1. ClearCollect(CityProduct, {  
    2.     City: "London",  
    3.     Country: "United Kingdom",  
    4.     Productsales: 861500,  
    5.     Percentage: 90  
    6. }, {  
    7.     City: "Berlin",  
    8.     Country: "Germany",  
    9.     Productsales: 356200,  
    10.     Percentage: 74  
    11. }, {  
    12.     City: "Madrid",  
    13.     Country: "Spain",  
    14.     Productsales: 316500,  
    15.     Percentage: 59  
    16. })  
    PowerApps

Step 6

Drag and Drop the Column Chart Control
  1. Go to the Insert menu followed by controls and drag Column Chart tool.

    PowerApps

  2. Drop the chart tool on the screen.

    PowerApps

  3. Rename the Chart title as Product Sales Details.

    PowerApps

  4. Set the Item as City Product.

    PowerApps

  5. Select the Number of Series and set as 3.

    PowerApps

  6. Now, set the series values of the chart. Select the chart, go to the advanced property and set the series values

    PowerApps

  7. Now, change the color of the chart.

    PowerApps

Step 7

Drag and Drop the Line Chart Control

In a similar way, we can use the Line chart
  1. Go to the Insert menu followed by controls and drag Line Chart tool.

    PowerApps

  2. Drop the control and change the settings

    PowerApps

Step 8

Drag and Drop the Pie Chart Control

In similar way, we can use Line chart
  1. Go to the Insert menu followed by controls and drag Pie Chart tool.

    PowerApps

  2. Drop the control and change the settings.

    PowerApps

Step 8

Run the app.

PowerApps

Output 1

Main Screen is shown below.

PowerApps

Output 2

Click the button.

PowerApps

Output 3

On second click, the output is shown below.

PowerApps

Output 4

On third click, the output will be, as shown below.

PowerApps

Output 5

Using Line Chart, the output will be, as shown below.

PowerApps

Output 6

Using Pie Chart, the output will be, as shown below

PowerApps

Conclusion

I hope, you understood how to add the Chart control in Microsoft PowerApps and how to run it.

X

Build smarter apps with Machine Learning, Bots, Cognitive Services - Start free.

Start Learning Now