Charts

This article describes the options for creating charts binding transformed data. This article provides an overview of the valid data structure for creating charts. See the tutorial for an in-depth walkthrough.

Most native MSO chart types are supported with the Chart binding type, however the following chart types are only supported with the ExtendedChart binding type: Box and whisker, Funnel, Sunburst, Treemap, Waterfall.

Chart

Alter the data of chart based on the ChartData received. The content control must surround a chart or the anchor of a chart.

Syntax

{ "BindingType": "Chart", "BindingKey": "ChartData" }

BindingType: Static. Must be “Chart”.
BindingKey: JSON object with a defined model representing the configuration of the table. Use Data Transformation to structure your data according to this model:

Model

• title: (string) The title of the chart. Is ignored if null.
• categories: (array of strings) The values of the x-axis. Optional.
• series: (array) The data for each series. Categories, values, and labels must be of the same length, or null in order to produce a valid chart.
  • name: (string) Legend name of the series. Optional.
  • values: (array of numbers) The values of the y-axis in this series.
  • labels: (array of strings) The data label of the value with the same index. Use null to remove the data label. Optional.

Example of a JSON object that follows the Chart model:

{
  "MyChart": {
    "title": "Yearly Data",
    "categories": ["Q1", "Q2", "Q3", "Q4"],
    "series": [
      {
        "name": "Revenue",
        "values": [100, 200, 100, 300],
        "labels": ["Q1", "Q2", "Q3", "Q4"]
      }
    ]
  }
}

ExtendedChart

As mentioned in the beginning of the article, the following chart types are not supported by the Chart binding type: Box and whisker, Funnel, Sunburst, Treemap, Waterfall.

The valid data structure is similar to the that of the Chart binding type described above. However, some extended chart types may require a specific configuration of categories and series. For more info, please the tutorial.

Syntax

{ "BindingType": "ExtendedChart", "BindingKey": "ChartData" }

BindingType: Static. Must be “ExtendedChart”.
BindingKey: JSON object with a defined model representing the configuration of the table. Use Data Transformation to structure your data according to this model described in the Chart BindingType section above.