Adding data visualization scripts
To render data visualization report items such as charts, gauges and maps in the Bold Reports® JavaScript Report Viewer, add the visualization scripts to the Report Viewer page. The following table shows the script reference that you need to add for data visualization elements.
| Visualization Item | Script File |
|---|---|
| Chart, Map, Gauge | bold.reports.common.min.js |
Use the following code to render the chart, gauge and map report items in the Report Viewer.
<!-- Report Viewer component styles -->
<link href="https://cdn.boldreports.com/15.1.10/content/v2.0/tailwind-light/bold.report-viewer.min.css" rel="stylesheet" />
<!-- Report Viewer component dependent script -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdn.boldreports.com/15.1.10/scripts/v2.0/common/bold.reports.common.min.js"></script>
<script src="https://cdn.boldreports.com/15.1.10/scripts/v2.0/common/bold.reports.widgets.min.js"></script>
<!-- Report Viewer component script -->
<script src="https://cdn.boldreports.com/15.1.10/scripts/v2.0/bold.report-viewer.min.js"></script>