Show TOC

Procedure documentationCreate a Chart Locate this document in the navigation structure

 

With Visual Composer, you can create a wide range of different types of charts, including animated charts. Charts make it easy for users to visualize comparative values and to see trends in the data. The charts are linked to the data generated from the data service and are updated as the data itself is modified.

There are two kinds of chart modes:

  • A linked chart receives data directly from the data service, displaying the data in one of the chart forms. The output can be subsequently linked to another data service so that the user can click on a chart element (value) and display detailed information relating to that value. The following is a design-time example of a linked chart:

    Linked chart (Linked chart)

  • A bound chart receives its data from another output component, from which the information is channeled using data binding. This means that the identical data is displayed in the two UI components, one (possibly) in tabular form and one in chart form. The following is a design-time example of a bound chart:

    Bound chart (Bound chart)

Procedure

  1. Prepare and connect the main components of your iViews: the data service(s), the input components and the output views as needed.

  2. Drag out from the output port of the data service or output component and choose Add Chart View. The chart icon is displayed.

  3. Link the chart as follows:

    • If the chart data is to flow into another data service, drag out from the out port of the chart and link to the Input port of the data service. Then:

      1. Map the fields of the link by double-clicking the line and mapping the fields in the Configure Element task panel.

      2. Create a Select event on this link in order to activate the data service each time a selection is made in the chart.

    • If the chart data is to flow into another UI component, drag out from the out port of the chart and create the link to the other component.

  4. Double-click the chart icon to configure it in the Configure Element task panel.

  5. In the Chart view group of attributes, you can rename the chart and select the chart type, along with type-specific details for specifying the graphical look of the data presented in the chart. See Chart View in the SAP NetWeaver Visual Composer Reference Guide.

  6. From the Field drop-down list in the Category Axis group, choose the field whose values will be displayed as axis categories. In the Axis label field, enter the display name for the axis.

    Example Example

    In the following example, which is the runtime result of the design-time example previously, the Category Axis displays the values in the Material column of the table:

    Runtime bound chart (Runtime bound chart)

    End of the example.

  7. To provide a label for the axis of data values, enter a name for it in the Axis Label field of the Value Axis group of attributes.

  8. Fill in the other attributes as needed. Full explanations of all of the attributes are provided in the Chart View section of the SAP NetWeaver Visual Composer Reference Guide.

  9. You can see that there are two data series – Net Price and Quantity – taken from the Net Price and Dlv Qty columns in the table. To define the two data series for the chart, in the table at the bottom of the Configure Element task panel, do the following:

    1. Click the Add (Add) button.

    2. In the Data Series column, enter a name for the series. You can use the ellipses (...) at the right of the field to enter a custom name using a dynamic expression.

    3. In the Formula field to the right, enter the name of the field that will be the source of data for the data series. You can do this by clicking the fx at the right of the field, choosing Enter formula and in the Data Series dialog box, locating the data field that you require using the Data Fields list.

    4. According to the type of chart you are creating, you can also enter other values relevant to the type of chart, such as Radius.

    5. Repeat the previous steps to create another data series.

    Note Note

    You can define a color for each data series of the chart (except pie and doughnuts charts). To do so:

    1. From the Color Scheme drop-down list (in the Chart Formatting group of attributes), choose Manual.

    2. For each data series defined in the table at the bottom, select a color from the palette that is activated in the Series color field.

    End of the note.

  10. Click the Layout tab and lay out the chart placeholder to indicate the location and size of the tab. Charts are displayed only in runtime.

Example

The example of the linked chart at the beginning of this section is displayed in runtime as follows:

Runtime linked chart (Runtime linked chart)

In this case, the data from the chart – Material category and the data series data – is channeled into a data service and the results are displayed in a form.