Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

sencha gxt stacked bar with non-zero axis min behaving incorrectly

Tags:

java

gwt

extjs

gxt

I am building a stacked bar chart, however when I specify a min value for the axis the rendering of bars gets warped, and the axis scale/steps is erroneous. A line series I have added does however work as expected.

Here is the initial chart : no setMin

When I supply minimum/maximum values to the axis:

NumericAxis<MarketDataDetailsDecorator> axis = new NumericAxis<>();
axis.setPosition(Chart.Position.BOTTOM);
axis.setMinimum(995); // only this line
axis.setMaximum(1016);// and this line get added

with setMin

you can see the bars work on completely different values, but the blue lines remain correct. Also the axis increments in a non linear fashion it steps : 995,997,999,1001,1003,1006,1008, 1010, 1012, 1014,1016

Is this a bug, or two - or am I missing something in the api ?

Here is a gist highlighting the problem : https://gist.github.com/NimChimpsky/b4dc3dddc629ffefc7be2469eaa87d3a

I am trying to show a zoomed in version of the bar chart, the values range from 1002.5 - 1005.5, the first chart is correct but the second chart seems to be randomly assigning values ?

like image 507
NimChimpsky Avatar asked Jul 17 '19 06:07

NimChimpsky


1 Answers

I tested with this bar chart & also with OP's gist on my local.


Non-Zero Axis Min Value Issue

This is definitely a bug with the draw logic (identical issue but on extjs). Ignoring the change with maximum value, which also adds further trouble to this issue, imagine we update the minimum value of the bottom axis to n, if the bar's original height on the drawn chart should've been h, it will be reduced to h - n (derived from h * (h-n)/h).

For example;

  • here h ~= 1000, and n = 500, so as we see the invalid height of the drawn bars are 1000 - 500 = 500, so 50% length for bars...

    enter image description here

  • here h ~= 1000, and n = 750, and 1000 - 750 = 250, 25%

    enter image description here

  • and with OP's example h ~= 1000, and n = 995, therefore we see extremely short 0.5% length bars.

Sadly I am unable to fix this only through available methods to users, without accessing the terrible code in BarSeries, and even doing so will be troublesome to maintain, not the best to modify a 3rd party non-open source code. I suggest creating a ticket to this company...


Out of Axis Range Data Issue

When the range of bottom axis reduced to [95-105], the behaviour gets erratic, bars stack up behind the x-axis.

enter image description here

So it seems when the data is out of range, this kinda bug occurs, there is no inherent hide/filter logic for dataset on the chart.


Axis Label Step Inconsistency Issue

This seems to be an issue with approximation of step calculation with default settings, which is 10 steps (There is actually other logic, but unless some more custom settings have been used, it will be 10). If you give a manual range, and if (max - min) % 10 != 0, then you will have such issue due to approximation of step calculation.

For example, let's use [90-115], with max - min = 25, and this creates the following issue;

enter image description here

and if you just do the math;

step = (max - min) / 10 = 25 / 10 = 2.5

value for labels;

  1. 90 + (2.5 x 0) = 90
  2. 90 + (2.5 x 1) = 92.5 ~= 93
  3. 90 + (2.5 x 2) = 95
  4. 90 + (2.5 x 3) = 97.5 ~= 98
  5. ...

So it is just the mismatch between range & default step amount. You can modulate this with maybe using a custom step amount with axis.setSteps() on the bottom axis using a value that will divide the value max - min evenly.

like image 119
buræquete Avatar answered Oct 20 '22 11:10

buræquete