Running QuickChart.io as a microservice on Azure for private access from Power Apps

QuickChart.io is a powerful open-source charting solution that enables businesses to create visually stunning charts and graphs for their web applications. Although QuickChart.io offers free access for commercial use, it requires a license. To ensure secure data transmission, businesses that use QuickChart.io in their Power Apps should consider hosting the solution within their tenant.

In this article, we will guide you through the process of hosting the QuickChart.io Docker container in your Azure tenant using an Azure container. We will then demonstrate how to host it on an Azure Web App for Containers, replacing the quickchart.io URL in your Power Apps with the newly created service.

By following these steps, you will be able to use the following QuickChart endpoints securely:

/chart

/qr

What you will need!

• An Azure Subscription
• Docker Desktop
• Azure CLI

Step 1 – Create and run a local version QuickChart.io in Docker Desktop

Download Docker Desktop | Docker and install.

Once installed you can check by opening a terminal and running the following command:

PS C:> docker version

Client:
 Cloud integration: v1.0.29
 Version:           20.10.21
 API version:       1.41
 Go version:        go1.18.7
 Git commit:        baeda1f
 Built:             Tue Oct 25 18:08:16 2022
 OS/Arch:           windows/amd64
 Context:           default
 Experimental:      true

Server: Docker Desktop 4.14.0 (91374)
 Engine:
  Version:          20.10.21
  API version:      1.41 (minimum version 1.12)
  Go version:       go1.18.7
  Git commit:       3056208
  Built:            Tue Oct 25 18:00:19 2022
  OS/Arch:          linux/amd64
  Experimental:     false
 containerd:
  Version:          1.6.9
  GitCommit:        zzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzz
 runc:
  Version:          1.1.4
  GitCommit:        v1.1.4-0-g5fd4c4d
 docker-init:
  Version:          0.19.0
  GitCommit:        de40ad0

Next we download the QuickChart docker image with the following command:

PS C:> docker pull ianw/quickchart

Using default tag: latest
latest: Pulling from ianw/quickchart
Digest: sha256:dc49dd460c3725c45a0d9198a8e3d69d9843ae49882e66f39ec8daceeaa3061c
Status: Downloaded newer image for ianw/quickchart:latest
docker.io/ianw/quickchart:latest

If we open Docker Desktop under images we should now see the image downloaded above.

Now we can run this locally with the following command:

PS C:> docker run -p 8080:3400 ianw/quickchart
{"name":"quickchart","hostname":"64c3d2d8f6e8","pid":1,"level":30,"msg":"Telemetry is enabled","time":"2023-04-25T22:24:16.997Z","v":0}
Tue, 25 Apr 2023 22:24:17 GMT body-parser deprecated undefined extended: provide extended option at index.js:38:17
{"name":"quickchart","hostname":"64c3d2d8f6e8","pid":1,"level":30,"msg":"Setting request timeout: 5000 ms","time":"2023-04-25T22:24:17.377Z","v":0}
{"name":"quickchart","hostname":"64c3d2d8f6e8","pid":1,"level":30,"msg":"NODE_ENV: production","time":"2023-04-25T22:24:17.377Z","v":0}
{"name":"quickchart","hostname":"64c3d2d8f6e8","pid":1,"level":30,"msg":"Listening on port 3400","time":"2023-04-25T22:24:17.377Z","v":0}

We can test this in a browser, open the URL:

http://localhost:8080/qr?text=Hello+world

and you should see the following QR Code! Result!

We can also test the /chart endpoint:

http://localhost:8080/chart?width=500&height=300&c={type:'bar',data:{labels:['January','February','March','April','May'],datasets:[{label:'Dogs',data:[50,60,70,180,190]},{label:'Cats',data:[100,200,300,400,500]}]}}

We get the following:

Step 2 – Create an Azure Container Registry and Upload the image.

Next open portal.azure.com go to Create a Resource and search for ‘Container Registry’ and click creater

Go through the wizard and create the registry, note the name you provide for the registry.

Once created open your terminal and login to the registry using the following commands

Replace the following:

<your_container_registry_name> with the name you gave the registry.

<image> with the image name you can get from Docker Desktop:

click on the copy icon!

Login to Azure and the registry and tag the image as below:

PS C:> az login --scope https://management.core.windows.net//.default

PS C:> az acr login --name <your_container_registry_name>
Login Succeeded

#Tag the image
PS C:> docker tag <image> <your_container_registry_name>.azureacr.io/<image>
#Push the image
PS C:> docker push <your_container_registry_name>.azurecr.io/<image>

Step 3 – Create a Web App for Containers to host our site.

In the Azure portal go to create a resource and search for web app and select the Web App for Containers and select create.

On the create page configure to your environment:

From the instance details, copy the URL, this will be our endpoint:

<name>.azurewebsites.net

On the Docker tab configure the image from the registry:

once you select ‘Azure Container Registry the options will auto complete, add the Startup command.

Click Create.

Once created we can navigate to our URL and you should see the following message:

We can then test it with the same graph as we tested locally above.

https://<name>.azurewebsites.net/chart?width=500&height=300&c={type:%27bar%27,data:{labels:[%27January%27,%27February%27,%27March%27,%27April%27,%27May%27],datasets:[{label:%27Dogs%27,data:[50,60,70,180,190]},{label:%27Cats%27,data:[100,200,300,400,500]}]}}

We now have our micro service QuickChart.io running, in this example we are using open endpoints, in your environment you should secure the web app according to your organizations security policies.

Step 4 – Test in Power Apps

In our Statto app we use a Radar graph with URL as below, lets change this to our URL and we should see exactly the same result:

And there you have it your own hosted version of QuickChart.io.

Hope you liked this article, let us know in the comments.