Auto Width Scroll Bar In Google Chart

I using the Google Chart for in my HTML5 Project. which takes the JSON values ( from DB ) to plot the graph. my need is to have a scroll bar if the datas are more than 5 to 6 in th

Solution 1:

Here's the solution: http://jsfiddle.net/hsakX/

Set the bar.groupWidth option to fix the width of the bars. Then make the width of the chart a function of the bar-width and the number of bars to be displayed:

var options = {            
    title: 'Company Performance',
    hAxis: {title: 'Year', titleTextStyle: {color: 'red'}},
    width: data.getNumberOfRows() * 65,
    bar: {groupWidth: 20}
};

Set the overflow-x on the containing div to scroll:

#chart_div {
 overflow-x: scroll;
 overflow-y: hidden;     
 width: 500px;
 height: 550px;
}