Docs

Chart View

What is a Chart View?

A chart view is a customizable dashboard in Essembi that visualizes data with charts, metrics, labels, pictures, buttons, and other objects. Teams use chart views to monitor performance, spot trends, and drill into the details that drive continuous improvement. Each object can pull from a table, data model, or report and can be filtered to show the right subset of information.

Creating and Editing a Chart View

  1. Open a workspace and create or open a Charts view (Customize → Create View / Customize View).
  2. Enter the charts editor. Add objects from the object toolbox (Charts and Other).
  3. Drag objects onto the canvas, resize them, and open each object’s settings to configure data and styling.
  4. Configure view-level settings (name, default filter, columns, row height, auto-refresh, display options).
  5. Save your changes. Users need the appropriate role-based security to edit chart views.

Hover an object to duplicate or delete it. Use Undo / Redo while editing, and History to see who created or changed the view.

Object Toolbox

The toolbox includes every object you can place on a chart view, grouped into Charts and Other.

Charts

  • Bar — Vertical bars for comparing values across categories
  • Horizontal Bar — Horizontal bars for side-by-side comparison
  • Stacked Bar — Vertical stacked bars for component breakdowns
  • Horizontal Stacked Bar — Horizontal stacked bars for component breakdowns
  • Pie — Slices showing proportions of a whole
  • Doughnut — Ring chart showing proportions of a whole
  • Line — Trends and changes over time
  • Pareto — Bars plus cumulative % line to highlight the most significant factors
  • Timeline — Activity bars across time using start/end datetime fields
  • Metric — Single KPI / numerical value

Other

  • Generated Html — Custom HTML rendered from JavaScript
  • Label — Static text for headers and descriptions
  • Dynamic Picture — Picture driven by a record/field (with optional sort and skip)
  • Static Picture — Uploaded image for branding or instructions
  • Divider — Visual separator (solid, dotted, or dashed)
  • Button — Clickable action that runs a script (optional data source)

Charts View Settings

Open view settings to configure the whole dashboard:

  • Name — Workspace tab name
  • Data Source — Optional default table/report context for the view
  • Default Filter — Filter applied when the view loads
  • Number of Columns — Grid width for laying out objects
  • Row Height — Grid row height units
  • Auto-Refresh Minutes — Automatic refresh interval for live dashboards
  • Parent View — Nest this charts view under another view in the workspace
  • Archived — Hide the view from normal navigation when checked
  • Default Display Name / Display Options — Preset filter perspectives (see Display Options below)

Common Object Settings

Most data-driven chart objects share these settings:

  • Title — Optional title on the object (Labels/Buttons use Caption)
  • Data Source — Table, data model, or report
  • Default Filter — Saved filter applied to this object
  • Categorization Field — Grouping field (X-axis / slices)
  • Date & Time Grouping — When the category field is date/time: Minute, Hour, Day, Week, Month, Quarter, or Year (users can also change this at runtime from the calendar-range control)
  • Aggregation Type — Count, Sum, Average, Min, Max
  • Aggregated Field — Numeric field for the value axis (hidden when Aggregation = Count)
  • Series Field — Optional field to split the chart into multiple series
  • Display On — All Devices, Desktop Only, or Mobile Only
  • Drill Down — Script that runs when the user interacts with a data point (see Drill Downs below)

At runtime, many charts also show controls to change date grouping, open filters, and refresh.

Chart Type Settings

Bar Charts (Bar, Horizontal Bar, Stacked Bar, Horizontal Stacked Bar)

Bar charts compare values across categories. Horizontal and stacked variants are separate toolbox objects; you can also adjust direction/style after adding a bar.

  • Bar Direction — Vertical or Horizontal
  • Series Style — Normal or Stacked (when a Series Field is set)
  • Start Aggregate Axis at Zero — Force the value axis to start at zero
  • Target Value Field — Optional numeric field (same dataset as the aggregated value; not available for Count aggregation). When set, Essembi plots the target as a dashed line (legend label Target) so you can compare actual vs target—ideal for run rate or standard-vs-actual charts.
  • Min Value / Max Value — Draw threshold lines on the value axis (shown as dashed lines) to highlight low/high limits
  • Max Aggregation — Cap the value axis maximum
  • Show Empty Buckets — Keep empty categories/time buckets visible
  • Sort Order — X-axis or Y-axis ascending/descending
  • Bar Color — Custom color for single-series charts (overrides record color schemes when set)
  • Show X-Axis Values / Title, Show Y-Axis Values / Title, Show Y-Axis Grid — Axis chrome toggles
  • Conditional Formatting — Script that returns a CSS color; can use axisValue, seriesLabel, and when a target is configured axisTargetValue
  • Drill Down — Script on double-click / interaction

