Adding data visualization scripts

To render chart, gauge and map report items in the Bold Reports® ASP.NET MVC Report Designer less than v5.2.xx, add the scripts of each visualization element to the Report Designer page. The following table shows the script references to add for each data visualization element.

The following steps apply to Bold Reports® Designer version less than v5.2.xx. In Bold Reports® Report Designer versions above v5.2.xx, bold.reports.common.min.js and bold.reports.widgets.min.js handle the data visualization, so no additional script references are required.

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 the following code sample.

<link href="https://cdn.boldreports.com/15.1.10/content/material/bold.reports.all.min.css" rel="stylesheet" />
<link href="https://cdn.boldreports.com/15.1.10/content/material/bold.reportdesigner.min.css" rel="stylesheet" />
<script src="https://cdn.boldreports.com/external/jquery-1.10.2.min.js" type="text/javascript"></script>
<script src="https://cdn.boldreports.com/external/jsrender.min.js" type="text/javascript"></script>
<script src="https://cdn.boldreports.com/15.1.10/scripts/common/bold.reports.common.min.js"></script>
<script src="https://cdn.boldreports.com/15.1.10/scripts/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="https://cdn.boldreports.com/15.1.10/scripts/data-visualization/ej.chart.min.js"></script>

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

<!-- Report Designer component script-->
<script src="https://cdn.boldreports.com/15.1.10/scripts/bold.report-designer.min.js" type="text/javascript"></script>

Use the following code to render the chart, gauge and map report items in the Report Designer.

<link href="https://cdn.boldreports.com/15.1.10/content/material/bold.reports.all.min.css" rel="stylesheet" />
<link href="https://cdn.boldreports.com/15.1.10/content/material/bold.reportdesigner.min.css" rel="stylesheet" />
<script src="https://cdn.boldreports.com/external/jquery-1.10.2.min.js" type="text/javascript"></script>
<script src="https://cdn.boldreports.com/external/jsrender.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/15.1.10/scripts/common/ej2-base.min.js"></script>
<script src="https://cdn.boldreports.com/15.1.10/scripts/common/ej2-data.min.js"></script>
<script src="https://cdn.boldreports.com/15.1.10/scripts/common/ej2-pdf-export.min.js"></script>
<script src="https://cdn.boldreports.com/15.1.10/scripts/common/ej2-svg-base.min.js"></script>
<script src="https://cdn.boldreports.com/15.1.10/scripts/data-visualization/ej2-lineargauge.min.js"></script>
<script src="https://cdn.boldreports.com/15.1.10/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/15.1.10/scripts/data-visualization/ej2-maps.min.js"></script>

<!-- Report Designer component script-->
<script src="https://cdn.boldreports.com/15.1.10/scripts/common/bold.reports.common.min.js"></script>
<script src="https://cdn.boldreports.com/15.1.10/scripts/common/bold.reports.widgets.min.js"></script>
<script src="https://cdn.boldreports.com/15.1.10/scripts/common/bold.report-designer-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/15.1.10/scripts/data-visualization/ej.chart.min.js"></script>

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

<!-- Report Designer component script-->
<script src="https://cdn.boldreports.com/15.1.10/scripts/bold.report-designer.min.js" type="text/javascript"></script>

See also