0

Chart legend is not cleaned

asked 2020-11-20 18:49:37 +0800

softteam gravatar image softteam
120 8

Hello,

I got a chart that is filled with a CategoryModel and when I want to reload it with only some data, the chart legend is not cleaned and it shows the previous chart legend. First it is shown correctly:

image description

And then, if I reload the chart only with the data whose legend is marked in red:

image description

It shows all the previous legend. What I have:

.zul:

<charts id="chartCumplimientosZonas" type="column" model="@bind(vm.modelCumpliZonas)"/>

.java:

private Charts chartCumplimientosZonas;
private CategoryModel modelCumpliZonas;

modelCumpliZonas = getModelCumpliZonas(); //Load data
chartCumplimientosZonas.setModel(modelCumpliZonas);
chartCumplimientosZonas.getXAxis().setCrosshair(true);
chartCumplimientosZonas.getTooltip().setPointFormat("{series.name}: <b>{point.y:.1f}%</b>");
chartCumplimientosZonas.getYAxis().getTitle().setText("%");
chartCumplimientosZonas.getYAxis().setMax(105);
chartCumplimientosZonas.getYAxis().setMin(0);
chartCumplimientosZonas.getPlotOptions().getBar().getDataLabels().setEnabled(true);
chartCumplimientosZonas.getCredits().setEnabled(false);
chartCumplimientosZonas.getPlotOptions().getColumn().setPointPadding(0.2);;
chartCumplimientosZonas.getPlotOptions().getColumn().setBorderWidth(0);
chartCumplimientosZonas.getExporting().setEnabled(opcionesGraficos);
chartCumplimientosZonas.setWidth(null);

chartCumplimientoZonas.getModel() has these values:

All data:

