VIZ Charts

IMPORTANT NOTICE: viz-chart deprecated since version 1.32.0

 The chart controls in the sap.viz.ui5 package (which were always marked as experimental) have been deprecated since 1.32.0.
They are no longer actively developed and won't receive new features or improvements, only important bug fixes. They will only remain in the
SAPUI5 distribution for backward compatibility.

SAP strongly recommends that existing consumers of those controls migrate to the new VizFrame
control to benefit from new charting enhancements and timely support.

Note: As the feature set, design and API usage of VizFrame might differ from the old chart controls, make sure you evaluate it thoroughly before migration.

Introduction

The sap.viz charting library provides a set of flexible chart controls that allow to easily represent business data in a feature rich, graphical manner. Beside pure presentation, VIZ charts support some user interaction. show-/hideTooltip events are fired when the user hovers over a chart element. select/deselectData events are fired whenever data in the chart is selected or deselected by the user.

Example

The following code snippet shows the basic capabilities of the Bar chart control:

Several chart types have the same requirements regarding their data structure (e.g. same number of dimensions, measures). It is quite easy to switch between such charts. Just use a different constructor and - if you need configuration - adapt the name of the main configuration property.

Try it out and replace the Bar chart in the sample above with a Combination, Line, Column, StackedColumn or StackedColumn100 chart.

Please note that Pie and Donut chart can be used as well, but they can display only a single measure. Therefore you have to remove the second measure from the FlattenedDataSet definition in Example 1.

Eventing

The following example shows how to attach events to a chart.

The showTooltip, hideTooltip, selectData and deselectData events each provide a single parameter data which describes the affected data points (hovered, selected, deselected). Its structure is described in the API reference. Besides the values of the data points, the structure also contains the coordinates of the data in the sap.viz internal, two-dimensional crosstable. To convert these coordinates back to a UI5 model context, the method findContext() of the FlattenedDataset can be used. The example below also shows a sample implementation for the selectData event.

Note: As the logging in a textarea slows down the behavior of the chart, you might switch off the logging to see the performance of the eventing.

API Documentation

See Bar Chart, FlattenedDataset and general sap.viz API documentation