2

I am having a Primefaces p:chart (BarChartModel) with multi Series and I am trying to change the default colors of multi Series bar.

My p:chart code is:

<p:chart type="bar" model="#{performanceStaffController.genderChartModel}" 
            rendered="#{performanceStaffController.genderChartModel != null}"
            style="height:400px"
            styleClass="center-block">
    <h:outputScript>
        function chartExtender() {
            this.cfg.seriesDefaults.rendererOptions.varyBarColor = true;
        }
    </h:outputScript>
</p:chart>

Bean code that sets the SeriesColors is:

    genderChartModel.setSeriesColors("ff9933, 77933c");
    genderChartModel.setExtender("chartExtender");

While this code perfectly works for a bar chart with single series, it doesn't produce the desired result for multi series.

Attaching the picture of how it is displaying currently.p:chart with multi series

What I need is for each section A, B, C the boys bar in Orange and girls bar in Green.

Have come across many other examples in Stackoverflow related to this topic, but they all have a single series. Please suggest how to achieve this for multi series in a simple way. Hope this is not a duplicate.

Adding more details:

Got more information on how to use jqplot from

Customize primefaces chart

Vary Color Bar For Two Series Data in Jqplot

My code now is:

<p:chart type="bar" model="#{performanceStaffController.genderChartModel}" 
            rendered="#{performanceStaffController.genderChartModel != null}"
            style="height:400px"
            styleClass="center-block">
    <h:outputScript>
        function chartExtender() {
            this.cfg.seriesDefaults.rendererOptions.varyBarColor = true;
            this.cfg.series = 
                            [
                            {seriesColors: ["#FFCC33", "#FFCC33", "#FFCC33", "#FFCC33", "#FFCC33", "#FFCC33", "#FFCC33", "#FFCC33", "#FFCC33", "#FFCC33"]}, 
                            {seriesColors: ["#77933c", "#77933c", "#77933c", "#77933c", "#77933c", "#77933c", "#77933c", "#77933c", "#77933c", "#77933c"]}
                            ]
        }
    </h:outputScript>
</p:chart>

and bean code is

genderChartModel.setExtender("chartExtender");

Now the problem is different

enter image description here

The label name and legend colors are messed up, though those values are set in the bean and it was working fine before. Looks like this.cfg.series overwrites all the other values that are part of it. Surprisingly the legend color is not automatically picked up based on the chart bars - it could at least pick up the first two!! Looks like there is no easy solution to achieve what is needed!!

Community
  • 1
  • 1
user5281896
  • 123
  • 2
  • 11
  • I've changed the tags on your question. Does that help in you finding an answer? – Kukeltje May 26 '16 at 16:14
  • Thanks for the tags, appreciate it. Still couldn't find anything relevant for multi-series. – user5281896 May 26 '16 at 16:35
  • not in queries just about jqplot and the multi series via google? – Kukeltje May 26 '16 at 17:16
  • Sure. will check that. Looks like it isn't straight forward as setting colors for each series with a simple method. I haven't used jqplot yet so not sure where the code fits in etc. Will do the basic reading and try to implement that. Thanks again. – user5281896 May 27 '16 at 03:11
  • I have done some more research and added more details and another screen shot above. Yet ultimate requirement is still not met. Please suggest an easy way to achieve this if any. – user5281896 May 27 '16 at 08:15

3 Answers3

2

you should set value of group each chartseries than use "chartseriescolors" attribute for change color of bars. if you set only one value for group multiseries color will be same. so set value of group each chartseries. i solved this problem this way.

Kenan Gökbak
  • 27
  • 7
  • Appreciate your time on this. I am not sure if this is what you are saying. {seriesColors: ["#FFCC33"]}, {seriesColors: ["#77933c"]} I tried this but only the first set of bars reflect this color, the subsequent set reflects the default colors. Could you please elaborate/share this piece of code alone. thanks. – user5281896 Dec 23 '16 at 12:02
  • lineModel2.setSeriesColors("088A29,DF0101"); lineModel1.setSeriesColors("088A29,DF0101"); – Kenan Gökbak Dec 23 '16 at 12:41
  • lineModel2.setSeriesColors("088A29,DF0101"); lineModel1.setSeriesColors("088A29,DF0101"); dont use extender for this. use primefaces chart attributes. but u have to set same value of group each chartseries.' – Kenan Gökbak Dec 23 '16 at 12:47
  • 1
    Awesome, works like a charm. just for benefit of everyone, just the below code is enough. genderChartModel.setSeriesColors("ff9933, 77933c"); No need for this.cfg.seriesDefaults.rendererOptions.varyBarColor = true; – user5281896 Dec 23 '16 at 17:07
  • This is the correct answer, your previous answer leaves chart series at the default color fixed by primefaces. – cdaiga Oct 06 '17 at 03:21
  • Can you please add the code from the comments into the answer?. @user5281896: You seem to already have this in your Q. – Kukeltje Jun 14 '18 at 21:31
1
         ChartSeries A = new ChartSeries();
         ChartSeries B = new ChartSeries();
         A.setLabel("A");
         B.setLabel("B");

             A.set("1", 1);
             B.set("1", 2);

         model.addSeries(A);
         model.addSeries(B);
Kenan Gökbak
  • 27
  • 7
1

@Kukeltje, here is the answer.

        genderChartModel.addSeries(boys);
        genderChartModel.addSeries(girls);

        genderChartModel.setSeriesColors("ff9933, 77933c");

        genderChartModel.setTitle("");
        genderChartModel.setLegendPosition("e");
        genderChartModel.setLegendPlacement(LegendPlacement.OUTSIDEGRID);
user5281896
  • 123
  • 2
  • 11