Автоматическая ширина полосы прокрутки в Google Chart

Question

Я использую Google Chart для в моем проекте HTML5. который берет значения JSON (из БД) для построения графика.

мне нужно иметь полосу прокрутки, если в JSON Value больше 5-6 данных. Я создал образец прикрепленной ссылки через JSFiddle.

В настоящее время я дал 22 значения. Мне нужен тот же эффект, когда значение JSON имеет 3 или 4 значения. Не должно быть никаких изменений в ширине полосы, она должна поддерживать ту же ширину, даже если JSON имеет 50 значений.

Пожалуйста, предоставьте мне решение, большое спасибо.:)

Вот ссылка: - http://jsfiddle.net/gK9r7/

Answer 1

Вот решение: http://jsfiddle.net/hsakX/

Установите параметр bar.groupWidth, чтобы зафиксировать ширину столбцов. Затем сделайте ширину графика функцией ширины бара и количества отображаемых баров:

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

Установите overflow-x на содержащем div для прокрутки:

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