Opened 2 years ago

Last modified 2 years ago

#19048 new defect

Backward-iterating plot rendering is incorrect

Reported by: Claude Guyomard Owned by:
Priority: high Milestone: 1.13.1
Component: Charting Version: 1.12.2
Keywords: Cc:
Blocked By: Blocking:

Description

While the order of series rendering was corrected (https://bugs.dojotoolkit.org/ticket/18061), the order of plot rendering is still incorrect relatively to theme color consumption.

To reproduce it : Open http://archive.dojotoolkit.org/nightly/dojotoolkit/dojox/charting/tests/test_plot_order.html

This chart is made of 3 'Bubble' plots. Each of these plot contains one series. The chart renders these 3 series with a distinct color provided by the ThreeD theme :

  • Series A is displayed with a RED color,
  • Series B is displayed with a GREEN color,
  • Series C is displayed with a BLUE color.

Now open the source code of dojox.charting.theme.ThreeD. It defines :

var colors = ["#f00", "#0f0", "#00f", "#ff0", "#0ff", "#f0f", ... ]

which can be read as

var colors = ["red", "lime", "blue", "yellow", "aqua", "magenta", ... ]

So what happened ?

  • the 1st color (RED) is given to the last series (Series C),
  • the 2nd color (LIME) is given to the penultimate series (Series B)
  • and so on...

This is incorrect : anybody who develops her custom color palette would expect this behavior :

  • the FIRST color (RED) is given to the FIRST series (Series A),
  • the SECOND color (LIME) is given to the SECOND series (Series B)
  • and so on...

Which becomes consistent with the series rendering, e.g. the case when these 3 series had been attached to a unique plot. Note that this could have been demonstrated by http://archive.dojotoolkit.org/nightly/dojotoolkit/dojox/charting/tests/test_series_order.html if the chart had been passed a theme instead of being passed individual colors to each series! It would be great to correct it too :)

Of course the worst scenario is : A first plot made of [Series-A, Series-B] and plot made of [Series-C, Series-D]. Given the theme colors = [ C1, C2, C3, C4 ], it results in :

  • Series A : C3
  • Series B : C4
  • Series C : C1
  • Series D : C2

Each of the 3 attached pages show 3 Lines charts :

Top chart

4 series are attached to 1 plot. Series are given a color explicitly.

Middle chart

2 series are attached to 1 plot. 2 other series are attached to another plot. Series are given a color explicitly.

Bottom chart

2 series are attached to 1 plot. 2 other series are attached to another plot. Series colors are obtained from a theme.

Lines-seriesColorProvision-dojo110.html

  • top : series in legend OK, color consumption Ok, series z-index OK
  • middle : series in legend OK, color consumption OK, series z-index OK
  • bottom : series in legend OK, color consumption FAILED, series z-index FAILED

Lines-seriesColorProvision-dojo112.html

  • top : series in legend OK, color consumption Ok, series z-index OK
  • middle : series in legend OK, color consumption OK, series z-index OK
  • bottom : series in legend FAILED, color consumption FAILED, series z-index OK

Lines-seriesColorProvision-dojo112-PATCHED.html

  • top : series in legend OK, color consumption Ok, series z-index OK
  • middle : series in legend OK, color consumption OK, series z-index OK
  • bottom : series in legend OK, color consumption OK, series z-index OK

Solution proposal

Chart.js.MODIFIED (attached).

Expectations :

  • The later a plot is attached to the chart, the lower its apparent Z-index should be.
  • or, the earlier a plot is attached to the chart, the higher its apparent Z-index should be.

Implementation : In a SVG node sequence, the higher the index of a node, the higher its apparent z-index is. So lastest 'plot' SVG groups should be inserted first => go over the stack backwards.

Then go over 'this.stack' forwards to render plots within these group by consuming colors in the natural order.

Attachments (5)

Lines-seriesColorProvision-dojo110.html (5.9 KB) - added by Claude Guyomard 2 years ago.
Lines-seriesColorProvision-dojo112.html (5.9 KB) - added by Claude Guyomard 2 years ago.
Lines-seriesColorProvision-dojo112-PATCHED.html (5.9 KB) - added by Claude Guyomard 2 years ago.
Chart.js (42.6 KB) - added by Claude Guyomard 2 years ago.
changeset-chart.diff (2.4 KB) - added by Claude Guyomard 2 years ago.
Chart.js patch

Download all attachments as: .zip

Change History (6)

Changed 2 years ago by Claude Guyomard

Changed 2 years ago by Claude Guyomard

Changed 2 years ago by Claude Guyomard

Changed 2 years ago by Claude Guyomard

Attachment: Chart.js added

comment:1 Changed 2 years ago by dylan

Milestone: tbd1.13.1
Priority: undecidedhigh

Changed 2 years ago by Claude Guyomard

Attachment: changeset-chart.diff added

Chart.js patch

Note: See TracTickets for help on using tickets.