Adding data visualization scripts
To render data visualization report items such as charts, gauges and maps in the Bold Reports® ASP.NET MVC 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 |
Use the following code to render the chart, gauge and map report items in the Report Viewer, and add the references in the order given. You can replace the following code in your \Views\Shared\_Layout.cshtml page.
<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>