Search code examples
androidgraphchartsbar-chartandroid-graphview

Reducing Bar graph width in Android Graphview library


I am using GraphView Library for creating Bar graph as shown in picture, I need to reduce width of bars and increase space between bars. Note- Red bars are currently what I'm getting and what I actually need is shown in black. enter image description here

Below is the code snippet for the above graph:

    GraphViewSeriesStyle barStyle = new GraphViewSeriesStyle();
    barStyle.thickness = 5;
    barStyle.setValueDependentColor(new ValueDependentColor() {
        @Override
        public int get(GraphViewDataInterface data) {
            return Color.rgb(205, 0, 0);
        }
    });

    // init example series data
    GraphViewSeries scoreSeries = new GraphViewSeries(
            "HealthCare Bar Graph", barStyle, new GraphViewData[] {
                    new GraphViewData(1, rsCVD),
                    new GraphViewData(2, rsHypertension4),
                    new GraphViewData(3, rsHypertension2),
                    new GraphViewData(4, rsHypertension1) });


    GraphView graphView = new BarGraphView(this // context
            , "GRAPH_VIEW_HEADING" // heading
    );

    graphView.setHorizontalLabels(new String[] { "1", "2",
            "3", "4" });


    graphView.addSeries(scoreSeries);
    graphView.setViewPort(0, 25);
    graphView.setScalable(true);

    graphView.getGraphViewStyle().setHorizontalLabelsColor(Color.BLACK);
    graphView.getGraphViewStyle().setVerticalLabelsColor(Color.BLACK);

    graphView.getGraphViewStyle().setTextSize(16);
    graphView.getGraphViewStyle().setGridColor(Color.WHITE);
    // graphView.getGraphViewStyle().setLegendWidth(legendWidth)

    int maxValue = myScore+1;
    // search the interval between 2 vertical labels
    double interval;
    if (maxValue >= 0 && maxValue < 3) {
        interval = 0.5; // increment of 1 between each label
    } else if (maxValue >= 3 && maxValue < 55) {
        interval = 5; // increment of 5 between each label
    } else if (maxValue >= 55 && maxValue <= 110) {
        interval = 10; // increment of 10 between each label
    } else {
        interval = 20; // increment of 20 between each label
    }
    // search the top value of our graph
    int maxLabel = maxValue;
    while (maxLabel % interval != 0) {
        maxLabel++;
    }
    // set manual bounds
    graphView.setManualYAxisBounds(maxLabel, 0);
    // indicate number of vertical labels
    int numVerticalLabels = (int) ((int) maxLabel / interval + 1);
    Log.v(TAG, "numVerticalLabels: " + numVerticalLabels);
    graphView.getGraphViewStyle().setNumVerticalLabels(numVerticalLabels);

    graphView.getGraphViewStyle().setVerticalLabelsWidth(20);
    // graphView.getGraphViewStyle().setLegendWidth(20);
    graphView.getGraphViewStyle().setLegendSpacing(30);

    // LinearLayout layout = (LinearLayout) findViewById(R.id.layout);
    m_llayForRiskGraphContainer.addView(graphView);

Solution

  • there's currently no build in method to do this. but if you want to, you can easily modify the code. The point where you can add a spacing is here:

    BarGraphView.java Line 95:

    float left = (i * colwidth) + horstart -offset;
    float top = (border - y) + graphheight;
    float right = ((i * colwidth) + horstart) + (colwidth - 1) -offset;
    canvas.drawRect(left, top, right, graphheight + border - 1, paint);
    

    Just add a few pixels to left and remove a few pixels from right and it will look like you want.

    https://github.com/jjoe64/GraphView/blob/master/src/main/java/com/jjoe64/graphview/BarGraphView.java#L97