Using jqPlot plugins in PrimeFaces charts to draw lines on chart

I would like to draw some extra lines on my PrimeFaces (v5.3) chart, in particular on a linechart. Looking at the jqPlot example (PrimeFaces uses jqPlot to draw the charts), this example shows what I want to do.

I have used the approach described in this answer.

By setting an extender I am able to run my own javascript function, which allows me to change different types of configuration.

Java when creating the mode:

private LineChartModel initLinearModel()
{
    LineChartModel model = new LineChartModel();
    model.setExtender("chartExtender");

    LineChartSeries series1 = new LineChartSeries();
    series1.setLabel("Series 1");
    series1.set(1, 2);
    series1.set(2, 1);
    series1.set(3, 3);
    series1.set(4, 6);
    series1.set(5, 8);

    model.addSeries(series1);

    return model;
}

Xhtml:

<?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:h="http://java.sun.com/jsf/html"
    xmlns:p="http://primefaces.org/ui">

<h:outputScript library="jqplot-plugin"
    name="jqplot.canvasOverlay.min.js" />
<h:outputScript library="js" name="extra_config.js" />

<h:head>
    <title>Chart</title>
</h:head>

<h:body>

    <p:chart type="line" model="#{primeChart.lineModel1}"
        style="height:300px;" />

</h:body>

</html>

Javascript function:

function chartExtender() {
    this.cfg.grid = {
         background : '#888888',
    }
    this.cfg.canvasOverlay = {
            show: true,
            objects: [{horizontalLine: {
                        name: 'pebbles',
                        y: 3,
                        lineWidth: 2,
                        color: 'rgb(255, 55, 124)',
                        shadow: true,
                        lineCap: 'butt',
                        xOffset: 0
                    }}]
        };

}

The javascript function is being called, as the background is actually changed But I see no changes I try to use the canvas overlay. Here is the output of the example:

I understand the jqPlot version that comes with PrimeFaces does not include the overlay plugin. So I have downloaded the latest jqPlot release and included the overlay plugin in my script (it is being included by JSF). But I might have very well missed something, or be taking the right approach when using this plugin.

The firefox webconsole reports it is missing jquery. I have also tried to include jquery.min.js and jquery.jqplot.min.js (from the jqplot release), this removed the error, but does not show the horizontal line.

How do I include a jqplot plugin? How can I further debug this situation to see what is going wrong?

BalusC

Your concrete problem is caused by incorrect ordering of JavaScript resources which should already be hinted by those JS errors complaining jQuery couldn't be found and incorrect <script> ordering in generated HTML output as you could see via rightclick View Source in webbrowser. Basically, you loaded the jqPlot script before jQuery and PrimeFaces scripts by misplacing the <h:outputScript> before <h:head>.

If you move the <h:outputScript> inside <h:body> with a target="head" like below ...

<h:head>
    <title>Chart</title>
</h:head>
<h:body>
    <h:outputScript library="jqplot-plugin" name="jqplot.canvasOverlay.min.js" target="head" />
    <h:outputScript library="js" name="extra_config.js" target="head" />

    <p:chart type="line" model="#{primeChart.lineModel1}" style="height:300px;" />
</h:body>

... then magic will start to work.

Using jqPlot plugins in PrimeFaces charts to draw lines on chart

See also: