Opened 20 months ago

Last modified 20 months 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 20 months ago.
Lines-seriesColorProvision-dojo112.html (5.9 KB) - added by Claude Guyomard 20 months ago.
Lines-seriesColorProvision-dojo112-PATCHED.html (5.9 KB) - added by Claude Guyomard 20 months ago.
Chart.js (42.6 KB) - added by Claude Guyomard 20 months ago.
changeset-chart.diff (2.4 KB) - added by Claude Guyomard 20 months ago.
Chart.js patch

Download all attachments as: .zip

Change History (6)

Changed 20 months ago by Claude Guyomard

Changed 20 months ago by Claude Guyomard

Changed 20 months ago by Claude Guyomard

Changed 20 months ago by Claude Guyomard

Attachment: Chart.js added

comment:1 Changed 20 months ago by dylan

Milestone: tbd1.13.1
Priority: undecidedhigh

Changed 20 months ago by Claude Guyomard

Attachment: changeset-chart.diff added

Chart.js patch

Note: See TracTickets for help on using tickets.