akonkin

Question:I am using the HTML5 charts, assume a simple pie chart is rendered and on the click of each pie I want to invoke a UI from my application. What the possibilities from visualize.js that can be useful to hook on to handle it in my application? I'd also like to pass some data from the chart to the application (i.e. bucket list part). I think the hyperlink can help but it seems that does not work when the charts are rendered in the application using visualize.js. Answer:For hyperlink to work you need to specify separate code which is defined in TIBCO JasperReports Server visualize guide, the chapter "API Usage Report links". I am mentioning a link of js-fiddle which shows similar option of drill down. You need to refer this and implement your solution according to the sample at: http://jsfiddle.net/t51bw3je/21/

Question:We are facing problems while rendering reports using visualize.js. We rendering multiple reports(6 reports) in a single page which is developed in php+visualize.js. The problem is, all reports are not getting displayed, instead only one report is getting displayed. Below is the error observed while generating the report: [toc][bi/report/Report] [visualize.js:50] [ERROR] - resource.not.found : Resource d1edc765-37db-424b-b5ae-469492ec4e0f not found.[/code]What is the reason of this error and how it could be fixed? Answer:Please double check if your reports are present in your JasperReports Server instance and you have enough permissions to work with them via viaualize.js API. Quoting the relevant information about this error message below: resource.not.found Message Resource not found in RepositoryDescription Resource not present in Repository or user havent permissions to read it[/code]For the details about this error please refer to the official documentation.

Question:I am looking for an auto resize option for HTML5 chart. I've set the property 'reflow' to true and rendered the chart using visualize.js. But the chart not re-sizing based on window resize. How can I do this? Answer:You may try to use scale: container option. I am referring a link below where you could add your own report and url. http://jsfiddle.net/alexkonkin/4utcdmsc/

QuestionHow can I access the show/hide column function from visualize.js? We have a (huge) table which we want to dynamically reduce by hiding extra columns according to the context the table is displayed in. Answer(27.04.2017, the current version is 6.3.0): This feature has not been implemented in the sofwtare yet. There is a pending enhancement request that is dedicated to the implementation of this feature in the software.

Question:How can I get the number of total pages from a report? Answer:Please refer to the jsfiddle sample below http://jsfiddle.net/gh/get/mootools/1.5.1/TIBCOSoftware/JS-visualize/tree/master/report-pagination/page-event/ It illustrates the page navigation option. It doesn't have the last option but if you see initial code there is a variable totalPages which has the last page value stored. You can read more about totalPages property in TIBCO JasperReports® Server Visualize.js Guide: http://community.jaspersoft.com/documentation/tibco-jasperreports-server-visualizejs-guide/v60/api-reference-report#Report_Structure If the fiddle above is not available for some reasons, please find the informaton about javascript tabhtml tabjavascript external libraries in the attachment to this article

Question:How to secure the password that is used in communication between a web application and jasper server via Visualize.js API? Answer:This depends on the security / sofware features that are available in your enviornment. In short, you can use: log in with SSO tokenlog in with Hooks (if you have external authentication providers)You can read about both metods above as an alternative to the plain text login in the TIBCO JasperReports® Server Visualize Guide, Chapter 2 API Reference - login and logout.

