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
    Sencha User
    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