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();
}
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.