p:chart bar's ChartSeries not synchronized - jsf-2

Question

I've been working on PrimeFaces Bar chart model,and its getting on my nerves now,I just can't get how its setting chart series values.What expected result should be that One Open for say abc and one closed for xyz, But what It shows one open and one closed for xyz,ABC is Ignored. If I change the position of
barModel.addSeries(close);
barModel.addSeries(open);
to
barModel.addSeries(open);
barModel.addSeries(close);
Then It shows One open and one closed for only abc,Not xyz.
here's my getBarModel() first,
public BarChartModel getBarModel() {
barModel=new BarChartModel();
ChartSeries open = new ChartSeries();
open.setLabel("OPEN");
ChartSeries close = new ChartSeries();
close.setLabel("Close");
open.set("abc", 1);
close.set("xyz", 1);
barModel.addSeries(close);
barModel.addSeries(open);
barModel.setMouseoverHighlight(false);
barModel.setShowPointLabels(false);
barModel.setTitle("Incident_application");
barModel.setLegendPosition("ne");
barModel.setShowDatatip(false);
barModel.setShowPointLabels(true);
barModel.setExtender("chartExtender");
barModel.setSeriesColors("A2CC39,1B75BA");
Axis xAxis = barModel.getAxis(AxisType.X);
xAxis.setLabel("Applications");
barModel.setAnimate(true);
Axis yAxis = barModel.getAxis(AxisType.Y);
yAxis.setLabel("No. of Incident");
yAxis.setMin(0);
yAxis.setMax(20);
yAxis.setTickInterval("10");
return barModel;
}
and here is xhtml
<h:outputScript library="primefaces" name="jquery/jquery.js" target="head" />
<h:outputScript library="primefaces" name="jquery/jquery-plugins.js" target="head" />
<style type="text/css">
table.jqplot-table-legend {
border: none;
font-size: x-large;
}
div.jqplot-table-legend-swatch
{
width: 2vw;
height: 2vh;
}
div.jqplot-gridData{
display:none;
}
div.jqplot-xaxis-tick{
font-weight:bold !important;
}
.jqplot-axis.jqplot-xaxis{
font-weight:bold;
}
.jqplot-point-label {
font-size: 300%;
color: black;
font-weight: bold;
}
.jqplot-target{
color:black !important;
}
</style>
<script>
function chartExtender() {
this.cfg.grid = {
background: 'transparent',
gridLineColor: '#303030',
drawBorder: false,
};
}
</script>
<h:form id="barChart">
<p:chart id="bar" type="bar" model="#{incidentBarChartController.barModel}" />
<p:poll interval="10" global="false" update="barChart"/>
</h:form>
</h:body>
Snapshots of expected and Actual results are added below.
Expected Result
Actual Result
Edit
After adding
open.set("abc", 1);
open.set("xyz",0);
close.set("xyz", 1);
close.set("abc", 0);
I still get weird results i.e.
1 open and 1 closed for xyz and 0 open and 0 closed for xyz.

Answer 1

The only solution is that you as a developer make sure all series contains all keys and populate the keys which you do not have and make sure all keys in all series are in the same order.
The reason for this is that only you know the real order (that is why a LinkedHashMap is used in the series). jQplot or PrimeFaces cannot know this. If e.g. the first series misses a key and that series is used as the 'primary' to iterate over, where is the missing key going to put. And if e.g. at position 6, both have a key that is not in the other set, which one should be taken first? The jqPlot or PrimeFaces cannot know. All reasons that you as a developer should make sure it is explicit by putting all keys in all series.