Tooltip in Dojo Charting appears outside of the chart

Question

The value for my tooltip appears outside of the chart at the bottom as text. I see a similar problem on the dojo tutorials eg. here..

https://dojotoolkit.org/documentation/tutorials/1.10/charting/demo/monthly-sales-legend.html

All my code seems to work okay and from various posts I get the impression a style sheet is missing, but I still can't seem to pinpoint it down. I have included a theme, incase one was required, but I don't need one.

Probably something simple, and I know there are similar issues posted on here, but I have lost all weekend on this one so any help would be greatly appreciated.

Customer Control.

    <xp:div id="chartContracts" style="width: 500px; height: 300px;padding-    top:8px"></xp:div>

<xp:scriptBlock id="scriptBlock2">
<xp:this.value><![CDATA[
require([
    "dojox/charting/Chart",
    "dojox/charting/plot2d/Columns",
    "dojox/charting/themes/Minty",
    "dojox/charting/action2d/Tooltip",
    "dojox/charting/axis2d/Default",        
    "dojo/number",
    "dojo/currency",
    "dojo/domReady!"                        
     ], 
    function(Chart,Columns,Minty,Tooltip) {
    var chart1 = new Chart("#{id:chartContracts}");

    chart1.addPlot("default",{type: Columns,gap:2}
    );
     var tip = new Tooltip(chart1,"default");
    // Add axes
   var varNames = #{contractBean.axisXAxis};
   var funcLabels = function(text) {
        return varNames[text];
    }
    chart1.addAxis("y", {vertical:true,});
   chart1.addAxis("x", {labelFunc:funcLabels, font:"normal normal normal 8pt Tahoma",minorTicks:true,rotation:-90, maxLabelCharCount:11,
   });
      chart1.setTheme(Minty);
     var data = #{contractBean.chartContractsData};
        for (var key in data) {
        chart1.addSeries(key, data[key]);
            };

    chart1.render();

});]]></xp:this.value>
            </xp:scriptBlock>

The Managed Bean providing the data, allContracts is a list of Contract objects, eg. cust name, value, profit etc.

public void setChartContracts(){
        JsonJavaArray jjaXAxis = new JsonJavaArray();
        JsonJavaObject jjoContracts = new JsonJavaObject();
        jjaXAxis.add("");
        ArrayList<Object> seriesContracts=new ArrayList<Object>();
        Iterator<Contract> it = allContracts.iterator();
        while(it.hasNext()){
            Contract entry = (Contract) it.next();
            Double actTO = entry.getActualTO();

            if(actTO >999.99){ //We only want contracts with a value greater than 999.99
            HashMap<String,Object> mapContracts = new HashMap<String,Object>();
            int actProfit = entry.getActualProfit().intValue();
            mapContracts.put("y",actProfit);
            String col = actProfit<0.00 ? "#ff1a1a" : "#00cc66"; //Colour the columns, green positive red negative.
            mapContracts.put("fill",col);
            mapContracts.put("stroke","");
            mapContracts.put("tooltip","£"+actProfit);
            seriesContracts.add(mapContracts);
            jjaXAxis.add(entry.getCustomerName());
            }
        }
    jjoContracts.put("contracts",seriesContracts);
    chartContractsData = jjoContracts.toString();
    System.out.println(chartContractsData);
    axisXAxis = jjaXAxis.toString();    
    }

Found it I think Per, I was trying to set up a new example for you, so created a new nsf and discovered it included another resource. It appears this style sheet is missing from all my existing applications. href="/xsp/.ibmxspres/.mini/css-1.9.7/@Da&@Ib&2Tfxsp.css&2TfxspLTR.css.css" Do you know why that would be? — Mark Maden
That CSS resource is a minified/aggregatedf version of several CSS files. If you disable "Use runtime optimized JS and CSS resources" then you should be able to pinpoint the exact file — Per Henrik Lausten
Ah, ticked "Use runtime optimized JS and CSS resources" in my production app, and it works. The problem is I have it unticked as I recall having a major issue with jquery Data Tables, something to do with XPages and AMD. So I may now have introduced other problems. — Mark Maden

Mark Maden Mark Maden · Accepted Answer · 2019-01-21T19:35:39

Had no luck in attempting to remove AMD as suggested by Per, everything is loaded in themes and I just couldn't get the various solutions to work. Therefore I cannot "Use runtime optimized JS and CSS resources' in my applications.

Managed to track down a style sheet which will overcome the problem.

/xsp/.ibmxspres/dojoroot-1.9.7/dijit/themes/tundra/tundra.css

Although the tooltips are pretty ugly. Having spent way to long on this it will have to do at the moment. Thought I would post the solution as even though it is not ideal it does work.

If anyone has a better solution, I would extremely grateful to see it.

Edit. I did manage to get the fix for AMD in my themes, - my resources had syntax in which worked when not in AMD mode,- they were missing the .js ,- I didn't realise it was stoping them working when selecting Use runtime optimized Javascript... So I was then able to apply the fix to the js DataTable libraries resources which were causing the problem. With help from here.. AMD Loader disable, enable in theme

Thought I would share in case anyone else wastes a chunk of their life on this issue.

Thanks Per, you were correct as always.

Tooltip in Dojo Charting appears outside of the chart

1 Answers