Advanced Chart Builder

The Advanced Chart Builder provides full control over chart configuration, letting you select any data model, define custom measures and dimensions, apply filters, configure display options, and fine-tune chart behavior.

Accessing the Chart Builder

There are two ways to access chart building:

  • Dashboard ‣ Advanced Builder - Opens the visual chart builder client action with a drag-and-drop interface

  • Dashboard ‣ Chart Library - Opens the chart configuration list where you can create and edit chart configurations using the standard form view

Creating a Chart Configuration

Step 1: Basic Settings

  1. Navigate to Dashboard ‣ Chart Library

  2. Click New

  3. Fill in the basic fields:

    • Name - A descriptive name for the chart (e.g., “Monthly Revenue by Team”)

    • Data Model - Select the Progrid model to query. Only models enabled in Configuration ‣ Chart Data Sources appear here.

    • Chart Type - Select from 30+ chart types organized by category:

      • Basic: Bar, Line, Area, Pie, Donut, Metric Value

      • Intermediate: Radar, Scatter, Bubble, Heatmap, Treemap, Funnel, Radial Bar, Polar Area, Candlestick, Range Bar/Gantt

      • Advanced: Gauge, Sankey Diagram, Sunburst

      • Geographic: Choropleth Map, Scatter Map, Flow Map, 3D Globe

      • 3D: 3D Bar, 3D Scatter, 3D Surface

      • Statistical: Box Plot, Parallel Coordinates, Calendar Heatmap

      • Flow: Tree Diagram, Network Graph

    • Chart Subtype - Optional variation: Default, Stacked, 100% Stacked, Grouped, or Horizontal

  4. Set the Date Range to filter data by time period

  5. Optionally select a Date Filter Field to specify which date field to use

Step 2: Define Measures

Measures define the numeric values displayed on the chart. Go to the Measures tab:

  1. Click Add a line

  2. Configure the measure:

    • Field - Select a numeric field (Integer, Float, or Monetary) from the model. Only stored fields are available.

    • Aggregation - How to combine values: Sum, Average, Count, Minimum, or Maximum

    • Label - Optional custom label for the chart legend

    • Format - Display format: Number, Currency, Percentage, or Compact (1K, 1M)

    • Color - Optional hex color code for this measure’s series

Tip

To count records instead of aggregating a field, enable the Count Records checkbox. This counts the number of matching records without needing a specific field.

Step 3: Define Dimensions

Dimensions define how data is grouped on the chart axis. Go to the Dimensions tab:

  1. Click Add a line

  2. Configure the dimension:

    • Field - Select a grouping field (Many2one, Selection, Date, Datetime, Char, or Boolean). Only stored fields are available.

    • Date Interval - For date/datetime fields: Day, Week, Month, Quarter, or Year

    • Sort Order - Ascending, Descending, By Value (Low to High), or By Value (High to Low)

    • Limit - Maximum number of groups to show (0 = no limit)

    • Label - Optional custom label

Step 4: Configure Display Options

Go to the Display Options tab to customize the chart appearance:

  • Show Legend - Display the chart legend

  • Show Data Labels - Show values directly on chart elements

  • Show Values - Display values in tooltips and labels

  • Color Palette - Choose from: Default, Pastel, Vibrant, Corporate, or Monochrome

Step 5: Apply Filters

Go to the Filters tab to add data filters:

The filter field accepts a JSON-formatted domain. For example, to show only confirmed sale orders:

[["state", "in", ["sale", "done"]]]

Common filter patterns:

[["state", "=", "posted"]]
[["active", "=", true]]
[["amount_total", ">", 1000]]
[["date_order", ">=", "2024-01-01"]]
[["team_id.name", "=", "Sales Team 1"]]

Step 6: Advanced Options

Go to the Advanced tab for chart-specific JSON options. This accepts any valid chart library option in JSON format for fine-grained control over the chart rendering.

Step 7: Real-time Settings

Go to the Real-time tab to configure automatic updates:

  • Auto Refresh - Enable automatic data refresh

  • Refresh Interval - Seconds between refreshes (minimum 5 seconds)

  • Animation Duration - Transition animation time in milliseconds (default: 750ms)

  • Max Data Points - Maximum data points to display (default: 10,000)

Warning

Setting a very short refresh interval (5-15 seconds) on charts with large datasets can impact browser performance. Use 60 seconds or longer for data-heavy charts.

Chart Annotations

Annotations add reference marks to charts for highlighting important values:

Mark Lines

Draw horizontal or vertical reference lines:

  • Average - Show the average value across all data points

  • Minimum/Maximum - Show the min or max value

  • Median - Show the median value

  • Custom Value - Draw a line at a specific value you define

Configure the line appearance with color, width (default: 2px), and style (Solid, Dashed, or Dotted).

Mark Points

Highlight specific data points:

  • Automatically mark the Average, Minimum, Maximum, or Median point

  • Or specify a custom value to highlight

Mark Areas

Shade a range between two values to highlight a target zone or acceptable range. Specify the Range Start and Range End values.

All annotation types support label display with configurable position (Start, Middle, End, or Inside).

See also