HTML Chart Control

Hiding and Customizing Axis Titles in Charts

You may wish to control the axis titles in HTML 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 data axis titles. In some cases these may be obvious from the information already given on the chart, as in, for example, the Building Area by City chart, for which it is clear that the grouping axis is City names.

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.

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

<dataAxisTitle>Book and Market Values</dataAxisTitle>

Examples

Below is the AVXW file showing a custom data axis title.

view version="2.0"> <title translatable="true">Custom Data Axis Title</title> <dataSource id="chartCol_ds"> <table name="property" /> <field table="property" name="pr_id" /> <field table="property" name="value_book" /> <field table="property" name="value_market" /> <sortField table="property" name="pr_id" /> </dataSource> <panel type="htmlChart" controlType="columnChart" dataSource="chartCol_ds" showOnLoad="true" showLabels="false" id="panel_row1col1"> <title translatable="true">Book and Market Values by Property</title> <!-- This title is displayed along the data axis. Without this title element, the chart would display the first data axis title. --> <dataAxisTitle translatable="true">Book and Market Values</dataAxisTitle> <groupingAxis table="property" field="pr_id" showLabel="false" showTitle="false" labelRotation="45"> <title translatable="true">Property</title> </groupingAxis> <dataAxis table="property" field="value_book" showLabel="true" showTitle="true"> <title translatable="true">Book Value</title> </dataAxis> <dataAxis table="property" field="value_market" showLabel="true" showTitle="false"> <title translatable="true">Market Value</title> </dataAxis> </panel> </view>

The resulting view appears as so:

axis_title.gif

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