Adding data visualization scripts
To render data visualization report items such as charts, gauges and maps in the Bold Reports® ASP.NET Web Forms 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 |
|---|---|
| Gauge, Map, Chart | bold.reports.common.min.js |
To render the chart report item, add chart control script ej.chart.min.js before the bold.report-viewer.min.js reference in Default.aspx page as in the following code sample.
<link href="~/Content/bold-reports/v2.0/tailwind-light/bold.report-viewer.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" type="text/javascript"></script>
<script src="~/Scripts/bold-reports/v2.0/common/bold.reports.common.min.js"></script>
<script src="~/Scripts/bold-reports/v2.0/common/bold.reports.widgets.min.js"></script>
<!-- Report Viewer component script-->
<script src="~/Scripts/bold-reports/v2.0/bold.report-viewer.min.js"></script>The following code, which uses the CDN references, renders the chart, gauge and map report items in the Report Viewer.
<!-- Report Viewer component style -->
<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 scripts -->
<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>