CODEWITHSUNDEEP
jqueryprimefacesjqplotbar-chart
user2012818
user2012818

Reputation: 1

How to customize a PrimeFaces bar chart property using jQuery or jqPlot

I am using PrimeFaces 3.2. If I am using the below XHTML file and want to customize the barChart legend position to the outside grid and modification in tooltip with customized message, how I can write the code where my data series values is still retrieved from View1.chartModel bean?

I am looking for actual code and steps...

<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
    xmlns:ui="http://java.sun.com/jsf/facelets"
    xmlns:f ="http://java.sun.com/jsf/core"
    xmlns:h ="http://java.sun.com/jsf/html"
    xmlns:p ="http://primefaces.org/ui">

    <h:head>
        <h:outputStylesheet name="style.css" library="css"/>
        <meta http-equiv="refresh"
              content="#{session.maxInactiveInterval};url=timeout.xhtml" />
    </h:head>

    <h:body>
        <p:ajaxStatus onstart="statusDialog.show();"
                      onsuccess="statusDialog.hide();"/>
        <p:dialog modal="false"
                  widgetVar="statusDialog"
                  header="Status"
                  draggable="false"
                  closable="false">
            <p:graphicImage value="/images/ajaxloadingbar.gif" />
        </p:dialog>

        <h:form id="ViewRep"
                style="padding:10px;">
            <p:growl id="messages"
                     showDetail="true"/>
            <p:growl id="growl"
                     showDetail="true"/>

            <div style="position:absolute;left:310px;top:620;width:920;height:360px;">

            <p:panel  id="pnl1"
                      header"Trend"
                      style="width:920;height:360px;"
                      toggleable="true"
                      closable="true"
                      toggleSpeed="500"
                      closeSpeed="500"
                      widgetVar="panel1">
                <p:barChart id="BarChart1"
                            value="#{View1.chartModel}"
                            widgetVar="bar1"
                            legendPosition="n"
                            barPadding="5"
                            barMargin="10"
                            style="width:98%;height:300px;" />
                </p:panel>
            </div>
        </h:form>
    </h:body>
</html>

Upvotes: 0

Views: 9335

Answers (1)

gokhansari
gokhansari

Reputation: 2439

I prefer to update your PrimeFaces version and then you should use extender, but if you don't want to update, you can run JavaScript code on your page load. Use plot to make changes on your chart.

An example for legend location:

  • First you should set your widgetVar="barChart" on your chart component:

    <p:barChart id="basic" value="#{chartBean.categoryModel}" widgetVar="barChart"
            title="Basic Bar Chart" min="0" max="200" style="height:300px"/>

  • Then write this JavaScript code on your page load.

    function redrawChart() { barChart.plot.legend.location="se"; barChart.plot.redraw(); }

Or call redrawChart() when you need it.

Good Luck!

Upvotes: 1

Related Questions