Visualize.JS Issue with HighCharts

When I incorporating tablular / crosstab reprort, it is working fine but when I change the report with HighCharts, it gives me error "Uncaught ReferenceError: highchartsOptions is not defined"

Please find my script below.

 

<script type="text/javascript" src="http://127.0.0.1/jasperserver-pro/client/visualize.js"></script>

 

<button id="button" class="hide">Refresh</button>

<button id="export" class="hide">Export</button>

<button id="reload" class="hide">Reload</button>

 

<div id="container">

</div>

 

 

   $(function () {

 

       visualize({

           auth: {

               name: "jasperadmin",

               password: "jasperadmin",

               organization: "organization_1"

           }

       }, function (v) {

           var report = v.report({

               resource: "/public/OccupancyDrillDown",

               container: "#container", 

               error: function (err) {

                   alert("Visualize JS error: " + err.message);

               }

 

 

 

 

           });

 

 

           function buildControl(name, options) {

               function buildOptions(options) {

                   var template = "<option>{value}</option>";

                   return options.reduce(function (memo, option) {

                       return memo + template.replace("{value}", option);

                   }, "")

               }

               console.log(options);

               if (!options.length) {

                   console.log(options);

               }

               var template = "<label>{label}</label><select>{options}</select><br>",

content = template.replace("{label}", name)

.replace("{options}", buildOptions(options));

               $("#container").append($(content));

           }

           $("#export").click(function () {

               //report.run(exportToPdf);

 

               report.export({ outputFormat: "pdf" }).done(function (link) {

                   window.open(link.href); // open new window to download report

               }).fail(function (err) {

                   alert(err.message);

               });

           });

 

           function exportToPdf() {

               report.export({ outputFormat: "pdf" }).done(function (link) {

                   window.open(link.href); // open new window to download report

               }).fail(function (err) {

                   alert(err.message);

               });

           }

 

           $("#button").click(function () {

 

               report.refresh().done(function () { console.log("Report Refreshed!"); }).fail(function () { alert("Report Refresh Failed!"); });

           });

 

           $("#reload").click(function () {

 

               report.refresh().done(function () { console.log("Report Refreshed!"); }).fail(function () { alert("Report Refresh Failed!"); });

           });

 

           $("#reload").show();

           $("#button").show();

           $("#export").show();

 

       });

   });

 

It solved now. I manually read the jrxml file and delete the hyperlinke code. After that it started working.

Thanks for your support.