Weird conflict between jsflot and rich:tooltip
mohlendo Jan 31, 2012 8:03 AMI assume there's some sort of conflict with the generated Javascript. I'm using RichFaces 4.1.0 Final and JSFlot 0.7.0.
When I view the below page, nothing is displayed for the graph, and the jsflot javascript is never executed. However, if I delete the rich:tooltip element, the jsflot chart magically appears.
Any suggestions? Ideally I'd like to be able to use both tooltips and jsflot.
{code}
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:ez="http://java.sun.com/jsf/composite/ezcomp"
xmlns:a4j="http://richfaces.org/a4j"
xmlns:jsflot="http://www.jsflot.org/taglib/jsflot"
xmlns:rich="http://richfaces.org/rich">
<h:head>
<title>test</title>
<jsflot:resources />
</h:head>
<h:body>
<rich:panel>
<h:outputText id="textoutput" value="stuff" />
<rich:tooltip target="textoutput" mode="client" styleClass="tooltip"
layout="block">
<span><h:outputText value="tooltip" /></span>
</rich:tooltip>
</rich:panel>
<h:form id="graphForm" width="100%" height="100%"
style="background-color:#ff0000;">
<jsflot:flotChart width="800px" height="800px" id="manualPieChart"
chartDraggable="false" chartClickable="false" chartZoomable="false"
reRender="clickedPanel" showLines="false" showDataPoints="false"
chartType="pie" showXaxisLabels="false" showYaxisLabels="false"
markers="false" crosshair="false">
<jsflot:XYDataList color="#4ae815" fillLines="false" label="Label 1!"
markerPosition="ct" markers="false" showDataPoints="false"
showLines="false">
<jsflot:XYDataPoint x="1" y="20" pointLabel="p1l1"></jsflot:XYDataPoint>
</jsflot:XYDataList>
<jsflot:XYDataList color="#c515e8" fillLines="false" label="Label 2!"
markerPosition="ct" markers="false" showDataPoints="false"
showLines="false">
<jsflot:XYDataPoint x="1" y="40" pointLabel="p2l1"></jsflot:XYDataPoint>
</jsflot:XYDataList>
<jsflot:XYDataList color="#94ad07" fillLines="false" label="Label 3!"
markerPosition="ct" markers="false" showDataPoints="false"
showLines="false">
<jsflot:XYDataPoint x="1" y="40" pointLabel="p3l1"></jsflot:XYDataPoint>
</jsflot:XYDataList>
</jsflot:flotChart>
</h:form>
</h:body>
</html>{code}