The "chxr" parameter is for the Image Chart API, not the Interactive Chart
API, so you can't use it here. You can instead use the
hAxis.viewWindow.min/max option, which allows you to specify the min and
max values on the axis:
hAxis: {
title: 'Status of document',
titleTextStyle: {
color: 'black'
},
viewWindow: {
min: 2,
max: 2500
}
}
If you want the ability to pan the chart, you need to use the explorer
option:
explorer: {
axis: 'horizontal'
}
The explorer option allows users to click and drag to pan the chart, use
the mouse wheel to zoom in and out. Note that the explorer option
overrides the hAxis.viewWindow options, so you can use one or the other,
but not both.
See an example here: http://jsfiddle.net/asgallant/t5vxqLbb/
On Thursday, August 7, 2014 8:22:04 AM UTC-4, Google API user wrote:
>
> Hello,
>
> I am using the Google API to build the bar charts. Its working fine. But I
> need to do some more customization to that chart. I have to increase the
> range of the values on the X-Axis and if possible i need to have a
> horizontal scroll bar for the graph, if the X-Axis value exceeds certain
> value.
>
> I have seen the *chxr property *to add the range and step on the axis*. * But
> am not sure where to add this property in the chart options.Is there an
> option to get a *horizontal scroll bar *on the X-Axis ? My source code is
> as shown below
>
> For Example : I have X-Axis maximum value is 2500, minimum value is 2. In
> this case the minimum value is shown on the Chart but its not clearly
> visible because of the range.
>
>
> var studyData = new google.visualization.DataTable();
> studyData.addColumn('string','XYZ Name');
> studyData.addColumn('number','Completed');
> studyData.addColumn('number','Pending ');
> studyData.addColumn('number','Over Due');
>
> studyData.addRow(['ABC Doc', 2543, 15, 24]);
> studyData.addRow(['GED-Doc', 34, 2, 25]);
>
> var studyOptions = {
> title: 'Study Status',
> fontName: 'Times-Roman',
>
> fontSize: 12,
> vAxis: {title: 'Study Name', titleTextStyle: {color: 'red'}},
> hAxis: {
> title: 'Status of document', titleTextStyle: {color:
> 'black'}},
> width:1000,height :450,
> legend : {position: 'right', textStyle: {color: 'blue',
> fontSize: 12}},
>
> bar : {
> // chxr=0,0,2500,100
> groupWidth : '45%'
> },
> isStacked : true,
> colors: ['#31B404', '#FFBF00', '#FF0000']
> };
>
>
> var chartB = new
> google.visualization.BarChart(document.getElementById('chart_divs'));
> chartB.draw(studyData, studyOptions);
>
>
> Thanks for the help in advance.
>
>
>
--
You received this message because you are subscribed to the Google Groups
"Google Visualization API" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To post to this group, send email to [email protected].
Visit this group at http://groups.google.com/group/google-visualization-api.
For more options, visit https://groups.google.com/d/optout.
