Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Google Charts / visualisations column width

I am using the Google Chart API, and converted a line chart (see below) into a column chart, however the column widths change depending on the quantity of data columns. If I hover over, it tells me the correct date, however because of the changing width of the column you cannot actually accurately see the date the column should represent. A point would work, so I could revert to a line chart however, a column does look better for the data set I am using. Any idea how to solve this issue?

Date is dynamic, so the X axis has to be variable.

Thanks

// Create a line chart, passing some options
                var LineChart = new google.visualization.ChartWrapper({
                    'chartType': 'ColumnChart',
                    'containerId': 'chart_div',
                    'options': {
                        'vAxis': {'title': 'Species Abundance', 'minValue': 0, 'maxValue': 32},
                        'width': 300,
                        'height': 300,
                        'legend': 'top',           
                        'title': 'Selected Site and Species abundance over time'
                    },
                    'view': {'columns': [0, 1]},
                });

Example Graphs

like image 934
Tom Avatar asked Dec 09 '13 11:12

Tom


People also ask

How do you change the width of a bar in a Google Chart?

Right-click on any column inside your chart. Select 'Format data series'. Drag the slider under the 'Gap width' to the right to make the columns thinner and to the left to make the columns wider.

How do I change the size of a Google Chart?

Specify Chart Size One very common option to set is the chart height and width. You can specify the chart size in two places: in the HTML of the container <div> element, or in the chart options.

Which chart display column of various length vertically?

A bar chart or bar graph is a chart or graph that presents categorical data with rectangular bars with heights or lengths proportional to the values that they represent. The bars can be plotted vertically or horizontally. A vertical bar chart is sometimes called a column chart.


1 Answers

You can set a maximum width by setting the bar.groupWidth option to an integer number (the number of pixels to use for a bar group). Setting this option makes the API attempt to draw all bar groups (the set of bars at a given axis value) this width, though it may be forced to draw them smaller if the setup of the chart requires it.

bar: {
    groupWidth: 20
}
like image 183
asgallant Avatar answered Nov 11 '22 13:11

asgallant