Friday, April 11, 2014

Jaspersoft Shared/Common Tooltip for non mutli-axis/single axis graphs (HTML5)

We were facing this problem wherein we needed four measures to be shown on the same graph (line graph). By default jaspersoft has two chart types, single axis and multi axis. The single axis graph shows only one y axis and one has to hover/move from one measure to the other to view the data in the tooltip.

This was very inconvenient for the end users as they were not able to see all the measures in a single tooltip for the same point on the x axis (date in our case) making it difficult for them to compare the data for all the measures on the graph.

We tried using multi axis chart which by default has a shared tooltip, but shows myltiple y axis which we did not need  as it was useless for us as  one, all measures were comparable to each other and two, it gave  a very wrong impression to the end user as a graph with a very low value could appear over a graph with a very high values due to difference in scales. This created a lot of confusion.

We tried all the forums and blogs but did not get an answer so decided to get our hands dirty. Turns out the fix/change is very easy (it took me 3 days though).

For those who do not know jaspersoft uses highcharts as the charting library for dynamic (HTML5) charts. The highcharts API has a property called "shared" for "tooltip". If we enable this the tooltip becomes shared. So we just needed to find the js file where it was being set and we found it :) .

Go to file scripts/adhoc/highchart.datamapper.js, method name "getCommonSeriesGeneralOptions", line number 342 and change

options.tooltip.shared = HDM.isDualOrMultiAxisChart(extraOptions.chartState.chartType);
to
options.tooltip.shared = true;

Beware, this will make the tooltip shared for all the graphs. If you want more granularity then u need to create another method similar to  HDM.isDualOrMultiAxisChart() and return true or false accordingly.


5 comments:

  1. Where is this file scripts/adhoc/highchart.datamapper.js

    I searched it in both my Workspace and Program Files.

    ReplyDelete
  2. This path is on the Jasper Server inside the webapps folder of tomcat or whichever servlet container you are using for Jasper Server. This is NOT for iReport or any other desktop designing tool.

    ReplyDelete
  3. Hi,

    I tried to implement this and also wanted to add datalabels to the PieChart in AdHoc.
    I made changes to the file scripts/adhoc/highchart.datamapper.js and restartet tomcat7. Unfortunatly no effec. Do you have an idea why?

    Thanks.

    ReplyDelete
  4. Open the developer toolbar in your browser. Look for the js file in which you have edited and open its source and see if your changes are reflecting.

    In case you have not cleared your cache, try clearing your browser cache.

    ReplyDelete