Interactive Charts in Custom Actions

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:

  1. Total app downloads
  2. Locales in which it is getting downloaded
  3. Average boot time for the app
  4. Country wise downloads
  5. 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:

Fig 1: Properties to be rendered as charts

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:

Fig 2: Wrapper function drawChart to render a chart on canvas

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.

Fig 3: Rendering Line Charts depicting time series

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.

Fig 4: Rendering pie-charts depicting classes of data

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.

Fig 5: Rendering bar charts for depicting time-series data.

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.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s