categoryList: [DROGUERIA, PERFUMERIA, ZONA BEBÉ, ] seriesList: [P&G 1Q - HIPERCOR-ECI MAYO 2020, P&G CARREFOUR 1Q OCTUBRE 2020, P&G CARREFOUR 1Q SEPTIEMBRE 2020, P&G CARREFOUR 2Q SEPTIEMBRE 2020, P&G ECI HIPERCOR 2Q MAYO 2020, P&G ECI HIPERCOR 3Q MAYO 2020, P&G Eroski Hiper y Super 2Q Mayo 2020, P&G HIPERCOR ECI 1Q SEPTIEMBRE 2020, P&G HIPERCOR ECI 2Q SEPTIEMBRE 2020, P&G HIPERCOR ECI SUPERCOR 1Q OCTUBRE 2020, P&G HIPERCOR-ECI 2Q AGOSTO 2020, P&G HIPERCOR-ECI-SUPERCOR 1Q AGOSTO 2020, P&G HIPERCOR-ECI-SUPERCOR 1Q JULIO 2020, P&G HIPERCOR-ECI-SUPERCOR 1Q JUNIO 2020, P&G HIPERCOR-ECI-SUPERCOR 2Q JULIO 2020, P&G _ CARREFOUR 1Q AGOSTO 2020, P&G _ EROSKI 1Q AGOSTO 2020, P&G _ EROSKI 2Q JULIO 2020, P&GCARREFOUR 1Q JULIO 2020, P&GCARREFOUR 2Q AGOSTO 20, P&GCRF 2Q JULIO 20] seriesMap: {P&G CARREFOUR 1Q OCTUBRE 2020=[PERFUMERIA], P&G HIPERCOR-ECI 2Q AGOSTO 2020=[DROGUERIA, PERFUMERIA, ZONA BEBÉ], P&G _ CARREFOUR 1Q AGOSTO 2020=[PERFUMERIA], P&GCARREFOUR 2Q AGOSTO 20=[PERFUMERIA], P&G HIPERCOR ECI 1Q SEPTIEMBRE 2020=[DROGUERIA, PERFUMERIA, ZONA BEBÉ], P&G ECI HIPERCOR 3Q MAYO 2020=[DROGUERIA, PERFUMERIA, ZONA BEBÉ], P&G Eroski Hiper y Super 2Q Mayo 2020=[], P&G CARREFOUR 2Q SEPTIEMBRE 2020=[PERFUMERIA], P&GCARREFOUR 1Q JULIO 2020=[PERFUMERIA], P&G ECI HIPERCOR 2Q MAYO 2020=[DROGUERIA, PERFUMERIA, ZONA BEBÉ], P&G HIPERCOR-ECI-SUPERCOR 1Q JULIO 2020=[DROGUERIA, PERFUMERIA, ZONA BEBÉ], P&G HIPERCOR ECI SUPERCOR 1Q OCTUBRE 2020=[DROGUERIA, PERFUMERIA, ZONA BEBÉ], P&G _ EROSKI 1Q AGOSTO 2020=[DROGUERIA], P&G _ EROSKI 2Q JULIO 2020=[DROGUERIA], P&G HIPERCOR ECI 2Q SEPTIEMBRE 2020=[DROGUERIA, PERFUMERIA, ZONA BEBÉ], P&G 1Q - HIPERCOR-ECI MAYO 2020=[DROGUERIA, PERFUMERIA, ZONA BEBÉ], P&G HIPERCOR-ECI-SUPERCOR 1Q AGOSTO 2020=[DROGUERIA, PERFUMERIA, ZONA BEBÉ], P&GCRF 2Q JULIO 20=[PERFUMERIA], P&G CARREFOUR 1Q SEPTIEMBRE 2020=[PERFUMERIA, ZONA BEBÉ], P&G HIPERCOR-ECI-SUPERCOR 2Q JULIO 2020=[DROGUERIA, PERFUMERIA, ZONA BEBÉ], P&G HIPERCOR-ECI-SUPERCOR 1Q JUNIO 2020=[DROGUERIA, PERFUMERIA, ZONA BEBÉ]} valueMap: {[P&G 1Q - HIPERCOR-ECI MAYO 2020, DROGUERIA]=64.0, [P&G 1Q - HIPERCOR-ECI MAYO 2020, PERFUMERIA]=41.0, [P&G 1Q - HIPERCOR-ECI MAYO 2020, ZONA BEBÉ]=71.0, [P&G CARREFOUR 1Q OCTUBRE 2020, PERFUMERIA]=28.0, [P&G CARREFOUR 1Q SEPTIEMBRE 2020, PERFUMERIA]=26.0, [P&G CARREFOUR 1Q SEPTIEMBRE 2020, ZONA BEBÉ]=13.0, [P&G CARREFOUR 2Q SEPTIEMBRE 2020, PERFUMERIA]=46.0, [P&G ECI HIPERCOR 2Q MAYO 2020, DROGUERIA]=64.0, [P&G ECI HIPERCOR 2Q MAYO 2020, PERFUMERIA]=63.0, [P&G ECI HIPERCOR 2Q MAYO 2020, ZONA BEBÉ]=58.0, [P&G ECI HIPERCOR 3Q MAYO 2020, DROGUERIA]=68.0, [P&G ECI HIPERCOR 3Q MAYO 2020, PERFUMERIA]=59.0, [P&G ECI HIPERCOR 3Q MAYO 2020, ZONA BEBÉ]=67.0, [P&G Eroski Hiper y Super 2Q Mayo 2020, ]=89.0, [P&G HIPERCOR ECI 1Q SEPTIEMBRE 2020, DROGUERIA]=77.0, [P&G HIPERCOR ECI 1Q SEPTIEMBRE 2020, PERFUMERIA]=69.0, [P&G HIPERCOR ECI 1Q SEPTIEMBRE 2020, ZONA BEBÉ]=67.0, [P&G HIPERCOR ECI 2Q SEPTIEMBRE 2020, DROGUERIA]=76.0, [P&G HIPERCOR ECI 2Q SEPTIEMBRE 2020, PERFUMERIA]=71.0, [P&G HIPERCOR ECI 2Q SEPTIEMBRE 2020, ZONA BEBÉ]=60.0, [P&G HIPERCOR ECI SUPERCOR 1Q OCTUBRE 2020, DROGUERIA]=40.0, [P&G HIPERCOR ECI SUPERCOR 1Q OCTUBRE 2020, PERFUMERIA]=47.0, [P&G HIPERCOR ECI SUPERCOR 1Q OCTUBRE 2020, ZONA BEBÉ]=41.0, [P&G HIPERCOR-ECI 2Q AGOSTO 2020, DROGUERIA]=71.0, [P&G HIPERCOR-ECI 2Q AGOSTO 2020, PERFUMERIA]=70.0, [P&G HIPERCOR-ECI 2Q AGOSTO 2020, ZONA BEBÉ]=35.0, [P&G HIPERCOR-ECI-SUPERCOR 1Q AGOSTO 2020, DROGUERIA]=54.0, [P&G HIPERCOR-ECI-SUPERCOR 1Q AGOSTO 2020, PERFUMERIA]=60.0, [P&G HIPERCOR-ECI-SUPERCOR 1Q AGOSTO 2020, ZONA BEBÉ]=56.0, [P&G HIPERCOR-ECI-SUPERCOR 1Q JULIO 2020, DROGUERIA]=44.0, [P&G HIPERCOR-ECI-SUPERCOR 1Q JULIO 2020, PERFUMERIA]=51.0, [P&G HIPERCOR-ECI-SUPERCOR 1Q JULIO 2020, ZONA BEBÉ]=42.0, [P&G HIPERCOR-ECI-SUPERCOR 1Q JUNIO 2020, DROGUERIA]=60.0, [P&G HIPERCOR-ECI-SUPERCOR 1Q JUNIO 2020, PERFUMERIA]=47.0, [P&G HIPERCOR-ECI-SUPERCOR 1Q JUNIO 2020, ZONA BEBÉ]=65.0, [P&G HIPERCOR-ECI-SUPERCOR 2Q JULIO 2020, DROGUERIA]=52.0, [P&G HIPERCOR-ECI-SUPERCOR 2Q JULIO 2020, PERFUMERIA]=49.0, [P&G HIPERCOR-ECI-SUPERCOR 2Q JULIO 2020, ZONA BEBÉ]=48.0, [P&G _ CARREFOUR 1Q AGOSTO 2020, PERFUMERIA]=15.0, [P&G _ EROSKI 1Q AGOSTO 2020, DROGUERIA]=48.0, [P&G _ EROSKI 2Q JULIO 2020, DROGUERIA]=69.0, [P&GCARREFOUR 1Q JULIO 2020, PERFUMERIA]=62.0, [P&GCARREFOUR 2Q AGOSTO 20, PERFUMERIA]=25.0, [P&G_CRF 2Q JULIO 20, PERFUMERIA]=42.0}

