How to import Custom Charts into a dashboard

[raghvendra.singh]

The custom component in the designer will enable users to add any third-party visual-components like charts/ grids/ gauges etc. into the dashboard, which can consume data from our inbuilt BDB connectors.

Configuration Steps:

1. Drag and drop custom chart in designer area.
   
2. Double click on it will open property palette, Go to General section.
   
   • Click on Source Path icon, add the source paths of required JavaScript and CSS files.
     
   • Click on Source Content icon will open an editor. In the HTML tab, add the html elements where the chart will be rendered or if additional html elements are required. In the CSS tab, add the required styles for formatting of chart’s elements. In the JS tab, add the script configuration code and configure the events callback etc. required in this chart.
     
3. A variable bizvizchart as reference to the Custom-Chart object is available to use in the custom-script.
   
4. By using bizvizchart reference, we can access the data and other properties of the custom-chart which are configured in the property palette.
   
5. Example: bizvizchart.getData(), bizvizchart.getFields(), bizvizchart.getWidth(), bizvizchart.getHeight().
   

Snapshots for the reference:
1. Custom Component in charting library


2. Drag and drop custom component in design area to render a chart thumbnail with static data


3. Property palette of the custom component to update title, subtitle etc.


4. JS and CSS source path configuration



5. JavaScript CSS and HTML content editor


6. Configure an Click event callback


7. Dataset palette configuration


8. Sample dashboard with multiple custom components in single dashboard.