Creating Chart Cards

2. Create the connector

Firstly, we need to create a connector that returns a chart definition for the Card to render. For more information on the exact specification and options of a chart definition, please refer to the Chart elements reference.

Add a new connector

Navigate to Development → Manage Spaces → Global → Connectors and select Create Folder.

Select API Connector (custom authentication) from the template dropdown, and provide a folder name like chart-connector.

Then select Create.

Next navigate to Content Manager → Service Connectors and select Create New Connector.

Give the connector a name (chart-connector should suffice again), a title e.g. Chart Connector, then from the Connector Type dropdown search chart-connector and select the entry - this links the connector to the folder we just created.

If you created a folder with a different name to chart-connector, search for that in the Connector Type dropdown instead.

Add logic to return a chart definition

We now just need to add a service to the connector folder that returns a chart definition.

Navigate back to Development → Manage Spaces → Global → Connectors and select your chart-connector folder. Then, select New File.

In the Select type of file to create dropdown, choose _js_ for JavaScript file. In the Select a template dropdown, choose WebAPI Service - though this selection doesn't matter too much as we will replace the contents of the file. For the name, enter charts. Select Create.

Back in the chart-connector folder, find the newly created charts.js file, and replace the contents with the following:

module.exports = async function (activity) {
  try {
    activity.Response.Data.chart = {
      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'
          }
        }
      }
    }
  } 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 };
  }
};

Then Save the file. The connector is now ready to use. Click Next below to create the chart Card that will use the connector.