Chart View

What is a Chart View?

A chart view is a customizable dashboard component in Essembi that enables teams to visualize their data through various chart types. Chart views transform your data into visual representations, making it easier to identify trends, monitor performance, and make data-driven decisions. Each chart pulls from your organization's data models and can be filtered to display specific subsets of information.

Available Chart Types

Essembi offers multiple chart types to suit different visualization needs:

• Bar: Vertical or horizontal bars for comparing values across categories
• Doughnut: Circular chart showing proportions of a whole
• Horizontal Bar: Side-by-side comparison of values
• Horizontal Stacked Bar: Stacked horizontal bars showing component breakdowns
• Line: Track trends and changes over time
• Pareto: Combination chart highlighting the most significant factors
• Pie: Circular chart divided into slices representing proportions
• Stacked Bar: Vertical bars showing component breakdowns
• Generated Html: Custom HTML-based visualizations using JavaScript
• Label: Text-based display elements
• Metric: Single numerical value displays

Creating a Chart

Basic Chart Setup

1. Navigate to the view where you want to add a chart
2. Select the chart type from the toolbar on the right side
3. Drag and drop the chart onto your dashboard canvas
4. Configure the basic settings:
   • Name: Set the name that will appear in your workspace
   • Data Source: Select the data model or report that will power the chart
   • Default Filter: Apply filters to show only specific data subsets

Duplicating or Deleting Chart Elements

To duplicate or delete a chart element, hover over the chart elements and then select the appropriate button.

Chart Settings

Access the settings for any chart by clicking on it and selecting the settings option. The settings are organized into several sections:

General Settings

• Title: Optional title displayed on the chart
• Data Source: The table or report providing the data
• Default Filter: Pre-set filters applied when the chart loads
• Display On: Choose which devices display this chart (All Devices, Desktop only, Mobile only)

Advanced Settings

• Number of Columns: Set how many columns the chart spans in the grid layout
• Row Height: Define the height of the chart in grid units
• Auto-Refresh Minutes: Set automatic refresh interval for real-time data
• Parent View: Organize charts hierarchically within your workspace
• Archived: Toggle to hide/show the chart

Chart Display Options

Display Options allow you to create multiple preset views of the same chart with different filter configurations. This enables users to quickly switch between different perspectives of the data without manually adjusting filters each time.

Setting Up Display Options

In the Charts view settings, you can configure Display Options using a grid with the following columns:

How Display Options Work

When viewing a charts view in a workspace, if the view has display options configured, a Display dropdown appears in the top right. Selecting an option:

• Loads the same view with the specified filter overrides applied
• Can open in the current tab or a new tab (middle-click)
• Shows the option name in the title instead of "Display"
• Adds a "Go Back" option at the bottom of the dropdown to return to default filters

Creating Display Options Button

Use the "Create" button in the Display Options column to add new display options. Each option specifies which saved filters should replace the current filters when that display option is selected.

Filter Override Behavior

• If all filter overrides are deleted from a display option, that option is automatically removed when the view is saved
• If a user tries to delete a saved filter that is in use by display options, they receive a prompt explaining how to resolve the issue
• Display options only affect the specified data source, leaving other filters unchanged

Example Use Case

Scenario: Create display options for different production lines

Chart Type-Specific Settings

Bar and Line Chart Elements

• Categorization Field: The field used to group data (X-axis)
• Date & Time Grouping: If the categorization field is a time based field, this field option will be unlocked so that the grouping can be completed by hour, day, week, month, quarter, or year
• Aggregation Type: Choose how to calculate values (Sum, Average, Count, Min, Max)
• Aggregated Field: The numerical field to display (Y-axis)
• Start Aggregate Axis at Zero: Force the Y-axis to begin at zero for consistent scaling
• Series Field: Optional field to create multiple series within the same chart

Advanced Styling Options

• Sort Order: Control how the chart is organized (x-axis or y-axis ascending / descending)
• Bar Color: Set custom colors for chart elements
• Show X-Axis Values: Toggle visibility of X-axis labels
• Show X-Axis Title: Display/hide the X-axis title
• Show Y-Axis Values: Toggle visibility of Y-axis labels
• Show Y-Axis Title: Display/hide the Y-axis title
• Show Y-Axis Grid: Add/remove gridlines for easier reading

Metric Cards

Metrics display single numerical values, ideal for KPIs and key statistics.

Format Numeric Result

The Format Result option allows you to control how numeric values are displayed in metric cards using the Intl.NumberFormat specification. This is useful for formatting currencies, percentages, large numbers, and controlling decimal precision.

The format is specified as a JSON object with properties defined by the JavaScript Intl.NumberFormat API. Common formatting options include:

Examples

{
  maximumFractionDigits: 1
}

{
  style: "currency",
  currency: "USD",
  maximumFractionDigits: 2
}

{
  style: "percent",
  maximumFractionDigits: 1
}

{
  notation: "compact",
  maximumFractionDigits: 1
}

For complete formatting options, refer to the Intl.NumberFormat documentation.

• Conditional Formatting: Apply color coding based on value thresholds
• Format Result: Customize how numbers are displayed (decimals, currency, percentages)
• Drill Down: Configure interactive actions when users click the metric

Pareto Chart Elements

Pareto charts combine bar charts with cumulative line graphs to help identify the most significant factors in a dataset, following the Pareto Principle (80/20 rule). They are particularly valuable for prioritizing issues, identifying root causes, and focusing improvement efforts on the areas with the greatest impact. The chart automatically sorts categories by their y-axis values in descending order, making it easy to see which factors contribute most to the total.

Generated HTML Chart Elements

Generated HTML charts allow completely custom visualizations or data sets using JavaScript to return an HTML format.

To learn more about how to utilize JavaScript to gather data from within Essembi, see the scripting engine section. This JavaScript must return a valid HTML string. Be mindful of the impact of custom HTML elements on performance and security.

There is one property specific to generated HTML chart elements:

• Expand Vertically to Fit Content: Expands the pre-configured chart boundary vertically to fit the generated content.

Labels

Labels add text elements to your dashboards for headers, descriptions, or static content.

• Caption: The text to display
• Font Size: Adjust text size (default: 10)
• Color: Set custom text color
• Bold: Make text bold
• Italic: Apply italic formatting
• Underline: Add underline styling
• Word Wrap: Enable text wrapping for longer content

Conditional Formatting

Conditional formatting automatically applies colors based on data values, making it easy to spot trends and outliers.

Bar and Line Graph Conditional Formatting

In the chart element settings, navigate to Styling Options > Conditional Formatting to write Javascript that returns a valid CSS color string. To learn more, see conditional formatting scripting logic. 

Metric Card Conditional Formatting

Similar conditional formatting applies colors to metric values, helping quickly identify performance against targets. To learn more, see conditional formatting scripting logic. 

Drill Down Functionality

Drill down actions let users click on chart elements to navigate to related data or detailed views. This advanced feature enables interactive dashboards where summary charts link to detailed records.

Note: Configuring drill down actions is advanced system functionality. Contact Essembi support if you need assistance setting up drill down features.

Working with Filters

Default Filters

Default filters are applied automatically when a chart loads, ensuring users see the most relevant data immediately. Common uses include:

• Showing only active records
• Limiting to current time periods
• Filtering to specific departments or regions

Dynamic Filtering

Charts can respond to filters applied at the view level, allowing users to interactively explore data by adjusting filter criteria.

For more information on creating and using filters, see the filtering help section.

Display Options

Charts can be configured to appear on specific device types:

• All Devices: Chart displays on desktop, tablet, and mobile
• Desktop Only: Optimized for larger screens
• Mobile Only: Designed for mobile viewing

This allows you to create responsive dashboards that adapt to how users access Essembi.

Saving and Managing Charts

Saving Changes

After configuring a chart, click the Save or Save & Close button to apply your changes. Users must have appropriate role-based security permissions to modify chart configurations.

History

Use the History button to view who created the chart and track all subsequent modifications.

Undo and Redo

The settings dialog includes Undo and Redo buttons to easily revert or reapply changes during editing sessions.

Best Practices

Choosing the Right Chart Type

• Use Bar charts for comparing discrete categories
• Use Line charts for trends over time
• Use Pie/Doughnut charts for showing parts of a whole (limit to 5-7 categories)
• Use Stacked bars to show component breakdowns while comparing totals
• Use Metrics for highlighting single important values
• Use Labels to organize and explain dashboard sections

Performance Considerations

• Apply default filters to limit dataset size
• Use appropriate date groupings (avoid hourly grouping for year-long periods)
• Set reasonable auto-refresh intervals (avoid refreshing every minute if not needed)
• Consider data source performance when building complex calculations

Dashboard Layout

• Group related charts together
• Use consistent color schemes across charts
• Add labels to provide context and guide users
• Place the most important metrics prominently
• Test your dashboard on different devices if used across platforms