Hybrid View

  1. #1
    Ext User
    Join Date
    Sep 2010
    Posts
    26
    Vote Rating
    0
    kudos_ni_ is on a distinguished road

      0  

    Question Horizontal Bar Chart

    Horizontal Bar Chart


    I was wondering if someone can help with the horizontal bar chart. I created it following the example source in the widegt explorer.

    I wish to set the range depending on the data.

    For example, if the maximum value is more than ten, I want the x axis to step in increments of 1 or 2. However, when I do this, the bars do not align with the y axis: as you can see below:

    barchart.JPG

    For some reason, if I change the range to step by 0.5 (rather than 1) the y axis renders correctly. However, as you can see from the next image, the labels along the x axis become unreadable:

    barchart1.JPG

    If was to stick with having the steps be 0.5, to keep the y axis rendering correctly, is there a way to set the x axis to only display every second label, so that they are readable?


    Below is the code user to build the bar chart:

    Code:
    private void buildBarChart_Hor(ArrayList<PositionSummaryItem> list){
            Chart chart = new Chart(Registry.get(Service.URL_CHART).toString());
            ChartModel cm = new ChartModel("Portfolio %");
            cm.setBackgroundColour("#fffff5"); 
            
            XAxis xa = new XAxis();
            YAxis ya = new YAxis();
            
            if(list!=null && list.size()>0){
                HorizontalBarChart bar = new HorizontalBarChart();
                bar.setColour("#005791");
                bar.setTooltip("#val#%");
                
                List<String> labels = new ArrayList<String>();
                int i=0;
                for(PositionSummaryItem p : list){
                    String colour = ((ArrayList<String>)Registry.get("COLOURS")).get(i);
                    i++;
                    if(i>((ArrayList<String>)Registry.get("COLOURS")).size()-1){
                        i=0;
                    }               
                    
                    labels.add(0, p.get("name").toString());
                    bar.addBars(new HorizontalBarChart.Bar((Double)p.get("percent"), colour));                
                }
                ya.addLabels(labels);
                ya.setGridColour("-1");
                ya.setOffset(true);
                
                double max = Math.round((Double)list.get(0).get("percent"));
                double steps = 0;
                if((Double)list.get(0).get("percent") < 5){
                    steps = 0.5;
                }else{
                    steps = 0.5;
                }
                xa.setRange(steps, max, steps);            
                xa.setGridColour("#737373");
                
                cm.setXAxis(xa);
                cm.setYAxis(ya);
                cm.setTooltipStyle(new ToolTip(MouseStyle.FOLLOW));  
                
                bar.addChartListener(listener);
                
                cm.addChartConfig(bar);
                chart.setChartModel(cm);
                barContainer.add(chart);            
            }
        }

  2. #2
    Software Architect
    Join Date
    Sep 2007
    Posts
    13,971
    Vote Rating
    132
    sven is a glorious beacon of light sven is a glorious beacon of light sven is a glorious beacon of light sven is a glorious beacon of light sven is a glorious beacon of light sven is a glorious beacon of light

      0  

    Default


    If was to stick with having the steps be 0.5, to keep the y axis rendering correctly, is there a way to set the x axis to only display every second label, so that they are readable?
    Nothing like this is implemented. But as last time, i never saw this problem. Have you tried to reproduce this in a small and standalone testcase. The code you posted here misses some details.

  3. #3
    Ext User
    Join Date
    Sep 2010
    Posts
    26
    Vote Rating
    0
    kudos_ni_ is on a distinguished road

      0  

    Default This code should work alone and deomstrate my point

    This code should work alone and deomstrate my point


    Code:
    public class ChartTest extends LayoutContainer {
        protected void onRender(Element parent, int index){
            super.onRender(parent, index);
            
            setLayout(new RowLayout(Orientation.HORIZONTAL));
            
            ContentPanel one = new ContentPanel(new FitLayout());
            ContentPanel two = new ContentPanel(new FitLayout());
            
            one.add(getChart(data(5)));
            two.add(getChart(data(20)));
            
            add(one, new RowData(0.5, 1));
            add(two, new RowData(0.5, 1));        
        }
        
        private Chart getChart(ArrayList<Integer> data){
            Chart chart = new Chart(Registry.get(Service.URL_CHART).toString());
            ChartModel cm = new ChartModel("Portfolio %");
            cm.setBackgroundColour("#fffff5"); 
            
            XAxis xa = new XAxis();
            YAxis ya = new YAxis();
            
            if(data!=null && data.size()>0){
                HorizontalBarChart bar = new HorizontalBarChart();
                bar.setColour("#005791");
                bar.setTooltip("#val#%");
            
                List<String> labels = new ArrayList<String>();
                int i=0;
                for(int num : data){
                    
                    labels.add(0, "Label " + i);
                    bar.addBars(new HorizontalBarChart.Bar(num));     
                    i++;
                }
                ya.addLabels(labels);
                ya.setGridColour("-1");
                ya.setOffset(true);
                
                double steps = 0;
                int max = data.get(data.size()-1);
                if(max <= 5){
                    steps = 0.5;
                }else{
                    //For large sets of data I need bigger steps.  
                    steps = 1;
                    
                    //However, changing this to 0.5 will fix the y axis, but the xaxis labels become unreadable.                                
                }
                xa.setRange(steps, max, steps);            
                xa.setGridColour("#737373");
                
                cm.setXAxis(xa);
                cm.setYAxis(ya);
                cm.setTooltipStyle(new ToolTip(MouseStyle.FOLLOW));  
               
                cm.addChartConfig(bar);
                chart.setChartModel(cm);            
                
                
            }
            return chart;
        }
        
        private ArrayList<Integer> data(int max){
            ArrayList<Integer> data = new ArrayList<Integer>();
            
            for(int i=0;i<max;i++){
                data.add(i);
            }
            
            return data;
        }
    }

  4. #4
    Ext GWT Premium Member
    Join Date
    May 2010
    Posts
    53
    Vote Rating
    0
    crehbein is on a distinguished road

      0  

    Default


    Quote Originally Posted by kudos_ni_ View Post
    If was to stick with having the steps be 0.5, to keep the y axis rendering correctly, is there a way to set the x axis to only display every second label, so that they are readable?
    Another option if you can't get it working with steps of 1 is to render the X axis labels diagonally. It should help unclutter the labels. There's a setting for that.

  5. #5
    Ext User
    Join Date
    Sep 2010
    Posts
    26
    Vote Rating
    0
    kudos_ni_ is on a distinguished road

      0  

    Default


    I know it is possible to set the x axis labels to display at an angle when create the label. However, in this instance the labels are created automatically - i do not create each individual label.

    Is there another method i can use on the xaxis or grid to set the angle?

  6. #6
    Ext GWT Premium Member
    Join Date
    May 2010
    Posts
    53
    Vote Rating
    0
    crehbein is on a distinguished road

      0  

    Default


    Code:
    xAxis.getLabels().setRotation(Rotation.DIAGONAL);
    I think that should do the trick, but you have to make sure its called _after_ the labels are created (manually or automatically) or you'll get an NPE. I re-worked the GXT code that configures OFC (to give us more flexibility), so I don't recall exactly what is configured automatically if you use only the GXT-provided APIs.

