Charts Bug createStackedBarModel

Forum rules
Please note that response time for technical support is within 3-5 business days.
Post Reply
User avatar
ajotta
Posts: 71
Joined: 16 Feb 2016, 13:41
Location: Brasil
Contact:

24 May 2022, 19:46

I made a simulation with the Stacked chart showcase code and see the result with primefaces 11.0.4

Code: Select all

<h5>Stacked</h5>
<p:barChart model="#{dashboardMB.stackedBarModel}" style="width: 100%; height: 500px;"/>

Code: Select all

    public void createStackedBarModel() {
        stackedBarModel = new BarChartModel();
        ChartData data = new ChartData();

        BarChartDataSet barDataSet = new BarChartDataSet();
        barDataSet.setLabel("Dataset 1");
        barDataSet.setBackgroundColor("rgb(255, 99, 132)");
        List<Number> dataVal = new ArrayList<>();
        dataVal.add(62);
        dataVal.add(-58);
        dataVal.add(-49);
        dataVal.add(25);
        dataVal.add(4);
        dataVal.add(77);
        dataVal.add(-41);
        barDataSet.setData(dataVal);

        BarChartDataSet barDataSet2 = new BarChartDataSet();
        barDataSet2.setLabel("Dataset 2");
        barDataSet2.setBackgroundColor("rgb(54, 162, 235)");
        List<Number> dataVal2 = new ArrayList<>();
        dataVal2.add(-1);
        dataVal2.add(32);
        dataVal2.add(-52);
        dataVal2.add(11);
        dataVal2.add(97);
        dataVal2.add(76);
        dataVal2.add(-78);
        barDataSet2.setData(dataVal2);

        BarChartDataSet barDataSet3 = new BarChartDataSet();
        barDataSet3.setLabel("Dataset 3");
        barDataSet3.setBackgroundColor("rgb(75, 192, 192)");
        List<Number> dataVal3 = new ArrayList<>();
        dataVal3.add(-44);
        dataVal3.add(25);
        dataVal3.add(15);
        dataVal3.add(92);
        dataVal3.add(80);
        dataVal3.add(-25);
        dataVal3.add(-11);
        barDataSet3.setData(dataVal3);

        data.addChartDataSet(barDataSet);
        data.addChartDataSet(barDataSet2);
        data.addChartDataSet(barDataSet3);

        List<String> labels = new ArrayList<>();
        labels.add("January");
        labels.add("February");
        labels.add("March");
        labels.add("April");
        labels.add("May");
        labels.add("June");
        labels.add("July");
        data.setLabels(labels);
        stackedBarModel.setData(data);

        //Options
        BarChartOptions options = new BarChartOptions();
        CartesianScales cScales = new CartesianScales();
        CartesianLinearAxes linearAxes = new CartesianLinearAxes();
        linearAxes.setStacked(true);
        linearAxes.setOffset(true);
        cScales.addXAxesData(linearAxes);
        cScales.addYAxesData(linearAxes);
        options.setScales(cScales);


        Title title = new Title();
        title.setDisplay(true);
        title.setText("Bar Chart - Stacked");
        options.setTitle(title);

        Tooltip tooltip = new Tooltip();
        tooltip.setMode("index");
        tooltip.setIntersect(false);
        options.setTooltip(tooltip);

        stackedBarModel.setOptions(options);
    }
See that it ungroups the bars, it's not like in the demo.
https://imgur.com/YBvKHQ3

https://www.primefaces.org/showcase/ui/ ... fwid=e8f1e

See the example in production the before and after

With Primefaces 10.0.7
https://www.loom.com/share/ca3919221a15 ... e41843cf2b

With Primefaces 11.0.4
https://www.loom.com/share/e9c0ac3e7df9 ... 19deb49c6a

Dependency

Babylon-theme5.1.0
Primefaces11.0.4
--
Jarciano Silva
CEO - Chief Executive Officer
ajotta | https://ajotta.com

mert.sincan
Posts: 5281
Joined: 29 Jun 2013, 12:38

25 May 2022, 12:14

Hi,

This issue is not related to theme or layout. I think it is related to https://github.com/primefaces/primefaces/issues/6812. Could you please check the changes in it?

Best Regards,

User avatar
ajotta
Posts: 71
Joined: 16 Feb 2016, 13:41
Location: Brasil
Contact:

25 May 2022, 12:31

Hi,

Sorry, I didn't understand your answer very well, if the problem is not in the theme, how can you explain that it works normally in Primeface Test and when executing the same code in the theme, I get such an error?

This commit you sent I didn't quite understand what I can do to solve it.
--
Jarciano Silva
CEO - Chief Executive Officer
ajotta | https://ajotta.com

Melloware
Posts: 3716
Joined: 22 Apr 2013, 15:48

25 May 2022, 13:34

We have a runnable reproducer using PF 11 using PrimeFaces Test that shows it works fine with raw PrimeFaces 11 and Stacked Group Chart. This user is saying it is only showing broken in Babylon theme which to me doesn't make sense but its what he said he has proven.

You can download the reproducer and run `mvn clean jetty:run` https://github.com/primefaces/primeface ... -group.zip

However I don't have Babylon to test with you would just have to copy the same code from the reproducer into Babylon.
PrimeFaces Developer | PrimeFaces Extensions Developer
GitHub Profile: https://github.com/melloware
PrimeFaces Elite 13.0.0 / PF Extensions 13.0.0
PrimeReact 9.6.1

User avatar
ajotta
Posts: 71
Joined: 16 Feb 2016, 13:41
Location: Brasil
Contact:

27 May 2022, 01:50

We upgraded Babylon to 6.0.0 with Primefaces 11.0.4 and the error persists.
--
Jarciano Silva
CEO - Chief Executive Officer
ajotta | https://ajotta.com

Melloware
Posts: 3716
Joined: 22 Apr 2013, 15:48

29 May 2022, 13:58

We have debugged the error has NOTHING to do with Babylon its purely something different with ChartsJS 2.x vs 3.x. So no need to continue this discussion here in the Babylone forum.
PrimeFaces Developer | PrimeFaces Extensions Developer
GitHub Profile: https://github.com/melloware
PrimeFaces Elite 13.0.0 / PF Extensions 13.0.0
PrimeReact 9.6.1

mert.sincan
Posts: 5281
Joined: 29 Jun 2013, 12:38

31 May 2022, 13:57

Yes, None of the Premium Layouts have a CSS to interfere with the animation of Chart.js. Could you please try it without Babylon?

Also, please see this comment;
Melloware wrote:
25 May 2022, 13:34
We have a runnable reproducer using PF 11 using PrimeFaces Test that shows it works fine with raw PrimeFaces 11 and Stacked Group Chart. This user is saying it is only showing broken in Babylon theme which to me doesn't make sense but its what he said he has proven.

You can download the reproducer and run `mvn clean jetty:run` https://github.com/primefaces/primeface ... -group.zip

However I don't have Babylon to test with you would just have to copy the same code from the reproducer into Babylon.

Post Reply

Return to “Babylon - PrimeFaces”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 2 guests