Custom Charts

The Custom Chart component allows users to integrate third-party visualizations directly into a dashboard. This provides flexibility to extend beyond the native chart library, enabling users to incorporate specialized visual components while consuming data from designer connectors.

Custom Charts support full interaction capabilities, including tooltips, drill events, and data binding, ensuring seamless integration with other dashboard components. Developers can configure JavaScript, CSS, and HTML sources to define both logic and styling for the chart.

Best Situations to Use

Use a Custom Chart when you want to:

• Embed specialized third-party visualization libraries (e.g., D3.js, Highcharts, Plotly).

• Extend dashboard functionality with non-native components.

• Create highly tailored visualizations for unique business requirements.

• Integrate advanced interactivity, animations, or visual behaviors beyond standard charts.

Not Recommended for:

• Standard reporting where built-in chart types are sufficient.

• Scenarios requiring strict compliance or minimal external dependencies.

Properties

General

• Component Name: Unique identifier for the custom chart instance.

• Left / Top: Defines placement of the chart on the dashboard canvas.

• Height / Width: Sets the size of the chart.

• Initial Visibility: Determines if the chart is displayed when the dashboard loads.

• Source Path: Defines paths to external JavaScript and CSS files required for the custom chart.

• Source Content:

  • HTML Tab: Place container elements where the chart will be rendered.

  • CSS Tab: Add custom styles for chart formatting.

  • JS Tab: Add the chart configuration logic, callback functions, and event handling.

Data Integration

• Dataset: Custom Charts can consume data from any designer connector.

• Fields: Define mappings between dataset fields and chart rendering logic.

Interactivity

• Tooltip: Supports tooltip configurations similar to native designer charts.

• Drill Events: Custom Charts can capture and respond to drill events.

Configuration Steps

1. Drag and Drop a Custom Chart component onto the designer canvas.

2. Click the Property Palette icon.

3. Navigate to the General section.

4. Click the Source Path icon and add paths for required JavaScript and CSS source files.

5. Open the Source Content option under General:

   • In the HTML Tab, add the HTML elements for rendering the chart.

   • In the CSS Tab, define the styles.

   • In the JS Tab, write chart initialization code and configure event callbacks.

6. Access chart properties using the bizvizchart reference object.

Developer Reference

The bizvizchart object is the Custom Chart reference within the dashboard. It provides methods to interact with the chart and access configuration data.

Common Methods

• bizvizchart.getData() → Returns dataset bound to the chart.

• bizvizchart.getFields() → Retrieves field mappings.

• bizvizchart.getWidth() / bizvizchart.getHeight() → Fetches current chart dimensions.

• bizvizchart.chartJson → Returns the full JSON configuration from the property palette.

Notes

• Always validate external JS and CSS sources for security and performance.

• Ensure responsive design by dynamically handling width/height values.

• Use consistent naming conventions for custom components to improve maintainability.

• Reuse configurations by exporting and sharing Custom Chart definitions across dashboards.