CODEWITHSUNDEEP
jsfprimefaceschartsjqplot
or123456
or123456

Reputation: 2199

Customize primefaces chart

I using of primefaces's chart on my project.

I know be primefaces's chart use of jqplot .

on jqplot's site exist example of customizing jqplot chart.

how to use of example codes for customizing primefaces chart ?

sample code for customizing jqplot chart is following :

$(document).ready(function () {
$.jqplot._noToImageButton = true;
var plot1 = $.jqplot("chart1", [prevYear, currYear], {
    seriesColors: ["rgba(78, 135, 194, 0.7)", "rgb(211, 235, 59)"],
    title: 'Monthly TurnKey Revenue',
    highlighter: {
        show: true,
        sizeAdjust: 1,
        tooltipOffset: 9
    },
    grid: {
        background: 'rgba(57,57,57,0.0)',
        drawBorder: false,
        shadow: false,
        gridLineColor: '#666666',
        gridLineWidth: 2
    },
    legend: {
        show: true,
        placement: 'outside'
    },
    seriesDefaults: {
        rendererOptions: {
            smooth: true,
            animation: {
                show: true
            }
        },
        showMarker: false
    },
    series: [
        {
            fill: true,
            label: '2010'
        },
        {
            label: '2011'
        }
    ],
    axesDefaults: {
        rendererOptions: {
            baselineWidth: 1.5,
            baselineColor: '#444444',
            drawBaseline: false
        }
    },
    axes: {
        xaxis: {
            renderer: $.jqplot.DateAxisRenderer,
            tickRenderer: $.jqplot.CanvasAxisTickRenderer,
            tickOptions: {
                formatString: "%b %e",
                angle: -30,
                textColor: '#dddddd'
            },
            min: "2011-08-01",
            max: "2011-09-30",
            tickInterval: "7 days",
            drawMajorGridlines: false
        },
        yaxis: {
            renderer: $.jqplot.LogAxisRenderer,
            pad: 0,
            rendererOptions: {
                minorTicks: 1
            },
            tickOptions: {
                formatString: "$%'d",
                showMark: false
            }
        }
    }
});

  $('.jqplot-highlighter-tooltip').addClass('ui-corner-all')
});

example link 1

how to use of above code on primefaces chart ?

Upvotes: 4

Views: 12922

Answers (3)

Aviad
Aviad

Reputation: 1549

When you use extender you can change everything by js.

Here is an example

<p:lineChart ... extender="chartExtender"/>

And on js file or in the page under Tag:

function chartExtender() {        
 // this = chart widget instance        
 // this.cfg = options        
 this.cfg.grid = {             
        background: 'transparent',
         gridLineColor: '#303030',
         drawBorder: false,
    };
  }

This is just an example.. This will help you to do the rest.

For more recent PF versions, check What is the alternative for the chart extender attribute in PrimeFaces 5.2 and newer Hope that helps :)

Upvotes: 10

Jasper de Vries
Jasper de Vries

Reputation: 20178

I didn't bother to customize the PrimeFaces charts. I opted to use Google charts in my JSF application. It's highly customizable and it's rendered as SVG so additionally you can use CSS to style your graphs. You can have a look at the GChart PrimeFaces extension or simply load the JavaScript customize everything (it's easy and well documented).

Upvotes: 0

LegendzRider
LegendzRider

Reputation: 76

Have you upgraded to Primefaces 5.0? Primefaces actually redid its chart api so that you are now able to add these customizations directly from your beans without having to deal with jplot. Also, the older versions of charts will be deprecated in the future so it is a good idea to switch.

If you still insist on dealing with the older version of the charts, what you have to do is make your chart extend the function by using the extender option 

<p:lineChart ... extender="nameOfFunction"/>

Upvotes: 2

Related Questions