DocuMotor

Charts

This article provides an overview of the valid data structure for creating chart bindings. See the tutorial for an in-depth walkthrough.

Most native 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, and Waterfall.

Chart

The following binding is placed in the alt text of the chart.

Syntax

<<Chart:AltText$ChartData>>

AltText: Optional possibility to define an alternative text for the chart.
ChartData: 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.
  • primaryValueAxisTitle: (string) The primary value (vertical) axis title, and is ignored if null.
  • primaryCategoryAxisTitle: (string) The primary category (horizontal) axis title, and is ignored if null.
  • categories: (array of string) The values of the x-axis, is optional.
  • series: (array of objects) The data for each series. Series in the chart will be added or removed as needed. Formatting of new series are based on the last series in the chart.
    • name: (strings) Legend name of the series, and is 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 Performance",
    "categories": [
      "1st Quarter",
      "2nd Quarter",
      "3rd Quarter",
      "4th Quarter"
    ],
    "series": [
      {
        "name": "Support",
        "values": [
          4.3,
          2.5,
          3.5,
          4.5
        ],
  	  "labels": [
    	  "4.3",
          "2.5",
    	  "3.5",
    	  "4.5"
        ],
      } 
    ]
  }
}

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

<<ExtendedChart:AltText$ChartData>>

AltText: Optional possibility to define an alternative text for the chart.
ChartData: 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.
  • primaryValueAxisTitle: (string) The primary value (vertical) axis title, and is ignored if null.
  • primaryCategoryAxisTitle: (string) The primary category (horizontal) axis title, and is ignored if null.
  • categories: (array of strings) The values of the x-axis, is optional. Categories and values must be of the same dimensions, or null in order to produce a valid chart.
    • name: (string) The name of the category. Optional.
    • categories: (array of strings) the values of each category or the x-axis depending on the type.
  • extendedCategories: (array of objects) The data for each category. Categories in the chart will be added or removed as needed.
  • series: (array of objects) The data for each series. Series in the chart will be added or removed as needed. Formatting of new series are based on the last series in the chart.
    • name: (string) Legend name of the series. Optional.
    • values: (array of numbers) The values of the y-axis in this series.
  • subtotals: (array of numbers) The indexes of the series that are to be considered a subtotal. This is only relevant for Waterfall charts. Is optional.