Customize primefaces chart

Question

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 ?

Answer 1

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 :)

Answer 2

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"/>