where to add chxr for google charts

[google user]

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. 

 

[Andrew Gallant]

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/

[Google API user]

Thank you the very quick reply Andrew... 

 

One more question that I had was, can we have any Horizontal scroll feature ? 

[Andrew Gallant]

The explorer option allows users to scroll horizontally (see my example above).

[Cookie Burner]

i need x-axis step customized show . for example it is showing month scale from 1, and 10 . i need to show each 2 month after x-axis