Show TOC

Smart ChartLocate this document in the navigation structure

The sap.ui.comp.smartchart.SmartChart control can be used to create complex diagrams.

Overview

You can select a chart type, such as a pie chart, column chart or a chart with an x and a y-axis or two y-axes, and define the dimensions and measures for the chart and how you want to display them. A drilldown enables you to display even more information about a dimension.

On the UI, the SmartChart control consists of a toolbar and a chart area. The control uses the sap.chart.Chart control, which is shown in the chart area. The toolbar offers you various functions, such as the selection of various types of charts, the drilldown/drillup and maximize/minimize functions as well as zooming in and out of a chart, and a download. In addition, the control allows you to navigate to the related semantic object for the chart by clicking Jump To after selecting the relevant part of the chart, such as a column (or, alternatively, you can also use a similar feature by clicking the Details button if this feature is enabled).

Details

The SmartChart control offers further functions by integrating other smart controls: You can save a chart as a variant using the SmartVariantManagement control or make chart-specific personalization settings using the sap.m.P13nDialog control.

In the personalization dialog, you can select a number of chart-specific features in the Chart panel, such as selecting various dimensions and measures. You can also sort the data in the chart or filter it based on the conditions you define here. The Filter panel also shows all the filter criteria that have been used in a drilldown. Defining filters manually achieves the same result. For more information about the various other smart controls, see sap.ui.comp and Personalization Dialog.

If a chart is changed several times, the final outcome of the changes can be persisted as a variant once the chart looks as required by the user. When the variant is loaded the next time, the final outcome of the changes will be shown, but not each single step of the changes.

If the showDownloadButton property is set to true, you can download the part of the chart that is currently visible by clicking the Download Chart button. The chart will be downloaded in PNG format.

Note In Microsoft Internet Explorer, you can only download SVG formats. Here you will be notified in a notification bar at the bottom of the page that allows you to display or download the chart.
Annotations

The following table shows a selection of the annotations used by the SmartChart control:

Table 1: Annotations

Element

Annotation

Value

Mandatory

Description

Entity type

sap:semantics

aggregate

Yes

Enables the aggregation of dimensions and measures.

Dimensions

sap:aggregation-role

dimension

Yes

Defines the dimensions.

Measures

sap:aggregation-role

measure

Yes

Defines the measures.

A property can be annotated with attribute sap:aggregation-role if it has an aggregation role. The attribute can have the value "dimension" if the property represents the key of a dimension or "measure" if the property represents a measure whose values are aggregated according to the aggregation behavior of the entity type that contains the control. Both values are only valid for properties of an entity type that is annotated with sap:semantics="aggregate".

<EntityType Name="Product" sap:service-schema-version="1" sap:service-version="1" sap:semantics="aggregate" sap:content-version="1"> 
	<Property Name="Category" Type="Edm.String" Nullable="false" MaxLength="40" sap:aggregation-role="dimension" sap:label="Product Category" sap:creatable="false" sap:updatable="false" sap:sortable="true" sap:filterable="true" />
	<Property Name="Quantity" Type="Edm.Decimal" Nullable="false" MaxLength="3" sap:aggregation-role="measure" sap:label="Quantity"
 	sap:creatable="false" sap:updatable="false" sap:sortable="true" sap:filterable="true" />
 	...
</EntityType>

The com.sap.vocabularies.UI.v1.Chart annotation is used to specify the chart type and the visible measures and dimensions of the chart.

<Annotations Target="EPM_DEVELOPER_SCENARIO_SRV.Product"
      xmlns="http://docs.oasis-open.org/odata/ns/edm">
      <Annotation Term="com.sap.vocabularies.UI.v1.Chart">
            <Record>
                  <PropertyValue Property="ChartType"
                        EnumMember="com.sap.vocabularies.UI.v1.ChartType/Column" />
                  <PropertyValue Property="Dimensions">
                        <Collection>
                              <PropertyPath>Name</PropertyPath>
                              <PropertyPath>Category</PropertyPath>
                        </Collection>
                  </PropertyValue>
                  <PropertyValue Property="Measures">
                        <Collection>
                              <PropertyPath>Price</PropertyPath>
                              <PropertyPath>Quantity</PropertyPath>
                        </Collection>
                  </PropertyValue>
            </Record>
      </Annotation>
</Annotations>