Chart Module

The Chart Module provides a powerful and flexible way to visualize your data. You can create various chart types, pivot tables, and data grids, all configurable through an intuitive interface.

Main Chart View

When you open a chart, you'll be presented with the main view. This view is divided into several key areas:

Main Chart View Layout

  1. Chart Display Area: This is where your selected chart, pivot table, or data grid will be rendered.
  2. Data Table Area: Below the chart, a table displays the raw data powering your visualization. This is useful for quick reference and understanding the underlying information.
  3. Configuration Panel Toggle: In the top-right corner, a Cog icon (⚙️) allows you to show or hide the Chart Configuration panel.
  4. Header Menu:
    • Save Button: Located in the top-left menu, this allows you to save your current chart configuration and type.

Underlying Data Table

The table at the bottom of the chart view displays the query results that feed into your chart.

  • Sorting: Click on column headers to sort the data.
  • No Data: If no data is available, it will display "No data available."
  • Loading: While data is being fetched, a loading indicator will be shown.

Chart Configuration Panel

The Chart Configuration panel is where you define how your data is visualized. It slides in from the right (on desktop) when you click the Cog icon.

1. Chart Type Selector

At the top of the panel, you'll find the chart type selector.

  • To change chart type:
    1. Click the button showing the current chart type icon and name.
    2. A dropdown menu will appear with all available chart types (e.g., Data Grid, Pivot Table, Pie, Line, Bar, etc.), each with a representative icon.
    3. Click on your desired chart type.
      • Note: When switching to or from Data Grid or Pivot Table, the field configuration (Dimension, Group, Values, Filters) will be cleared to ensure a fresh setup. If switching to Data Grid, all available fields will automatically be added to the 'Columns' section.
      • Main Chart View Layout

2. Field Configuration (Drag & Drop)

The core of chart configuration involves dragging fields from "Available Fields" into different configuration areas.

Drag and Drop Fields Example

  • Available Fields: This box lists all columns from your dataset.
  • Drag a field: Click and hold a field in "Available Fields" and drag it to one of the target areas below.
  • Remove a field: To remove a field from an area like "Dimension" or "Values", you can usually drag it out of that specific box. Sometimes, dragging it back to "Available Fields" or to an empty space might work. If a field has a small 'x' or similar icon, clicking that would also remove it. (Clarify based on actual UI for removal if it's not just dragging out)

Configuration Areas:

  • Filters:
    • Drag fields here to filter the data. Click on a dropped field to open the Filter Modal.
  • Dimension / Rows (for Pivot Table):
    • Primary category or x-axis. For Pivot Tables, these are the row fields.
  • Group / Columns (for Pivot Table):
    • Optional field for sub-dividing, creating grouped/stacked charts. For Pivot Tables, these are column fields.
  • Values / Columns (for Data Grid):
    • Numeric fields to be aggregated or displayed. Right-click a field here (for charts/pivot) to configure aggregation. For Data Grids, these are the grid columns.

3. Field Options (Modals)

a. Aggregation & Formatting Modal (for 'Values' fields)

When a field is in the "Values" area (or "Columns" for Data Grid), right-click it to open the "Field Configuration" modal.

Aggregation and Formatting Modal

  • Field Caption: Change the display name.
  • Format (for Pivot Table & Data Grid):
    • Type: Select number formatting.
    • Precision: Specify decimal places.
  • Aggregation (Not for Data Grid):
    • Choose aggregation method.
    • Custom Aggregations: If Custom or Custom Summary is selected, a code editor appears.
  • Actions: Close or Save.

b. Filter Modal (for 'Filters' fields)

Click a field in the "Filters" area to open the "Field Settings - [FieldName] (Filter)" modal.

Filter Modal Example

  • Filter Values: Check boxes next to values to include.
  • Actions: Delete (removes the filter) or Close.

4. Chart-Specific Options

a. Pivot Table Options

If Pivot Table is selected:

Pivot Table Options Panel Section

  • Data Field Area, Row Header Layout, Show Totals Prior (dropdowns).
  • Various Checkboxes for totals, sorting, filtering, export, display.
  • On Cell Prepared Custom Script Button: Opens a modal for custom JavaScript. Custom Script Modal for Pivot OnCellPrepared

b. Data Grid Options

If Data Grid is selected:

Data Grid Options Panel Section

  • Various Checkboxes for filtering, paging, export, column width, display.
  • Page Size: Input field.
  • Sorting Mode: Dropdown.

Chart Types & Display

1. Standard Charts (e.g., Pie, Line, Bar)

  • Configuration Requirements: Dimension and Values fields are essential. Group is optional.
  • Display: If configuration is incomplete, a message appears. A correctly configured chart will render based on your settings.

2. Pivot Table

  • Configuration Requirements: At least one field in Rows, Columns, or Values.
  • Display: Summarizes data in a cross-tabular format.

3. Data Grid

  • Configuration Requirements: Fields in the "Columns" (Values) area define grid columns.
  • Display: Shows data in a feature-rich table.

Saving Your Chart

Once satisfied:

  1. Click the Save button (☁️⬆️) in the header menu.
  2. A confirmation "Chart saved successfully" will appear.

Troubleshooting

  • "Please check your configuration..." message: Review field requirements for your chosen chart type.
  • Chart/Table not updating: Try a small change in the config panel. If issues persist, save and refresh.
  • Custom Scripts not working: Check for syntax errors in your code (use browser developer console for errors). Ensure you're using the provided options or e objects correctly.