20+ More Power Apps Chart Types With QuickChart

Imported reference from Matthew Devaney's blog for learning purposes. Original: https://www.matthewdevaney.com/add-more-power-apps-chart-types-with-quickchart/. Author: Matthew Devaney.

20+ More Power Apps Chart Types With QuickChart Posted by - Matthew Devaney on - September 5, 2021 33 Comments

Charts are a useful way to allow readers to quickly understand data and identify relationships/patterns. In Power Apps we only have a few chart types available (column, line, pie) and a limited set of options for styling. Often when I want to use a particular chart type its not available. With QuickChart we can extend Power Apps to use over 20 different chart types and have more choice over their appearance.

In this article I will show you how to add more Power Apps chart types by using Quickchart. Table of Contents What is the QuickChart API? Introduction: The Sales Tracker App Setup The SharePoint List Select A Chart Type Generate A Chart Image

Load The Chart With SharePoint List Data

Make The Chart Interactive With A Dropdown What Is The QuickChart API?

QuickChart is an API that can be used inside Power Apps to generate an image of a chart. With QuickChart there are more chart types and style options available than Power Apps very limited set.

To make a chart we can place this URL in the Image property of a Power Apps image control and it will appear on the screen. The URL contains both the data to be included in the chart and information about how to format the chart.

"https://quickchart.io/chart?c={type:'bar',data:{labels:['Q1','Q2','Q3','Q4'], datasets:[{label:'Users',data:[50,60,70,180]},{label:'Revenue',data:[100,200,300,400]}]}}" Code language: JSON / JSON with Comments ( json )

Power Apps only has 3 standard chart types (column, line, pie). Quickchart enables us to use all 21 chart types listed below. Area Chart Doughnut Chart QR Code Bar Chart Gauge Chart Radar Chart Box & Violin Chart GraphViz Chart Radar Chart Bubble Chart Line Chart Scatter Chart Clustered Bar Chart Pie Chart Sparkline Column Chart Polar Chart Stacked Column Chart Combo Chart Progress Bar Word Cloud Introduction: The Sales Tracker App

Managers at an insurance company use the Sales Tracker app to see how salespeople are performing. The Manager selects a specific month from a dropdown and a bar chart displays each salesperson’s name along with their monthly sales volume. Setup The SharePoint List

Create a SharePoint list called Monthly Sales with the following columns: Salesperson (single-line text) Period (single-line text) SalesAmount (number)

Load the SharePoint list with this data: Salesperson Period SalesAmount Amanda September 2021 250,000 David September 2021 340,000 Jesse September 2021 220,000 Leon September 2021 50,000 Matthew September 2021 100,000 Sarah September 2021 310,000 Teresa September 2021 230,000 Xavier September 2021 0 Select A Chart Type

Go to QuickChart and open the Chart Gallery page to see all the possible chart types we could add to Power Apps. Choose the Horizontal chart type.

The Horizontal chart page includes a sample JSON which holds the chart information. Copy and paste this code into a text editor such as Windows Notepad.

Find and replace and double-quotation marks (“) with a single-quotation mark (‘). We want to use this JSON to define the chart in Power Apps but the problem is double-quotation marks will be interpreted as a text string. Fortunately JSON treats both single-quotation marks and double-quotation marks the same way. Generate A Chart Image

Open Power Apps Studio and create a new app from blank. Insert an Image onto the center of the screen.

Write this code in the Image property of the Image. It is a URL containing two parts: a base URL and a JSON with the chart definition. Notice JSON code we prepared inside of our text editor is wrapped in an EncodeUrl function to replace any non-alphanumeric values into hexadecimal values that can be read inside of a web browser.

"https://quickchart.io/chart?c=" &EncodeUrl( "{ 'type': 'horizontalBar', 'data': { 'labels': [ 'January', 'February', 'March', 'April', 'May', 'June', 'July' ], 'datasets': [ { 'label': 'Dataset 1', 'backgroundColor': 'rgba(255, 99, 132, 0.5)', 'borderColor': 'rgb(255, 99, 132)', 'borderWidth': 1, 'data': [ -32, 62, 64, 41, -31, -32, 87 ] }, { 'label': 'Dataset 2', 'backgroundColor': 'rgba(54, 162, 235, 0.5)', 'borderColor': 'rgb(54, 162, 235)', 'data': [ 9, -100, -13, 64, -57, 26, 20 ] } ] }, 'options': { 'elements': { 'rectangle': { 'borderWidth': 2 } }, 'responsive': true, 'legend': { 'position': 'right' }, 'title': { 'display': true, 'text': 'Chart.js Horizontal Bar Chart' } } }" ) Code language: PHP ( php )

