Implementing Chart.ctrl

Implementing Chart.ctrl

WebClient supports displaying data in several basic charts based on the C3 and D3 JavaScript libraries. Chart.ctrl now allows you to display your data in pie, donut, line, bar, and spline chart formats. The grid should have exactly two columns of data. First, the label. Second, the quantitative data.


To implement it, the control name of the grid should follow the format below.
<grid control name>:<attachpoint>:template=Chart:chartType=<chart type>:default

For example:

Grid1P:MainArea:template=Chart:chartType=donut:default

The currently supported chart types are pie, donut, line, bar and spline.

Donut Chart


Pie Chart


Bar Chart


Line Chart


Spline Chart

C3 Library Reference: https://c3js.org/examples.html

    • Related Articles

    • Implementing the WebImageGallery custom template

      This custom template is based on galleriajs and it is applying to a Grid control. Its functionality consists of displaying a gallery of images extracted from webproject/WebContent/images folder. To implement this control please follow the steps ...
    • CM WebClient 1.8.7 Release Notes

      Updated date April 28, 2021 What's New? Support Java 11 Complete functionality of DojoTimePicker.ctrl to display time field with drop down values WebLink.ctrl to display a text field as a URL WebImageGrid.ctrl enables displaying images inside a ...
    • Evolve IT Dashboard

      This document will cover the basics of the CM EvolveIT Dashboard. There will be a review of the different parts of the dashboard, how to customize the dashboard for personal viewing.   After completing this document, you should have a basic ...
    • Web Controls

      What Are the Different Types of Controls? Include files (*.inc)   are evaluated within the referencing template and can be useful for repeated blocks of code. They can have parameters, such as :nc (do not evaluate comments) or :parameterName=pValue ...
    • Dashboard Overview

      This document will cover the basics of the CM evolveIT Dashboard. There will be a review of the different parts of the dashboard, how to customize the dashboard for personal viewing.   After completing this document, you should have a basic ...