Report Viewer SDK
Search results
PDF

Render data visualization report items

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 ej2-base.min.js, ej2-data.min.js, ej2-pdf-export.min.js, ej2-svg-base.min.js, ej2-lineargauge.min.js and ej2-circulargauge.min.js
Map ej2-maps.min.js
Chart ej.chart.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 \Views\Shared\_Layout.cshtml page as in following code sample.

<link href="~/Content/bold-reports/material/bold.reports.all.min.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-1.10.2.min.js" type="text/javascript"></script>
<script src="~/Scripts/bold-reports/common/bold.reports.common.min.js"></script>
<script src="~/Scripts/bold-reports/common/bold.reports.widgets.min.js"></script>

<!--Used to render the chart item. Add this script, only if your report contains the chart report item.-->
<script src="~/Scripts/bold-reports/data-visualization/ej.chart.min.js"></script>

<!-- Report Viewer component script-->
<script src="~/Scripts/bold-reports/bold.report-viewer.min.js"></script>

The following code can be used to render the chart, gauge and map report items in Report Viewer.

<link href="https://cdn.boldreports.com/3.2.22/content/material/bold.reports.all.min.css" rel="stylesheet" />
<script src="https://cdn.boldreports.com/external/jquery-1.10.2.min.js" type="text/javascript"></script>

<!--Render the gauge item. Add this script only if your report contains the gauge report item. -->
<script src="https://cdn.boldreports.com/3.2.22/scripts/common/ej2-base.min.js"></script>
<script src="https://cdn.boldreports.com/3.2.22/scripts/common/ej2-data.min.js"></script>
<script src="https://cdn.boldreports.com/3.2.22/scripts/common/ej2-pdf-export.min.js"></script>
<script src="https://cdn.boldreports.com/3.2.22/scripts/common/ej2-svg-base.min.js"></script>
<script src="https://cdn.boldreports.com/3.2.22/scripts/data-visualization/ej2-lineargauge.min.js"></script>
<script src="https://cdn.boldreports.com/3.2.22/scripts/data-visualization/ej2-circulargauge.min.js"></script>

<!--Render the map item. Add this script only if your report contains the map report item.-->
<script src="https://cdn.boldreports.com/3.2.22/scripts/data-visualization/ej2-maps.min.js"></script>

<script src="https://cdn.boldreports.com/3.2.22/scripts/common/bold.reports.common.min.js"></script>
<script src="https://cdn.boldreports.com/3.2.22/scripts/common/bold.reports.widgets.min.js"></script>

<!--Render the chart item. Add this script only if your report contains the chart report item.-->  
<script src="https://cdn.boldreports.com/3.2.22/scripts/data-visualization/ej.chart.min.js"></script>

<!-- Report Viewer component script-->
<script src="https://cdn.boldreports.com/3.2.22/scripts/bold.report-viewer.min.js"></script>