1. #1
    Sencha User
    Join Date
    Nov 2012
    Posts
    5
    Vote Rating
    0
    ladinho10 is on a distinguished road

      0  

    Default Charts - change direction of X axis (reverse)

    Charts - change direction of X axis (reverse)


    Hi,


    I am trying to make the direction of the values for the X-axis to go from 5 to 1, not (default) from 1 to 5. Only X-axis ... Any idea? Thank you!




    chart.png

  2. #2
    Sencha - GXT Dev Team
    Join Date
    Feb 2009
    Location
    Minnesota
    Posts
    2,639
    Vote Rating
    80
    Colin Alworth is just really nice Colin Alworth is just really nice Colin Alworth is just really nice Colin Alworth is just really nice Colin Alworth is just really nice

      0  

    Default


    This doesn't appear to be supported, but can be built by telling the chart to read values backward. Making values backward is more or less a reflection of the graph across the other axis, so we'll want the chart to treat our number line as though all values are negative of their real values, without actually changing the labels.

    First, you should make a valueprovider that makes all values negative. Here's a quick (untested!) example that can wrap any other ValueProvider and negate its values.
    Code:
    public class NegativeValueProvider<T> implements ValueProvider<T, Number> {
        private final ValueProvider<T, Number> vp;
        public NegativeValueProvider(ValueProvider<T, Number> original) {
            this.vp = original;
        }
        public Number getValue(T object) {
            return 0 - vp.getValue(object).doubleValue();
        }
        @Override
        public void setValue(T object, Number value) {
            throw new UnsupportedOperationException("NegativeValueProvider shouldnt be used to save values");
        }
        @Override
        public String getPath() {
            return vp.getPath();
        }
    }
    Note that I cheat a bit and turn the numbers to doubles - if this is a problem for you, consider BigDecimal or the like.

    You'll supply this to the Axis (and the Series) when it asks for a numeric field to operate on - wrap up your usual valueprovider in it, and it will make negative numbers.

    Now we need to make sure those numbers aren't drawn as their opposites - easier way to do this is to make a custom LabelProvider. Again, we're computing the negative value - but this time it is the negative of the negative, so it is back to the oringal value:
    Code:
    public class NegativeLabelProvider implements LabelProvider<Number> {
        public String getLabel(Number item) {
            return (0 - item.doubleValue()) + "";
        }
    }
    Again, double-specific, YMMV.

    Then, pass both of these off to the axis:
    Code:
    y.addField(new NegativeValueProvider<MyObject>(props.sales());
    //y.addField(new NegativeValueProvider<MyObject>(props.overhead());//you can still use more than one, just be sure they are all reversed
    y.setLabelProvider(new NegativeLabelProvider());
    And the series, however you construct it should also be given a negative valueprovider.

    Between the two of these, the axis will render our values 'backward', but the label will be the correct values as (0 - (0 - X)) = X.

    I've not tested this beyond confirming that it compiles, but I've created and used a logarithmic axis labeling system that followed this same scheme.

  3. #3
    Sencha User
    Join Date
    Nov 2012
    Posts
    5
    Vote Rating
    0
    ladinho10 is on a distinguished road

      0  

    Default


    Thank you for reply. I think you solved my future problem (I'll also need a logarithmic scale) but not for now. Sorry if what I wrote was unclear. I try to implement chart (2 charts - left and right) that look together as...
    Attached Images

  4. #4
    Sencha - GXT Dev Team
    Join Date
    Feb 2009
    Location
    Minnesota
    Posts
    2,639
    Vote Rating
    80
    Colin Alworth is just really nice Colin Alworth is just really nice Colin Alworth is just really nice Colin Alworth is just really nice Colin Alworth is just really nice

      0  

    Default


    That -12 doesn't look quite right - is that deliberate, or did I miss something in my suggestions?

    The Axis LabelProvider i mentioned is used for the x-axis, which you are leaving un-labelled - you can almost certainly pass the same labelprovider to the bar for its label.

  5. #5
    Sencha User
    Join Date
    Nov 2012
    Posts
    5
    Vote Rating
    0
    ladinho10 is on a distinguished road

      0  

    Default


    Of course I understand that you are talking about x-axis... me too. How easily explain what is my biggest problem.... focus on left chart. It has values "from right side to left side" (right chart is easy to implement).

    Values are rendered by x-axis (at least as I understand it that way). I thought my problem could be solved by switch min and max of x-axis values but it throw an exception.
    Code:
    	NumericAxis<Data> numericAxis = new NumericAxis<Data>();
    	numericAxis.setMinimum(100);
    	numericAxis.setMaximum(0);
    Excuse my bad English :-)

  6. #6
    Sencha - GXT Dev Team
    Join Date
    Feb 2009
    Location
    Minnesota
    Posts
    2,639
    Vote Rating
    80
    Colin Alworth is just really nice Colin Alworth is just really nice Colin Alworth is just really nice Colin Alworth is just really nice Colin Alworth is just really nice

      0  

    Default


    You can't simple set the min to be 100 and the max to be 0 - my code above should explain why. Instead, you effectively need min as -100 and max as 0 - this way max > min. Then, the custom LabelProvider draws all numbers as negative, so that -100 draws as 100.

    Did you try the code I gave? What does it look like, and what is the total chart setup you have?

  7. #7
    Sencha User
    Join Date
    Nov 2012
    Posts
    5
    Vote Rating
    0
    ladinho10 is on a distinguished road

      0  

    Default


    Yes I tried the code but apparently I did something wrong. This morning I tried it again and it works. I appreciate your efforts. Thanks.

Thread Participants: 1

film izle

hd film izle

film sitesi

takipci kazanma sitesi

takipci kazanma sitesi

güzel olan herşey

takipci alma sitesi

komik eğlenceli videolar