To render the report with data visualization components such as chart, gauge and map items, must add scripts of the visualization element. The following table shows the script reference that need to be added in Report Viewer page for data visualization elements.
| Visualization Item | Script File |
|---|---|
| Gauge, Map, Chart | bold.reports.common.min.js |
The following code can be used to render the chart, gauge and map report items in Report Viewer, add the listed references in the same order given in above list. 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 can be used to render the chart, gauge and map report items in Report Viewer.
<!-- Report Viewer component style -->
<link href="https://cdn.boldreports.com/6.3.24/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/6.3.24/scripts/v2.0/common/bold.reports.common.min.js"></script>
<script src="https://cdn.boldreports.com/6.3.24/scripts/v2.0/common/bold.reports.widgets.min.js"></script>
<!-- Report Viewer component script -->
<script src="https://cdn.boldreports.com/6.3.24/scripts/v2.0/bold.report-viewer.min.js"></script>