New data:

categoryList: [DROGUERIA, PERFUMERIA, ZONA BEBÉ] seriesList: [P&G 1Q - HIPERCOR-ECI MAYO 2020] seriesMap: {P&G 1Q - HIPERCOR-ECI MAYO 2020=[DROGUERIA, PERFUMERIA, ZONA BEBÉ]} valueMap: {[P&G 1Q - HIPERCOR-ECI MAYO 2020, DROGUERIA]=64.0, [P&G 1Q - HIPERCOR-ECI MAYO 2020, PERFUMERIA]=41.0, [P&G 1Q - HIPERCOR-ECI MAYO 2020, ZONA BEBÉ]=71.0}

Why chart legend shows all items instead of only showing P&G 1Q - HIPERCOR-ECI MAYO 2020?

Thank you, Javier

delete flag offensive retag edit

5 Answers

Sort by » oldest newest most voted
0

answered 2020-11-24 17:30:29 +0800

MDuchemin gravatar image MDuchemin
1901 1 5
ZK Team

Hi There,

Tested a similar structure on ZKCharts 7.2.1.2 / ZK 9, but couldn't get a reproducing case.

Which ZKCharts / ZK version are you running currently?

A few questions: When you update the model, do you call either @notifyChange or BindUtils.postNotifyChange on the vm.modelCumpliZonas property? Or do you trigger the update in a different way? Do you generate an entirely new model object, or do you update values in the exiting CategoryModel object?

As a workaround, you could try to invalidate the charts component when you change the model content, but I would only do that as last resort, since it's more expensive than just triggering an update.

and finally one (not relevant) nitpick: the charts model="@bind(vm.model)" could be changed for a @load(), since the chart will never send a model to the VM. :D

link publish delete flag offensive edit
0

answered 2020-11-26 17:22:08 +0800

softteam gravatar image softteam
120 8

Hi,

We are running ZKCharts version 7.2.1.1 and ZK version 9.1.0.

When we update the model we generate a new DefaultCategoryModel() like:

model = new DefaultCategoryModel();
//Some process that get data and save it in model
modelCumpliZonas = model;
chartCumplimientosZonas.setModel(modelCumpliZonas);

In this case, should we trigger the update with BindUtils.postNotifyChange(null,null,this,"modelCumpliZonas")?

I tried to replace

chartCumplimientosZonas.setModel(modelCumpliZonas)

with

BindUtils.postNotifyChange(null,null,this,"modelCumpliZonas")

But I got the same comportament.

I also tried chartCumplimientosZonas.invalidate(); before create a new model object but nothing changed.

Thank you,

Javier

link publish delete flag offensive edit
0

answered 2020-11-26 18:26:39 +0800

MDuchemin gravatar image MDuchemin
1901 1 5
ZK Team

Hi Javier,

Based on the description, it sounds like the charts component still sends a lot of series data to the client, when it should only send the one serie that exists in your 2nd dataset.

To confirm this, you should check the network panel in the browser's developer tools, and check the zkau request/response containing the update to the charts.

You should see something like:

{"rs":[["outer",[{$u:'yourChartUUID'},[
['chart.Charts','UUID',{id:'yourChartId',plotData:{"chart":{"type":"column"},"series":[{"data":[20,null,null,null],"name":"Name1"},{"data":[null,35,null,null],"name":"Name2"}...

If the issue is at client side, you should only see the single series name (the one containing values in your screen)

in that case, you may want to post a bug with the official ZK support

If the issue is that the configuration for this chart object contains too many entries, you should see data entries for each of the names displayed in the legend.

In that case, you should put a breakpoint in your dataset generation code, to make sure that you are not adding empty series, or series with a name but no data points to the model

link publish delete flag offensive edit
0

answered 2020-12-03 01:28:57 +0800

softteam gravatar image softteam
120 8

Hi,

In the network panel in the browser's developer tools I got this:

['chart.Charts','lJ0Qt',{id:'chartCumplimientosZonas',plotData:{"chart":{"type":"column"},"title":{"text":"CUMPLIMIENTO POR ZONAS"},"series":[{"data":[64.0,41.0,71.0],"name":"P&G 1Q - HIPERCOR-ECI  MAYO 2020"},{"data":[],"name":"P&G CARREFOUR 1Q OCTUBRE 2020"},{"data":[],"name":"P&G CARREFOUR 1Q SEPTIEMBRE 2020"},{"data":[],"name":"P&G CARREFOUR 2Q SEPTIEMBRE 2020"},{"data":[],"name":"P&G ECI HIPERCOR 2Q MAYO 2020"},{"data":[],"name":"P&G ECI HIPERCOR 3Q MAYO 2020"},{"data":[],"name":"P&G Eroski Hiper y Super 2Q Mayo 2020"},{"data":[],"name":"P&G HIPERCOR ECI 1Q SEPTIEMBRE 2020"},{"data":[],"name":"P&G HIPERCOR ECI 2Q SEPTIEMBRE 2020"},{"data":[],"name":"P&G HIPERCOR ECI SUPERCOR 1Q OCTUBRE 2020"},{"data":[],"name":"P&G HIPERCOR-ECI 2Q AGOSTO 2020"},{"data":[],"name":"P&G HIPERCOR-ECI-SUPERCOR 1Q AGOSTO 2020"},{"data":[],"name":"P&G HIPERCOR-ECI-SUPERCOR 1Q JULIO 2020"},{"data":[],"name":"P&G HIPERCOR-ECI-SUPERCOR 1Q JUNIO 2020"},{"data":[],"name":"P&G HIPERCOR-ECI-SUPERCOR 2Q JULIO 2020"},{"data":[],"name":"P&G _ CARREFOUR 1Q AGOSTO 2020"},{"data":[],"name":"P&G _ EROSKI 1Q AGOSTO 2020"},{"data":[],"name":"P&G _ EROSKI 2Q JULIO 2020"},{"data":[],"name":"P&G_CARREFOUR 1Q JULIO 2020"},{"data":[],"name":"P&G_CARREFOUR 2Q AGOSTO 20"},{"data":[],"name":"P&G_CRF 2Q JULIO 20"}],"xAxis":[{"categories":["DROGUERIA","PERFUMERIA","ZONA BEBÉ"],"crosshair":{}}],"tooltip":{"pointFormat":"{series.name}: <b>{point.y:.1f}%<\/b>"},"yAxis":[{"title":{"text":"%"},"max":105,"min":0}],"plotOptions":{"bar":{"dataLabels":{"enabled":true}},"column":{"pointPadding":0.2,"borderWidth":0}},"credits":{"enabled":false},"exporting":{"enabled":false}}},{},[]]]]],["outer",[{$u:'lJ0Qv'},[

So I supose that all these series without data are causing this problem. However, I am not adding empty series because I am creating a new Object and the data is the same we can see in the first Post.

Any recommendations? I used setModel and BindUtils.postNotifyChange(null,null,this,"modelCumpliZonas"); and I got the same comportament.

Thank you,

Javier

link publish delete flag offensive edit
0

answered 2020-12-03 11:11:48 +0800

MDuchemin gravatar image MDuchemin
1901 1 5
ZK Team

Hi Javier,

Thanks for the network info, it confirms that the server is in fact sending these empty series. From there we can assume that the issue lies at server side.

Do you have access to the Charts component in your ViewModel? (I see that you are applying settings to charts in Java in your 1st post, but I don't know if that's an extra composer or in a viewModel wiring the component)

Ideally, you should put a breakpoint in the charts class setModel() method and observe what the Charts has as internal series values after the model has been added. From there, you can make sure that the model only contain your expected data.

If that's the case (the model sent to the Charts only contain the single serie you want to display, and the chart ends up containing all of these empty series) you should contact ZK support, send them the full java / zul case to reproduce, and ask if they can find a bug in that workflow.

If the model itself does contain these extra series, then you will need to find out why, most likely at viewModel level.

link publish delete flag offensive edit
Your answer
Please start posting your answer anonymously - your answer will be saved within the current session and published after you log in or create a new account. Please try to give a substantial answer, for discussions, please use comments and please do remember to vote (after you log in)!

[hide preview]

Question tools

Follow
1 follower

RSS

Stats

Asked: 2020-11-20 18:49:37 +0800

Seen: 19 times

Last updated: Dec 03 '20

Support Options
  • Email Support
  • Training
  • Consulting
  • Outsourcing
Learn More