JQplot Chart: Bar don't work with DateAxis

[ravihariharan]

1) Environment

• PrimeFaces version: 6.2
• Does it work on the newest released PrimeFaces version? Version? No
• Does it work on the newest sources in GitHub? (Build by source -> https://github.com/primefaces/primefaces/wiki/Building-From-Source) No
• Application server + version: Tomcat 8.5
• Affected browsers: All

2) Expected behavior

DateAxis support for Vertical Bar Chart #447
Bar charts don't work with DateAxis #100

Bar charts don't work with DateAxis.
...

3) Actual behavior

..

4) Steps to reproduce

   DateAxis axis = new DateAxis();
    axis.setTickFormat("%b-%Y");
    axis.setLabel("Month");
    // xAxis.setTickAngle(-50);
    model.getAxes().put(AxisType.X, axis);

..

5) Sample XHTML

No change to /showcase/src/main/webapp/ui/chart/bar.xhtml
..

6) Sample bean

Only change ChartView initBarModel()

    private BarChartModel initBarModel() {
        BarChartModel model = new BarChartModel();

        ChartSeries boys = new ChartSeries();
        boys.setLabel("Boys");
        boys.set("2004-01-01", 120);
        boys.set("2005-01-01", 100);
        boys.set("2006-01-01", 44);
        boys.set("2007-01-01", 150);
        boys.set("2008-01-01", 25);
        
        ChartSeries boys2 = new ChartSeries();
        boys2.setLabel("Boys");
        boys2.set("2004-01-01", 140);
        boys2.set("2005-01-01", 130);
        boys2.set("2006-01-01", 124);
        boys2.set("2007-01-01", 94);
        boys2.set("2008-01-01", 75);

        ChartSeries girls = new ChartSeries();
        girls.setLabel("Girls");
        girls.set("2004-01-01", 52);
        girls.set("2005-01-01", 60);
        girls.set("2006-01-01", 110);
        girls.set("2007-01-01", 135);
        girls.set("2008-01-01", 120);
        
        ChartSeries girls2 = new ChartSeries();
        girls2.setLabel("Girls 2");
        girls2.set("2004-01-01", 152);
        girls2.set("2005-01-01", 160);
        girls2.set("2006-01-01", 150);
        girls2.set("2007-01-01", 165);
        girls2.set("2008-01-01", 140);


        model.addSeries(boys);
        model.addSeries(girls);
        
        model.addSeries(boys2);
        model.addSeries(girls2);
        
        model.setLegendPlacement(LegendPlacement.OUTSIDEGRID);

        model.setTitle("Bar Chart");
        model.setLegendPosition("e");

        // Axis xAxis = model.getAxis(AxisType.X);

        DateAxis axis = new DateAxis();
        axis.setTickFormat("%b-%Y");
        axis.setLabel("Month");
        // xAxis.setTickAngle(-50);
        model.getAxes().put(AxisType.X, axis);
        
        
        return model;
    }

..

[melloware]

This was reported on Stack Overflow as well: https://stackoverflow.com/questions/51706674/why-are-the-bars-of-my-pchart-overlapping

[melloware]

Also possibly related: #2972

[melloware]

@ravihariharan How did you make the screenshot of what you "Expected" it to look like? did you use raw JqPlot and if so can you post the code here so we can see what is different about what PF is rendering.

[ravihariharan]

@melloware the sample expected was without the DateAxis code. i did not test with raw JqPlot .

[melloware]

@ravihariharan thanks for clarifying.

[melloware]

@ravihariharan did you ever try this with Charts.js to see if it gives you the output you expect?

[melloware]

jqPlot charts are being deprecated in PF10.0 for removal sometime in the future like PF13 or 14. So please migrate to ChartsJS which is the official charting library of PF now.