Question: a) How can I traverse through the Repository structure, find the reports in some folder and render their names? b) Are report unit names / newly created report unit names cached somewhere in Repository or Visualize.js internal cache? Answers: a) To render a list of reports via Visualize.js you should: use visualize API function resourcesSearch to perform the search operation, the values below should be passed as the parameters for this function (the current version of API is 6.3.0): recursive: true/false, defines if a search operation is recursive or not types: here should be mentioned a type of resource, etc ["reportUnit"] success: a name of the function that should be executed on Success error: a name of the error handler function should be stated here create a JavaScript function that should be executed in case of successful execution of resourcesSearch API call create a JavaScript function work as an error handler in case if the resourcesSearch API call finishes with the error This part of the question is illustrated with the: Fiddler sample, please see the URL below: http://jsfiddle.net/alexkonkin/wtvxhbkb/10/ the exported folder that contains a dummy sql based report that should be exported to your instance of JasperReports Server. By default this report uses JServerJNDIDS (the default name of JNDI data source for JasperReports Server repository). You can connect this report to any other data source or alternatively give a different path to the folder that contains report units in your environment (let’s say Public folder) Quoting the JavaScript part of this solution below: visualize({ auth: { name: "superuser", password: "superuser" } }, function (v) { v.resourcesSearch({ folderUri: "/public/case_01460846", recursive: true, types: ["reportUnit"], success: renderResults, error: function (err) { alert(err); } }); // utility function function renderResults(results) { var tbody = document.getElementById("ResultsTableContent"), alt = false, html = []; for (var i = 0; i < results.length; i++) { html.push((alt = !alt) ? '<tr>' : '<tr class="alt">'); html.push("<td>" + results.label + "</td>"); html.push("<td>" + results.uri + "</td>"); html.push("<td>" + results.resourceType + "</td>"); html.push("<td>" + results.creationDate + "</td>"); html.push("</tr>"); } tbody.innerHTML = html.join(""); } }); Quoting the HTML part of this solution below: <!--Provide URL to visualize.js--> <script type="text/javascript" src="http://localhost:8630/jasperserver-pro/client/visualize.js?_opt=true"></script> <div class="datagrid"> <table> <thead> <tr> <th>Label</th> <th>URI of resource</th> <th>Type</th> <th>Created</th> </tr> </thead> <tbody id="ResultsTableContent"> </tbody> </table> </div> Quoting CSS part of this solution below (you can skip this part and design your own css style): .datagrid table { border-collapse: collapse; text-align: left; width: 100%; } .datagrid { font: normal 12px/150% Arial, Helvetica, sans-serif; background: #fff; overflow: hidden; border: 1px solid #006699; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; } .datagrid table td, .datagrid table th { padding: 3px 10px; } .datagrid table thead th { background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #006699), color-stop(1, #00557F)); background:-moz-linear-gradient(center top, #006699 5%, #00557F 100%); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#006699', endColorstr='#00557F'); background-color:#006699; color:#FFFFFF; font-size: 15px; font-weight: bold; border-left: 1px solid #0070A8; } .datagrid table thead th:first-child { border: none; } .datagrid table tbody td { color: #00496B; border-left: 1px solid #E1EEF4; font-size: 12px; font-weight: normal; } .datagrid table tbody .alt td { background: #E1EEF4; color: #00496B; } .datagrid table tbody td:first-child { border-left: none; } .datagrid table tbody tr:last-child td { border-bottom: none; } .datagrid table tfoot td div { border-top: 1px solid #006699; background: #E1EEF4; } .datagrid table tfoot td { padding: 0; font-size: 12px } .datagrid table tfoot td div { padding: 2px; } .datagrid table tfoot td ul { margin: 0; padding:0; list-style: none; text-align: right; } .datagrid table tfoot li { display: inline; } .datagrid table tfoot li a { text-decoration: none; display: inline-block; padding: 2px 8px; margin: 1px; color: #FFFFFF; border: 1px solid #006699; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #006699), color-stop(1, #00557F)); background:-moz-linear-gradient(center top, #006699 5%, #00557F 100%); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#006699', endColorstr='#00557F'); background-color:#006699; } .datagrid table tfoot ul.active, .datagrid table tfoot ul a:hover { text-decoration: none; border-color: #006699; color: #FFFFFF; background: none; background-color:#00557F; } div.dhtmlx_window_active, div.dhx_modal_cover_dv { position: fixed !important; } You should modify the JavaScript part of the solution above to adopt it to your JasperReports Server installation: please see the auth section, name and password parameters You should modify the HTML part of the solution above: please see the very beginning of HTML section, <script type="text/javascript" src=" you should update it to point to your JasperReports Server deployment b) according to the information that I've gotten from our developers visualize.js does not have cache, so you should be able to see any reports including newly created ones as soon as they appear in your JasperReports Server Repository Please find in the attachment to the case an exported version of the report that is used in my solution.

Question: I have a field on a table with a hyperlinkReferenceExpression defined. If this report is put on a dashboard or is run in studio as an interactive report the hyperlinks work fine. However, when hosted as a stand alone report in its own web page (also in JSFiddle) the field looks like a hyperlink but behaves as a standard text field. Please see the relevant part from visualize code below: visualize({ auth: { name: "jasperadmin", password: "jasperadmin", organization: "organization_1" }}, function (v) { //render report from provided resource v("#container").report({ resource: "/reports/Production/Dashlet_Details/Oracle/Actions_Details", error: handleError }); //show error function handleError(err) { alert(err.message); }});[/code] Answer: In the visualize.js it is not enough to run the report to use hyperlink functionality. You should define the behavior of hyperlinks via visualize code. For more details please read Visualize guide, CHAPTER 9 API USAGE - HYPERLINKS https://docs.tibco.com/pub/js-jrs/6.2.1/doc/pdf/JasperReports-Server-Visualize.js-Guide.pdf Below I quote a snippet of JavaScript Code that should enable hyperlinks functionality in the test report (please find the report in the attachment to the article): function (v) {v("#container").report({resource: "/public/case_01459246/Actions_Details",linkOptions: {beforeRender: function (linkToElemPairs) {linkToElemPairs.forEach(showCursor);},events: {"click": function(ev, link){ev.stopPropagation();if (link.type == "Reference"){window.open(link.href);}console.log(link);}}},error: function (err) {alert(err.message);}});function showCursor(pair){var el = pair.element;el.style.cursor = "pointer";}});[/code]Please pay your attention to the line: ev.stopPropagation();[/code]This line allows to disable Table Component's JIVE menu that appears after the click on the hyperlink that is present in table's data, please refer to the screenshot below: Please find in the attachment to the article: - a sample report that can be exported to your instance of JasperReports Server. The sample is based on dummy sql and JServerJNDIDataSource (the standard name of connection to the Repository database). You can reconnect the report to any other data source that is available in your environment or update a name of the data source for your Repository if it differs from the default one. - visualize JS sample is represented by html page that also contains JavaScript code. To use it you should update all definitions of IP address of JasperReports Server that is available in your environment.

Question:I would like to utilize Export button in my Dashboard's dashlet via visualize.js. When I designed a JavaScript part of my solution, executed it and tried to click the export button I got the result that you can see in the screenshot below: It appears that the menu is shown distanced from the Export button (instead of being shown below the button) and looks a bit different than in original JasperReports Server web user interface, the menu items are not clickable. What is the reason of this? How to fix this? Answer:The reason of this behavior is the bug that was introduced in the v. 6.3.0 of the software. This bug is expected to be fixed in the v. 6.4.0 of the software.

Question:We created a dashboard using fusioncharts.js and highcharts.js. We have enabled cache setting in jasper's tomcat with expiry time for all the types. When we call the dashboard for the first time using visualize.js and monitor the chrome network console, we observed that more than 500 requests are initiated to render the dashboard in a page. We have done almost everything like enabling cache, query fine tuning from our side to load dashboard faster. What is the reason of this behavior? How can we fix this and boost the work of visualize.js? Answer:Let's take a look at the HAR file that contains the log of activity between your browser and visualize.js/JasperReports Server: Judging by the screenshot above you are using non-optimized version of visualize.js (the scripts part in the URL instead of optimized-scripts). That means that the non optimized scripts are used on JasperReports Server side of the solution, please refer to the screenshot below: To boost the performance of the application and visualize.js you should use its optimized version. Quoting the information from the Visualize.js 6.3.0 guide, page 8, about how to enable optimization: To turn on optimization and reduce side-effects such as this one, set the optimize flag when you load Visualize.js, as shown in the following example: <script src="http://bi.example.com:8080/jasperserver-pro/client/visualize.js?_opt=true"></script>[/code]

Problem 1:We have got the error when tried to run visualize.js v. 6.0.0 based solutioin. Visualize is not defined. Please refer to the screenshot below: [toc] Solution to the Problem 1:The error is caused by a bug in the optimized version of visualize.js v. 6.0.0. Possible workarounds for this bug:Turn off JavaScript optimization by add following parameter to URI _opt=false so your URI for visualize.js should look like: https://localhost:8080/jasperserver-pro/client/visualize.js?logLevel=debug&_opt=false Give a try to re-run our JavaScript optimizer, please find the details here: http://community.jaspersoft.com/documentation/jasperreports-server-ultimate-guide/v561/customizing-javascript-files This bug was fixed in the v. 6.1.0, the upgrade to the version above can also help you to fix this problem Problem 2:It seems that setting the paginated flag has no effect. We are reasonably certain it is a valid parameter. Please see the code snippet below: function exportReport(){ $scope.selectedReport.reportObj.export({ outputFormat: selectedOption.format, paginated: false })[/code]Solution to the Problem 2:Pagination property is deprecated and affected by the bug. In order to deal and manage pagination feature of your report, I would recommend to perform the upgrade to the v. 6.2.0 of the product and use a bit different property (ignorePagination) to disable pagination in your report. For the details please refer to the community article: http://community.jaspersoft.com/wiki/visualizejs-jasperreports-server-620-and-pagination-feature

Question:I am facing some issues with D3 chart libraries. I have created D3 bubble chart and its working perfectly fine on our Jasper Server. But its throwing some visualize.js error while running on our Reporting Application. Answer (the relevant product version is 6.2.*):The reason of failure to render your Custom Visualization Component via visualize.js feature is related to the fact that the optimized version of your JavaScript file does not contain visualize wrapper. Please see the screenshot below: I suppose that this wrapper is not present in your optimized script because it is also absent in your build file (build.js). Below I quote a sample of the build.js file that is supplied with the Studio's sample: ({//optimize: 'none', // Uncomment this property to disable the uglify of the librariesbaseUrl: '',paths: { 'd3': 'd3.min' , 'd3Circle': 'cvc_test' }, wrap: { start: "if (typeof define === 'function' && define.amd){}nelse if (typeof __visualize__ !== 'undefined' &&ntypeof __visualize__.define === 'function')n{n}nn(function(root){nnvar define = root.define;nn", end: "nn}(typeof __visualize__ != 'undefined' ? __visualize__ : window));"},name: "d3Circle",out: "cvc_test.min.js"})[/code]Please pay your attention to the lines that start from: wrap: { You should add to your build file the "wrap" task and then rebuild your project again. I have checked this idea with one of the samples that were available in my environment and this step (adding wrap task) to the build.js file allowed me to render my sample via visualize.js. P.S.:With JasperStudio are supplied pre-created templates of projects that utilize custom visualization component (CVC). If you don’t know from which point to start your work on such solution you may want to create a stub for the project and then after you assured that this sample works in studio and server update it with some modifications. To generate a sample from the pre-created project: run JasperStudio select File->New->Other select one from the three templates that are available for you give a name for your project click Next button and complete the project creation dialogue: After this you can target your mouse to the build.js file, right click on this file and select “Build component” item from the context menu to build it:

Symptom:"I have successfully been using the custom component for Google analytics component tGoogleAnalyticsInput. We have built a number of processes around this. I have loaded the component into an area When he loads the process we get the error wording: ! Some Component are not loaded:tGoogleAnalyticsInput[/code]and the component has been marked with a red cross. I have added the folder in the same way that I have but we get the same error and the component does not appear in the palette." Solution:The folder that you used to store the custom component was on a remote directory. When the custom component folder was moved on the server where the studio had been installed, it worked OK.

Symptom(v. 6.3.0): Visualize.js incompatible with jquery simplyscroll plugin The scroller works when visualize.js is not loaded and visualize.js works if the scroller is not on the page. Quoting the relevant snippet of JavaScript source code: $(document).ready(function() { Loader.loadCssFileOnDemand("css/simplyScroll.css"); Loader.loadJsFileOnDemand("thirdparty/jquery/plugins/simplyscroll/jquery.simplyscroll.min.js"); $('ul.tickerEasy').children().not('li').remove(); $(function() { $('#Id_ticker8DAA1B3D554F79CE58F4C4B8474C0947CBAF3B5C').find('ul').simplyScroll({ speed : 1, orientation : 'vertical', direction : 'forwards', pauseOnHover: true, auto : true }); }); });Quoting the error message that is caused by the code above: Javascript error message TypeError: $(...).find(...).simplyScroll is not a function http://jlr-dev.principlereach.com/jlr_dev/script/html/concat/all.js?usn=247424666 line 1 > eval Line 8 Solution:Plesae use the optimized version of Visualize.js. To use optimized version of visualize.js feature you should add _opt=true parameter. <script src="http://bi.example.com:8080/jasperserver-pro/client/visualize.js?_opt=true"></script> Please refer to the relevant documentation for the detailed explanation concerning this adjustment (Visualize.js Guide 6.3.0, page 8): Please be informed that this plugin has been announced as obsolete by its vendor: http://logicbox.net/jquery/simplyscroll/

[toc on_off::hide=1]Question:I've customized some JavaScript files, after this I tried to optimize JavaScript soruce code according to the documentation. When I executed the command below, I got the error. D:Working>nodejsnode r.js -o js-sourcesscriptsbuild.js appDir=js-sourcesscripts baseUrl=.optimize=uglify2 dir=js-optimization-outputError: Error: ERROR: module path does not exist:D:/Working/js-sources/scripts/.optimize=uglify2/adhoc.start.page.js for module named: adhoc.start.page. Path is relative to: D:/Working at D:Workingr.js:25264:35[/code]screenshot with error: What is the reason of this error? How can I fix it? Explanation:This error was generated because the text of the command was copied from the documentation as is and one space that separates two keys in the command is absent Solution:Please separate two keys in the command with the space to fix the problem.