Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

Overview

This control populates a series of BarGraphs based on the given dataset.

Image RemovedThe BarChart is a graphical component used for visual data representation in Displays/Draw. It can be configured to display dataset information in four different ways, each tailored to a specific context. This component is associated with a data source, such as a dataset table, from which it draws information.

On this page:

Table of Contents
maxLevel3
stylenone


Requirements

This graphical component requires a structured data source. This component is Portable, which means it will run both on Windows WPF displays , and on Web Pages on any platform.


Configuration

Image Removed

  1. Go to Displays / Draw.
  2. On the Components Panel, select Charts, then BarChart.
  3. Click or drag-and-drop it on the Drawing area to use it.
  4. Double-click the object to open the configuration window.

Bar Chart Settings

Field

Description

Control

Name

name

Defines a name for the control so it can be accessed in the CodeBehind script. See Display Code Behind

Specifies the name of the bar chart control. Used to identify the control within the application.

Type

Defines

Type

Select

the type of chart.

Data Source

Enter the dataset table or query to use for the chart.

Grid Lines

Click to select the color for the grid lines.

Window

Click to select the color for the window background.

Labels

Click to select the color for the labels.

The available options are:

  1. Bar: Displays data with rectangular bars proportional to their values, either vertically or horizontally. Useful for comparing categories, showing trends, or visualizing discrete data points.

  2. Line: Connects data points with straight lines, ideal for showing trends over time. Frequently used to display continuous data, highlighting the rise and fall of values across periods.

  3. FullStackedBar: Shows bars stacked to represent the cumulative total of data points. Useful for displaying relative contributions of categories to the whole, illustrating how each part adds to the total over time.

  4. StackedBar: Displays bars stacked to show segments of the total value. Useful for comparing parts of a whole within categories, highlighting the proportion of each segment relative to the category's total.

Data Source

Indicates the data source for the chart, such as "Dataset.Table.Sales." This configuration item requires a structured data source for appropriate data visualization.

Show horizontal labels 45° (WPF only)

When checked, displays horizontal labels at a 45-degree angle. This configuration is only available for WPF displays

Show Horizontal Labels 45°

Select to angle the labels below each bar at 45°

.

Show value over bar

Select to display the bar value above the bar

When checked, displays the values on top of each bar.

Hide all

Zero SeriesSet the series that has values 0 to be hidden

zero series

When checked, hides series with all zero values.

Show value labels 90°

Select to show the labels on each bar at 90°

(WPF only)

When checked, displays value labels at a 90-degree angle. This configuration is only available for WPF displays.

XAxis Width

Set

Allows setting the

Width

width of the X-axis.

Y Axis

Configures the Y-axis settings such as range, labels, auto-scaling, and format.

Range

Set

Sets the minimum and maximum range of the Y-axis

(from and to)

.

Y Axis

YAxis Height

Set

Specifies the

Height

height of the Y-axis.

Y Axis

Labels

Set

Indicates the

quantity

number of

the

labels

to show

on the Y-axis.

Auto Scale Y Axis

Set to make

When checked, automatically scales the Y

axis auto scalable

-axis based on the data.

Format

Set

Defines the format

of the

for displaying Y-axis values. Here, it's set to "N1," which is a numeric format with one decimal place.

Grid Lines

Sets the color of the grid lines in the chart.

Window

Specifies the color of the chart window.

Labels

Sets the color of the labels in the chart.

Data Items

For each column in the data source that you want to include, select a bar and configure the settings to the right of the list (described below). The chart displays a bar for each row.

FieldTitle

Title to be shown in the display of the current column.

FieldValue

Name of the column in the database.

FieldColor

Min.

Enter a tag to define the minimum value.

Max.

Enter a tag to define the maximum value.

Brush

Click to select the color for the data item.

Runtime Execution 

In Runtime, the control has embedded controls to allow the Operator to modify the view.

Typically the configuration settings of <> is attached to a Tag exposed in the  Display User Interface, allowing the operator to select <. >.

Lists the data items (bars or lines) to be displayed in the chart.

FieldTitle

Specifies the X-Axis Labels for the Data Item. This field must be filled with the title of a column containing the labels for each point in the series.

FieldValue

Indicates the values to be used for each data point of the Data Item. This field must be filled with the title of a column containing the values for each point in the series (for example, if you have a column called Month, you must populate this field with 'Month'.)

FieldColor

Defines the color of each bar in the Data Item series. This field must be filled with the title of a column containing textual RGB values in the format #AARRGGBB.

Min

Sets the minimum value for the field.

Max

Sets the maximum value for the field.

Brush

Specifies the brush color used for the data items (bars).



Runtime Execution 

During runtime, the BarChart Control generates a series of bar graphs based on the provided dataset. When the runtime environment is initiated, the BarChart Control processes the dataset and displays the corresponding bar graphs. Users can interact with the bar graphs, which dynamically update as the underlying data changes. This allows for real-time visualization and analysis of data within the application, enabling users to monitor and interpret data trends effectively.

Image Added


In this section:

In this section...

Page Tree
root@parent
spacesV10