Using jqPlot plugins in PrimeFaces charts to draw lines on chart

Question

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?

score 6 · Accepted Answer · edited Jun 20 '20 at 09:12

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

1 Answers1

See also:

Linked