There have been asks around how data can be viewed in Kaizala using custom actions in the form of interactive charts. This could be achieved by integrating a third party library called Chart.js in our custom action. The rest of the post will delve into the details to achieve this.
Scenario
We have launched a mobile application Contoso App in the market. After successful launch, we want to track various metrics related to the app. Some of them are:
- Total app downloads
- Locales in which it is getting downloaded
- Average boot time for the app
- Country wise downloads
- OS and build number wise data
We would like to see the metrics daily and take necessary business decisions. Kaizala provides just the right support to create a custom card and push daily updates using REST APIs.
If we want to send this data via Kaizala custom action, following can be a sample JSON representation with each of the above fields passed as properties:
Parsing Properties and Rendering charts
We have written a wrapper function on top of Chart.js as which helps us to render any chart of our choice on providing the chart type and data to be rendered:
Chart Types supported
Chart.js supports different types of charts. In this example, we will show how to render Line charts, Bar charts, Pie charts and area charts.
Line Charts
We will show how a linear trend (example, number app downloads over time) can be represented using a line chart. Below is a code sample and the output for the same.
Pie Charts
Now we will show how data can be represented by a pie-chart. A suitable example for this is app installs across platforms. Below is a code sample and the output for the same.
Bar Charts
In addition to the above, bar charts can also be created for rendering time series/ classes of data. We have represented country-wise downloads of Contoso App in the form of bar charts as shown below.
Summary
Any JS library can be used with Kaizala custom cards as they are generic web-views. In the above example, we have leveraged Chart.js to build responsive data representations in our custom cards. You can take a look at the Code and API body to send the custom action to your group here.
Hope that was helpful. If you want to get notified of new posts, you could subscribe. For any questions please reach out to kaizaladev@microsoft,com.
Tinkering with Kaizala