Example: Target vs Actual Run Rate

To show actual run rate against a target on the same chart:

  1. Use a data source that includes both the actual measure and the target measure (for example, Actual Units / Hour and Standard Units / Hour).
  2. Add a Bar chart.
  3. Set Aggregation Type to Sum or Average (not Count).
  4. Set Aggregated Field to the actual value.
  5. Set Target Value Field to the target / standard value.
  6. Optionally use conditional formatting to color bars based on whether actual is above or below target:
//-- Color bars red when actual is below target
if (typeof axisTargetValue !== 'undefined' && axisValue < axisTargetValue)
{
    return '#e53935';
}
return '#41BD43';

Line Charts

  • Start Aggregate Axis at Zero
  • Line Color — Custom color for single-series charts
  • Window Start / Window End — Optional date-window conditions when the category field is DateTime
  • Show Empty Buckets behavior — Line charts can fill empty date buckets for continuous trends
  • Axis visibility toggles (X/Y values, titles, grid)
  • Drill Down

When a Series Field is set, series colors are generated automatically and can follow record colors from the series values. Use Bar Color / Line Color for a single custom color when you are not using a series field.

Pie and Doughnut

  • Style — Pie or Doughnut
  • Standard categorization, aggregation, filter, display-on, and drill down settings

Best for a small number of categories (typically 5–7).

Pareto

Pareto charts combine bars with a cumulative percentage line (0–100% secondary axis) and sort categories by value descending—useful for prioritizing the issues with the greatest impact.

  • Start Aggregate Axis at Zero
  • Bar Color
  • Drill Down

Timeline Charts

Timeline chart objects plot records as bars across time using a start field and end field. They are ideal for showing activity on a line, station, or area over a shift or day.

  • Timeline Start / Timeline End — Window for the timeline
  • Interval Type / Interval Amount — Hour, Minute, Day, or Week sizing
  • Round Timeline To — Snap/round the timeline scale
  • Start Field / End Field — Datetime fields that define each bar
  • Unscheduled Time Color — Color used for gaps / unscheduled time
  • Drill Down — Runs when a timeline bar is clicked

Manufacturing example: Production Events on a Line

With the Production Module, use the Production Events report as the timeline data source to visualize work order routings and incidents for a production line:

  1. Add a Timeline object to the chart view.
  2. Set Data Source to the Production Events report.
  3. Set Start Field / End Field to the report’s start and end time fields.
  4. Apply a default filter (or display option) for the specific Line / Facility / time range you care about.
  5. Optionally add drill down so clicking an event opens the related work order, incident sheet, or detail chart.

This creates a single visual of activity—runs, downtime, and other events—on a line for standup boards or control rooms. See also Available Reports.

Metric Cards

Metrics show a single numerical KPI.

  • Aggregation Type / Aggregated Field
  • Format Result — JSON for Intl.NumberFormat (decimals, currency, percent, compact notation)
  • Conditional Formatting — Color the metric based on value
  • Drill Down
{
  "style": "percent",
  "maximumFractionDigits": 1
}

Generated Html

Custom visualizations that return an HTML string from JavaScript. See the scripting engine for querying data.

  • Javascript — Must return valid HTML
  • Expand Vertically to Fit Content — Grow the object height to fit generated content

Be mindful of performance and security with custom HTML.

Labels

  • Caption, Font Size, Color, Bold, Italic, Underline, Word Wrap
  • Display On — Device visibility

Dynamic Picture

  • Picture — Picture field to display
  • Mask — None or Circle
  • Data Sorting — Sort rules for which record’s picture is shown
  • Records to Skip — Offset into the sorted result set
  • Display On

Static Picture

  • Picture — Uploaded image

Divider

  • Caption
  • Direction
  • Style — Solid, Dotted, or Dashed
  • Thickness, Color

Buttons

Buttons run scripts when clicked and are useful for navigation, opening forms, or launching related views without requiring a chart double-click.

  • Caption, Icon, Color
  • Data Source / Default Filter — Optional; when set, the click script can use the loaded record / results
  • Click Event — Script that can open views, forms, URLs, etc. (same return patterns as drill downs)
  • Hidden When — Script that hides the button when it returns true
  • Display On

Colors and Series

  • Single-series charts — Set Bar Color or Line Color for a custom series color. This overrides record color schemes when configured.
  • Multi-series charts (Series Field set) — Essembi generates distinct series colors and can use colors from the series records when available.
  • Conditional formatting — Override bar/metric colors per value with a script that returns a CSS color.

Conditional Formatting

Write JavaScript that returns a valid CSS color string.

  • Bar charts — Styling Options → Conditional Formatting. Variables include axisValue, seriesLabel, and axisTargetValue when Target Value Field is set.
  • Metric cards — Color the metric based on thresholds or targets.

See conditional formatting scripting.

Drill Downs and Buttons (Scripting)

Drill downs make dashboards interactive. On most charts, interaction runs the object’s Drill Down script. Buttons use a Click Event script instead.

Scripts can open another charts/sheet/board/gantt/timeline view, open a form, open a URL, or show an error. Common APIs:

  • app.loadChartsView(workspaceName, viewName, displayOption?)
  • app.loadSheetView(workspaceName, viewName, savedFilters?)
  • view.addFilter(...), view.addOption(...), view.name = '...'
  • app.openUrl('https://...')

Drill-down context includes values such as axisLabel, axisValue, seriesLabel, and value for the clicked point. See the scripting engine for full details.

//-- Example: drill from a daily OEE bar into a detail charts view
const selectedDate = axisValue;
if (!selectedDate)
{
    return;
}

const endOfDay = new Date(selectedDate);
endOfDay.setHours(23, 59, 59, 999);

const view = app.loadChartsView('OEE', 'Line #1');
if (!view)
{
    return;
}

view.addFilter('Incident', 'Start', 'Overlaps', selectedDate, endOfDay);
view.addOption('OEE Time Segment', 'Number of Days', 1)
    .addOption('OEE Time Segment', 'End Date', selectedDate);
view.name = `Line #1 detail for ${selectedDate.toLocaleDateString('en-US')}`;

return view;

Note: Drill-down and button scripting is advanced. Use in-app Intercom chat or Essembi support if you need help.

Display Options

Display Options let one charts view offer multiple preset perspectives (for example, Line 1 vs Line 2) without rebuilding the dashboard.

Setting Up Display Options

In Charts view settings, configure:

  • Default Display Name — Label for the Display control / “go back” default
Column Description
Display Option Name shown in the Display dropdown (e.g., "Powder Line 1")
Data Source Table, data model, or report whose filters are overridden
From Saved Filters Filter configuration being replaced
To Saved Filters Filter configuration applied when the option is selected

Runtime Behavior

  • A Display dropdown appears when options exist (caption uses the selected option name or Default Display Name).
  • Selecting an option remaps matching filters for the specified data source.
  • Middle-click can open the option in a new tab.
  • A go-back entry returns to the default filters.
  • Display options are also used by published dashboards when rotating chart views with different filter groups.

Example

  • Powder Line 1 — Work Orders filters: All Lines → Line 1 Only
  • Powder Line 2 — Work Orders filters: All Lines → Line 2 Only

Working with Filters

  • Default Filter on the view or object — Applied on load (active records, current shift, a facility, etc.)
  • Runtime filters — Users can open the funnel control to explore interactively
  • Display Options — Switch between saved filter presets quickly

See the filtering help section.

Device Display (Display On)

Individual objects can be limited by device:

  • All Devices
  • Desktop Only
  • Mobile Only

Use this to keep dense charts on desktop while showing key metrics on tablets.

Saving and Managing Charts

  • Save / Save & Close — Persist configuration (requires edit rights)
  • History — Who created the chart and later changes
  • Undo / Redo — Available while editing

Best Practices

  • Use Bar for comparisons, Line for trends, Pie/Doughnut for parts of a whole, Metrics for KPIs, Timeline for activity over time, and Labels/Dividers to organize the layout.
  • For run-rate or standard-vs-actual monitoring, pair Aggregated Field with Target Value Field and optional conditional formatting via axisTargetValue.
  • Apply default filters and sensible date groupings; avoid hourly buckets over very long ranges.
  • Set auto-refresh only as often as the floor needs.
  • Use Display Options for line/shift perspectives instead of duplicating whole dashboards.
  • Use Buttons for common actions; use Drill Downs for point-and-click analysis.
  • Test desktop vs mobile with Display On when the same view is used on tablets and TVs.

Related Help

Back to help
On this page
    Essembi Help Guide