2 Replies Latest reply on Jan 31, 2012 7:28 PM by healeyb

    Weird conflict between jsflot and rich:tooltip

    mohlendo
    mohlendo Jan 31, 2012 8:03 AM

      I 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}