Google Chart Scroller/Zoomer

Create your individual Google Chart and this jQuery plugin will develop into it right into a zoomable scrollable chart!

It’s as simple as this:

$('#chart').gChartScroller();

It creates a smaller chart that is now not zoomed-in underneath. Then, using your mouse, you'll zoom in and scroll across the x axis.

you'll even pass in a date range for the x axis and it'll create the x axis labels for you. That’s something that the Google Chart API doesn’t provide you. Then, you'll additionally move in a date identical to you do in PHP to get the labels formatted simply the way in which you need.

there may be also a serve as that is supplied for you in order that you'll be able to have links that change the these days zoomed-in range:

$('#chart').gChartSet(startX, endX);

you have got whole keep watch over over the kinds and colours. The Google Chart API permits you to customize any colors, fonts, etc. within the graphs and each generated HTML component has a category applied for easy CSS styling (it handiest generates NINE components).

This Is an inventory of the options that you'll be able to (optionally) go in:

• the height of the lower scrolling chart
• Any additional Google Chart variables that you wish to have to be applied to the lower chart and not to the higher chart
• The x axis minimal and most range (date or quantity)
• The default zoomed-in minimum and maximum range (date or quantity)
• The selection of labels you want to show at the lower chart’s x axis
• The layout for any dates within the axis labels
• An onChange() callback function so they can get called whilst the person changes the zoomed-in vary
• An onDrag() callback serve as so they can be known as as the consumer drags/resizes the zoomed-in vary
• Gracefully degrades to only show the chart if JavaScript is not enabled

Word: this plugin best works with Google Chart kind “lc”

FULL DOWNLOAD