CHART

Charts are visual representations of data that make complex datasets easier to understand by highlighting patterns, trends, comparisons, and outliers. They help users analyze large volumes of data at a glance. This guide walks you through the steps to create, configure, and customize chart panels in your dashboard environment.

Steps to Add a Chart Panel

Step 1: From the Add Panel menu, select Chart, then click Submit.

CHART

A new chart panel will appear on the Dashboard.

CHART DASHBOARD PANEL

Step 2: Click the Edit icon to open the configuration tab with customization options.

CHART FORM

Each configuration section is tabbed, allowing you to adjust specific chart properties.

General Tab

This tab contains essential settings that define your chart’s structure and initial appearance.

CHART GENERAL

Step 3: Fill in the following fields:

  • Title: Assign a meaningful name to your chart.
  • Table Name: Choose the source table from your connected database.

  • Chart Type:

  • Column: Vertical bars comparing quantities across categories.

  • Line: Connects data points to show trends over time.
  • Area: Similar to Line but with filled space below lines.
  • Combine Chart: Merges multiple chart types in one.
  • Pie: Displays proportions within a dataset.
  • Donut: Like a Pie, but with a hollow center.
  • Polar: Radial layout to compare multivariate data.
  • Background Color: Set the background color using the color picker.
  • Add Scrollbar: Enable this if your chart extends horizontally.
  • Scrollbar Percentage: Determines how much of the chart is scrollable at once.

Dimension (X-Axis) Tab

Defines the horizontal axis fields and their hierarchy.

CHART DIMENSION

Step 4: Provide the following details:

  • Field Name: Select the column to appear on the X-Axis.
  • Label Name: A display label for the X-Axis.
  • Title Name: Axis title shown along the X-Axis.
  • Level Number: Specify the drill-down level (0 = topmost).

Click Add Grouping to save.

CHART DIMENSION

Field Management Options:

  • Edit: Update selected fields.
  • Delete: Remove fields.
  • Add Query: Add a custom query filter.

Measure (Y-Axis) Tab

Use this tab to configure values for the vertical axis.

CHART MEASURE

Step 5: Input the following:

  • Table Name: Data source.
  • Field Name: Numerical data field.
  • Series Type: Visual type (e.g., Line, Area).
  • Draw Type: Optional, controls series rendering.
  • Label Name: Name of the Y-Axis series.
  • Series Color: Pick the color for the series line/bar.
  • Expression: Aggregation function (e.g., SUM, AVG).
  • Secondary Axis: Use for a second Y-Axis.
  • Show Markers: Toggle to display point markers.
  • Show DataLabels: Show values directly on chart.
  • DataLabel Position: Choose where labels appear (Top, Bottom, etc.).
  • DataLabel Format: Define format (e.g., %, currency).
  • Font Weight: Set text boldness.
  • Font Color: Choose label font color.
  • Font Size: Size of the label text.
  • Datalabel Rotation: Rotate labels for clarity.

Click Add to apply, and view the settings in table format.

MEASURE EXAMPLE

Condition Tab

Apply filters and sorting logic to refine chart data.

CONDITION

Fields:

  • Group By: Choose fields to aggregate data.
  • Order By: Sort fields in the chart.
  • Order By Type: Ascending or Descending.
  • Template Conditions: Create logic-based filters.
  • Condition Expression Box: Write conditions (e.g., region == 'Asia').
  • Operators: Buttons for math, logic, and grouping symbols.
  • Clear: Reset all conditions.
  • Select Table: Choose fields for use in conditions.
  • Selected Table Field Names: Review chosen fields.

Click Submit to apply filters.

Chart Props Tab

Controls appearance and interactivity features.

CHART PROPS

Fields:

  • Chart Area Border Width: Set thickness of the chart border.
  • Chart Area Border Color: Pick a color for the chart’s border.
  • Show Tooltip: Show/hide hover tooltips.
  • Tooltip Format: How data appears in the tooltip.
  • DataLabel Format: Choose label number format.
  • Show Legends: Display chart legend.
  • Legends Position: Top, Bottom, Left, or Right.
  • Legends Font Size: Font size for legend text.
  • Legends Font Color: Font color for legend.

Click Submit to confirm.

X-Axis Props Tab

Customize the X-Axis appearance.

X AXIS PROPS

Fields:

  • Title: Text title for the X-Axis.
  • Label Format: Number/text format for axis labels.
  • GridLines Width/Color: Background grid customization.
  • TickLines Width/Color: Line marks on the axis.
  • LineStyle Width/Color: Thickness and color of axis line.
  • Trim: Cut off long labels.
  • Label Position: Position inside/outside axis.
  • Label Rotation: Rotate label text to save space.
  • Label Intersect Action: Handle overlapping labels.
  • Font Size/Color: Customize text style.

Click Submit to save changes.

Y1-Axis Props (Primary Y-Axis)

Y1 AXIS PROPS

Customize Y-Axis:

  • Title: Axis label.
  • GridLines / TickLines / LineStyle: Set width and color.
  • Label Rotation: Rotate label text.
  • Font Size / Color: Label appearance.

Click Submit.

Y2-Axis Props (Secondary Y-Axis)

Y2 AXIS PROPS

Fields:

  • Title: Label for secondary axis.
  • Font Size / Color: Appearance settings.
  • Label Format: Numeric or percentage.
  • Label Size / Color / Rotation: Text customization options.

Click Submit.

Types of Charts

Available options:

  1. Column Chart
  2. Line Chart
  3. Area Chart
  4. Combine Chart
  5. Pie Chart
  6. Donut Chart

Drill-Down Functionality

Explore details by clicking a specific chart area.

Example: Click "Central Africa" in a pie chart to view a breakdown chart for that region. You can keep drilling down into more levels.

Drill-Up Functionality

Click the arrow icon at the top-right to return to the main chart view.

Downloading Charts

Click the Download Arrow icon.

Choose a format:

  • JPEG
  • PNG
  • SVG
  • PDF
  • XLSX

This works for both main and drill-down charts.