Visualization

A visualization widget is a graph with additional features. The following features are available in a visualization widget:
  • Line chart
  • Area chart
  • Bar chart
  • Stacked bar chart
  • Donut chart
  • Multiple charts
  • Additional y-axis
  • Zooming in or out
  • Grid lines
  • Rotation
  • Support of negative values
  • Improved look and feel of tooltips
  • Ability to focus on a specific field on the chart
  • Grouping using a query field
Important: Due to the format of the data returned by Historian REST calls, the Visualization widget cannot display data from Historian sources.

Visualization Settings

When you use a visualization widget, in addition to the default settings of a widget, the following settings are available.
SettingDescription
FlowSelect the query (from the ones added in the PAGE DATA section) that should be used to retrieve information in the graph.
Switch Row/ColumnSelect this check box if you want to switch the x-axis and y-axis data.
X-axisProvide values in the following boxes for x-axis settings:
  • Data: Select the query field whose data should be plotted on the x-axis.
  • Label: Enter a label for the x-axis.
  • Rotate Ticks: Select this check box.
  • Grid lines: Select this check box if you want to show grid lines.
Y-axisProvides values in the following boxes for y-axis settings:
  • Label: Enter a label for the y-axis.
  • Grid Lines: Select this check box if you want to show grid lines.
  • Range: Select whether the range of the y-axis should be set automatically or manually. If you select Manual, the Min and Max boxes appear, in which you must enter values.
DataProvide values in the following boxes for the data settings:
  • Name: Enter the name of the graph.
  • Type: Select the type of the graph: Bars, Lines, Area, or Donut.
  • Data: Select the data source of the graph.
  • Stacked: Select this check box if the graph should be plotted as a stacked bar chart. This option is available only for a bar chart.
  • Color: Select whether the color of the graph should be selected automatically or manually.
Add FieldSelect this button if you want to plot another field on the graph.
Add All FieldsSelect this button if you want to plot all the entity fields.

Using a Visualization Widget

Suppose you want to plot the following information on a graph:
  • Sales amount for two branches - Tokyo and Tel Aviv, plotted as a line chart and an area chart, respectively.
  • Sales amount for two products - V26 and V27, plotted as a stacked bar chart.
  • Breakdown of sales amount per branch - plotted as a donut chart.
To do so, perform the following steps:
  1. Create an entity to store the sales amount for the two branches and the two products.
  2. Create a Get query to retrieve the sales amount.
  3. In the page designer, in the PAGE DATA section of the container, add the query.
  4. Add two visualization widgets to the container.
  5. Add the following headers for the visualization widgets:
    • Lines/Area and Stacked
    • Donut
  6. For the Lines/Area and Stacked chart, provide values as described in the following table for the x-axis.
    SettingDescription
    FlowSelect the query that you have created.
    DataSelect the daily field of the query.
    Rotate TicksSelect the check box.
    Grid LinesSelect the check box.
  7. Select Add Field.

    An additional Data section appears for the other y-axis.

  8. Provide values as specified in the following table for the two y-axes.
    SettingDescription for the First Y-AxisDescription for the Second Y-Axis
    LabelEnter Amount.Enter Product.
    Grid LinesSelect the check box.Not applicable
    TypeSelect Lines.Select Area.
    DataSelect the field that stores the sales amount for the Tokyo branch.Select the field that stores the sales amount for the Tel Aviv branch.
    Y-axis sideSelect Left.Select Left.
  9. Select Add Field twice. Two additional Data sections appear for the two y-axes.
  10. Provide values as specified in the following table for the two y-axes.
    SettingDescription for the First Y-AxisDescription for the Second Y-Axis
    TypeSelect Bars.Select Bars.
    DataSelect the field that stores the sales amount for the product V27.Select the field that stores the sales amount for the product V26.
    StackedSelect the check box.Select the check box.
    Y-axis sideSelect Right.Select Right.
  11. For the Donut chart, select Add Field twice, and provide values as specified in the following table.
    Setting Description
    Flow Select the query that you have created.
    Donut Title Enter Breakdown Per Branch.
    Type Select Donut for both the boxes.
    Data Select the field that stores the sales amount for V26 and V27, respectively.
  12. Save the application, and preview it. The first graph displays a line chart and an area chart for the sales amount of Tokyo and Tel Aviv, respectively. It also displays a stacked bar chart for the sales amount of the two products, V26 and V27. The second graph displays a donut chart for the sales amount of V26 and V27.