Creating Chart Cards

5. Create a Card with multiple charts

In this tutorial we will cover the most complex use of charts from the perspective of the Card design, which is embedding multiple charts in the same Card.

We will be building upon the progress made in the previous tutorial Embed a chart in a custom Card, so ensure that is completed first before we continue.

Modifying the connector

First, we need to modify the connector so that it returns two charts, rather than one. We will return a line chart in addition to the previous bar chart to add additional context to the data provided.

Navigate back to Development → Manage Spaces → Global → Connectors and select your chart-connector folder. Then select Edit on charts.js. Replace the contents of the file with the following:

module.exports = async function (activity) {
  try {
    activity.Response.Data.barChart = {
      template: 'bar',
      palette: 'office.Office6',
      configuration: {
        data: {
          labels: ['UK', 'USA', 'Germany'],
          datasets: [
            {
              label: '2018',
              data: [143, 496, 284]
            },
            {
              label: '2019',
              data: [186, 348, 232]
            }
          ]
        },
        options: {
          title: {
            display: true,
            text: 'Order Volume'
          }
        }
      }
    };

    activity.Response.Data.lineChart = {
      template: 'line',
      configuration: {
        data: {
          labels: ['2018', '2019'],
          datasets: [
            {
              label: 'UK',
              data: [143, 186],
              fill: false
            },
            {
              label: 'USA',
              data: [496, 348],
              fill: false
            },
            {
                label: 'Germany',
              data: [284, 232],
              fill: false
            }
          ]
        },
        options: {
          title: {
            display: true,
            text: 'Order Volume'
          }
        }
      }
    };
  } catch (error) {
    // return error response
    var m = error.message;    
    if (error.stack) m = m + ": " + error.stack;

    activity.Response.ErrorCode = (error.response && error.response.statusCode) || 500;
    activity.Response.Data = { ErrorText: m };
  }
};

Here, we have firstly changed the position of our bar chart in the response from activity.Response.Data.chart to activity.Response.Data.barChart. Next, we have added a new chart definition for a line chart, and attached this to activity.Response.Data.lineChart.

Select Save to save the changes to charts.js.

Modifying the Card

Navigate to Development → Manage Spaces → Global → Components and select the custom-chart-card folder we created in the previous guide. Then, select Designer for default.card.

Firstly, as done in the previous guide, add a Charts element from under the Add Element tab. Once this is done, we just need to configure the two chart elements to point to the new locations of the charts in the connector response.

Select the first of the chart elements under the Elements tab, and enter state.model.barChart into the modelRoot field.

After this, repeat the step with the second chart element but this time using the value state.model.lineChart in the modelRoot field. Finally, Save default.card.

View the Card

Navigate to the Digital Assistant Workplace, and the Custom Chart card you added in the previous guide should now look like this: