HTML Chart Control

Controlling Axis Titles and Labels in Charts

Hiding Axis Titles

By default, charts display both grouping and data axis titles:

  • The grouping axis title is displayed along the grouping axis.
  • The first data axis title is displayed along the data axis.

Add-in managers may opt to turn off grouping axis and/or data axis titles. In some cases these may be obvious from the information already given on the chart, as in, for example, “Building Area by City”, where it is clear that the grouping axis is City names. Add-in managers may turn off the grouping and data axis titles.

Java Script:

chartPanel.showGroupingAxisTitle(false);
chartPanel.showDataAxisTitle(false);

Setting Custom Data Axis Titles

By default, the chart displays the first data axis title. Add-in managers may customize the data axis title. One use case would be for a chart which displays multiple data axes. In this case the default title may be altered to reflect the multiple data axes.

AXVW :

Add the <dataAxisTitle> element as a child of the chart <panel> element:

<dataAxisTitle>Building Area</dataAxisTitle>

Java Script:

chartPanel.setDataAxisTitle(title);

Example: http://localhost:8080/archibus/schema/ab-products/solutions/parts/chart/ab-chart-improve-setaxistitle.axvw

Specify Divisor and Unit in Data Axis Labels

Add-in managers can specify that large axis values be displayed using custom units, such as K (thousands), M (millions), or B (billions). For example, a value 5,000,000 can be displayed as "5M".

AXVW:

Add the property unitKey=[1|K|M|B] to the <dataAxis> element.

Java Script:

chartPanel.setDataAxisUnit(dataAxisId, unitKey, unitSuffix);

Parameters:

  • dataAxisId : The id of the <dataAxis> element in the AXVW file.
  • unitKey – One of '1', 'K', 'M', 'B'.
  • unitSuffix – Text to append to the value, e.g. 'MMBTU'. This parameter is optional. If it is not specified, the chart displays localized unit suffix “K”, “M”, or “B” after the value.

This method must be called before the chart is built, in the afterViewLoad event handler.

Best Practice:

It is good practice to always specify the decimals attribute within the <field /> tag of the view to change the default number of decimals that the chart will show. For instance, if you are summarizing areas by city, you may wish to specify one decimal place (e.g. 1.0 M, 1.5M, and 2.0M) rather than the default for the area field, which is typically 2 decimals.

Example: http://localhost:8080/archibus/schema/ab-products/solutions/parts/chart/ab-chart-improve-setunitandsuffix.axvw

Data Axis Ticks and Labels

Add-in managers may enable an option to display fewer axis ticks when the chart is small, or not display them at all if the text would be illegible.

By default the chart displays major and minor ticks.

AXVW:

To hide minor ticks of a data or grouping axis, add the showMinorTick="false" property to the <dataAxis> or <groupingAxis> element.

To hide all (major and minor) ticks of a data or grouping axis, add the showTick="false" property to the <dataAxis> or <groupingAxis> element.

Java Script:

To hide minor ticks of a data axis:

chartPanel.showDataAxisMinorTick(axisId, false);

To hide minor ticks of a grouping axis:

chartPanel.showGroupingAxisMinorTick(false);

To hide all (major and minor) ticks of a data axis:

chartPanel.showDataAxisTick(axisId, false);

To hide all (major and minor) ticks of a grouping axis:

chartPanel.showGroupingAxisTick(false);

These Java Script functions will only take effect when called before the chart is built.

Example: http://localhost:8080/archibus/schema/ab-products/solutions/parts/chart/ ab-chart-improve-hideticks.axvw