After the code is input a sample chart will appear inside of the Image.

Load The Chart With SharePoint List Data

Managers at the insurance company review performance by looking at a chart showing each salesperson and their monthly sales. Our next goal is to update the sample chart with sales data. Open the data tab and add the Monthly Sales SharePoint list as a datasource.

Then go to the Image property of the sample chart and change it to this code instead. The default labels and data values have been replaced with information from the Monthly Sales SharePoint list. We use the Concat function to change the table data into a text-string so it can be passed into the URL.

"https://quickchart.io/chart?c=" &EncodeUrl( "{ 'type': 'horizontalBar', 'data': { 'labels': [" &Concat( 'Monthly Sales' , "'" &Salesperson& "'," )& "], 'datasets': [ { 'label': 'Dataset 2', 'backgroundColor': 'rgba(54, 162, 235, 0.5)', 'borderColor': 'rgb(54, 162, 235)', 'borderWidth': 1, 'data': [" &Concat( 'Monthly Sales' , "'" &SalesAmount& "'," )& "] } ] }, 'options': { 'elements': { 'rectangle': { 'borderWidth': 2 } }, 'responsive': true, 'legend': { 'display': false }, 'title': { 'display': true, 'text': 'Sales Amount by Salesperson' } } }" ) Code language: PHP ( php )

Now the chart shows our actual sales data from the SharePoint list.

Make The Chart Interactive With A Dropdown

We can further improve our app by allowing the manager to pick a month from a dropdown and having the chart update to reflect that month’s sales data. Place a new dropdown control above the chart and and label with the text “Choose Month.”

Use this code in the Items property of the dropdown to get a list of unique months/years with sales data from the Monthly Sales SharePoint list. Distinct( 'Monthly Sales' , Period) Code language: JavaScript ( javascript )

Currently our SharePoint list contains only data for September 2021. Add this data for October 2021 and November 2021 then refresh the datasource in Power Apps. Now September 2021, October 2021 and November 2021 will appear in the dropdown. Salesperson Period SalesAmount Amanda September 2021 250,000 David September 2021 340,000 Jesse September 2021 220,000 Leon September 2021 50,000 Matthew September 2021 100,000 Sarah September 2021 310,000 Teresa September 2021 230,000 Xavier September 2021 0 Amanda October 2021 60,000 David October 2021 150,000 Jesse October 2021 200,000 Leon October 2021 260,000 Matthew October 2021 150,000 Sarah October 2021 190,000 Teresa October 2021 100,000 Xavier October 2021 0 Amanda November 2021 230,000 David November 2021 110,000 Jesse November 2021 210,000 Leon November 2021 60,000 Matthew November 2021 260,000 Sarah November 2021 160,000 Teresa November 2021 200,000 Xavier November 2021 0

Update the Image property of the chart image with this code. We use the Filter function to select only sales data that belongs to the selected month/year in the dropdown.

"https://quickchart.io/chart?c=" &EncodeUrl( "{ 'type': 'horizontalBar', 'data': { 'labels': [" &Concat( Filter( 'Monthly Sales' , Period=drp_Month.Selected.Value), "'" &Salesperson& "',"

)& "], 'datasets': [ { 'label': 'Dataset 2', 'backgroundColor': 'rgba(54, 162, 235, 0.5)', 'borderColor': 'rgb(54, 162, 235)', 'borderWidth': 1, 'data': [" &Concat( Filter( 'Monthly Sales' , Period=drp_Month.Selected.Value), "'" &SalesAmount& "',"

)& "] } ]}, 'options': { 'elements': { 'rectangle': { 'borderWidth': 2 } }, 'responsive': true, 'legend': { 'display': false }, 'title': { 'display': true, 'text': 'Sales Amount by Salesperson' } } }" ) Code language: PHP ( php )

We’re done. The chart can now be controlled with a dropdown to show data for a chosen month. Did You Enjoy This Article? 😺

Subscribe to get new Copilot Studio articles sent to your inbox each week for FREE Enter your email address Sign Me Up Questions?

If you have any questions or feedback about 20+ More Power Apps Chart Types With QuickChart please leave a message in the comments section below. You can post using your email address and are not required to create an account to join the discussion. Charts Image Control Matthew Devaney M365 Copilot Power Apps

How To Create Copilot Custom UI Widgets In Power Apps