Question

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 the JSON Value.
I have created the sample attached link via JSFiddle.

currently i have given 22 values. i need the same effect when the JSON value has 3 or 4 values. There shd not be any change in the bar width it should maintain the same width even if the JSON has 50 values.

Kindly provide me the solution thank you so much. 🙂

Here is the link : – http://jsfiddle.net/gK9r7/

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