Similar Threads

  1. Line Chart horizontal scroll bar
    By Preeti in forum Ext 3.x: Help & Discussion
    Replies: 4
    Last Post: 5 Jan 2012, 9:02 PM
  2. [CLOSED] Horizontal Stacked Bar Chart Tooltip Issue
    By dsitkin in forum Ext GWT: Bugs (2.x)
    Replies: 1
    Last Post: 10 Nov 2009, 12:13 AM
  3. Stacked Bar Chart Bar Width/Thickness
    By mathec in forum Ext 3.x: Help & Discussion
    Replies: 3
    Last Post: 16 Oct 2009, 10:56 AM
  4. Horizontal Lines in Bar Chart
    By ish90an in forum Ext 3.x: Help & Discussion
    Replies: 0
    Last Post: 3 Sep 2009, 8:23 AM

Thread Participants: 2

Turkiyenin en sevilen filmlerinin yer aldigi xnxx internet sitemiz olan ve porn sex tarzi bir site olan mobil porno izle sitemiz gercekten dillere destan bir durumda herkesin sevdigi bir site olarak tarihe gececege benziyor. Sitenin en belirgin ozelliklerinden birisi de Turkiyede gercekten kaliteli ve muntazam, duzenli porno izle siteleri olmamasidir. Bu yuzden iste. Ayrica en net goruntu kalitesine sahip adresinde yayinlanmaktadir. Mesela diğer sitelerimizden bahsedecek olursak, en iyi hd porno video arşivine sahip bir siteyiz. "The Best anal porn videos and slut anus, big asses movies set..." hd porno faketaxi