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

    Weird conflict between jsflot and rich:tooltip

    mohlendo Newbie

      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}