HTML Chart Control

HTML Chart View Options

Panel Attributes

Panel Attribute Description
type set to htmlChart (Required)
controlType

Defines an enumeration list of supported chart types:
pieChart
lineChart
columnChart
barChart
stackedBarChart
stackedAreaChart
columnLineChart
barChart3D
stackedColumnChart


The default is pieChart .

width Always 100%, which takes the all width of the container.
height Always 100%, which takes the all height of the container.
datasource Refers to the data source id defined in the view. If not defined, then the first data source will be used.
showDataTip Set to true to show DataTips in chart and false otherwise. The default is true . The format of the DataTip depends upon the chart type, but typically it displays the name and value of the fields at the selected location in the chart.
showLegendOnLoad true if show legend on initial load, false otherwise. Default is true .
legendLocation Value is bottom . This is the only option supported.
refreshWorkflowRuleID Defines custom workflow rule id to provide the chart data. (Optional)
showExportButton When true, the system displays an icon in the top-right corner of the container. When the user hovers over the icon, the system displays a drop-down menu with two options: JPG and PNG.
showUnitPrefixes When set to true, all big numbers will convert to small numbers appended with “K,M,G” unit key for all dataAxis. The unit key can be different based on the number value. Default is true.
showUnitSuffixes When set to true, for the data axis fields with numeric format of area/length, the corresponding area/length unit is added to the data values dynamically in tooltips and data labels. However, the axis labels will not have the unit suffix. Default is false.
unitPrecision Specifies the number of decimal units that will be shown within the chart's labels, if any. Default is 2.

Grouping Axis Attributes

Implementation Notes :

  • If you specify the "title" tag inside of GroupingAxis or DataAxis, then these title are shown.
  • The "showLabel" attribute is used to show the data value labels in either the X or Y Axis. For the X-Axis, it could be the Building ID, such as HQ; for the Y-axis, it could be the data-value interval such as 50, 100, 150..and so on.
  • The "displayAxis" attribute is used to display more than one DataAxis as needed. However, note that even if the displayAxis is set to "false", the first DataAxis will always be displayed.
groupingAxis Attribute Description
table Defines the table name of the grouping field. (Required)
field Defines the field name of the grouping field. This can be an alias that defined in the view's data source definition. (Required)
datasource Defines the data source id the grouping table/fields refers to. The default is the panel's data source id. (Optional)
showLabel Set to true to show the grouping axis label, false otherwise. Default is true . (Optional)

Scaling when displaying multiple data axis.

For each data axis, specifying displayAxis="true" will display the axis in its own scale and the chart line will be displayed according to its own scale as well.

If you would like to display all the data axes according to the same scale, you need to set displayAxis parameter to "false" for all data axis definitions in the view or javascript . The maximum, minimum values for the axis will be automatically determined based on the run-time values of all data axes.

Data Axis Attributes

dataAxis Attribute Description
table Defines the table name for the data axis. (Required)
field Defines the field name for the data axis. This can be an alias that defined in the view's data source definition. (Required)
datasource Defines the data source id the data axis refers to. The default is the panel's data source id. (Optional)
type If type="line", will display dataAxis as a line inside a column chart. At this point, type="line" is the only option. Used in Mix Lines and Columns in an HTML Chart . (Optional)
displayAxis Displays more than one DataAxis as needed. Note that even though the displayAxis is false, the first DataAxis will always be displayed. Supports display axis for more than two data axes by setting different offsets for each axis to the left and right interchangeably.
showLabel

If true, the labels will display in a default position based on type of chart and rotation, as follows:

  • For pie chart, the label will always be “callout”.
  • For stacked bar chart, the label will always be “inside”.
  • For stacked column chart, the label will always be “middle”.
  • For serial and other type chart, the label will always be “top”.

The default is true . (Optional)