CODEWITHSUNDEEP
google-visualization
Andy B
Andy B

Reputation: 205

How to adjust column width in google combo chart

How do I adjust the column width on a google combo chart? Below is my code, but I can't figure out how to set the column width. Depending on the data I enter, the api makes the columns different widths. I'd like them all 10px. I've been trying to set the with with bar.groupWidth but cannot. Any ideas?

<script type="text/javascript">

google.load("visualization", "1", {packages:["corechart"]});

google.setOnLoadCallback(drawChart);

function getValueAt(column, dataTable, row) {
    return dataTable.getFormattedValue(row, column);
}

function drawChart() {
    var data = google.visualization.arrayToDataTable([
        ['Time', 'Boluses', 'Total Volume', '30 mL/kg', { role: 'annotation' }], [0,0,0,1769.1, null],[9, 500, 500, 1769.1, null],[29, 250, 750, 1769.1, null],[44, 250, 1000, 1769.1, null],[114, 2000, 3000, 1769.1, null],[238, 0, 3000, 1769.1, null],[238, 0, 3000, 1769.1, null],[288, 85, 3085, 1769.1, null],[288, 6.8, 3091.8, 1769.1, null],[348, 100, 3191.8, 1769.1, null],[348, 8, 3199.8, 1769.1, null],[408, 100, 3299.8, 1769.1, null],[408, 8, 3307.8, 1769.1, null],[360, 0, 3307.8, 1769.1, null]
    ]);

    var view = new google.visualization.DataView(data);

    var options = {
        title: 'sepsis treatment summary',
        fontName: 'Lato', 
        titleTextStyle: {fontSize: 18},
        annotation: {},
        vAxis: {title: 'total fluids received (mL)', minValue: 0, gridlines: {count: 6}},
        hAxis: {title: 'time after alert (minutes)', viewWindow: {min: 0, max: 360}, gridlines: {count: 6}},
        seriesType: "bars",
            series: { 
                1: {color: '#99CCFF', type: "area"},
                2: {color: 'red', type: "line", lineDashStyle: [10, 2]},
                3: {role: "annotation"}
            },
        annotations: {style: 'line'},
    };

    var chart = new google.visualization.ColumnChart(document.getElementById('chart'));

    chart.draw(view, options);

}

This code creates the following chart: google chart

Upvotes: 0

Views: 1801

Answers (1)

asgallant
asgallant

Reputation: 26330

The API calculates a maximum width for each bar group that is roughly:

var chartWidth, // chart area width in pixels
    axisRange, // axis max value - axis min value
    data, // DataTable, assume axis values are in column 0 for this exercise, and that data is sorted ascending
    minSeparation = axisRange, // will hold the minimum separation between daat points
    barGroupWidth;
// calculate the minimum distance between any two adjacent points
for (var i = 1; i < data.getNumberOfRows(); i++) {
    if (data.getValue(i, 0) - data.getValue(i - 1, 0) < minSeparation) {
        minSeparation = data.getValue(i, 0) - data.getValue(i - 1, 0);
    }
}
// calculate the maximum width of a bar group
barGroupWidth = chartWidth * minSeparation / axisRange;

Pleaase note that this function is a rough approximation of what the API does based on what I was able to reverse engineer.

So, if you have a chart that has a chart area 300 pixels wide with an axis range of 100 and a minimum separation between adjacent points of 10, your maximum bar group width will be 30 pixels. If you try to set the bar group width above this value, your setting will be ignored.

In your case, you have adjacent points with a separation of 0 (rows 5 and 6, 7 and 8, 9 and 10, 11 and 12), which would result in a bar group width of 0 by my rough approximation. The actual algorithm is more generous, and is likely giving you 1 pixel wide groups. There is no setting you can change to make the bar groups wider, your only recourse is to change your data set to space the values out more. This may not be easy to do, but I would suggest starting by thinking about what it means to have two events at the same time with different values, and how you might be able to represent that differently.

Upvotes: 1

Related Questions