Horizontal Bar Chart

[kudos_ni_]

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:

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);            
        }
    }

[sven]

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.

[kudos_ni_]

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;
    }
}

[crehbein]

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.

[kudos_ni_]

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?

[crehbein]

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.