Delivering the best Add-Ons in more than 37 languages.

中文(简体), English, हिन्दी/हिंदी, Español/Castellano, العربية, Русский язык, Français, 中文 (台灣), বাংলা, Bahasa Indonesia, اردو, Português, Deutsch, Bahasa Melayu (بهاس ملايو‎), 日本語 (にほんご), فارسی, Italiano, తెలుగు, Türkçe, ગુજરાતી, Język polski/polszczyzna, Tiếng Việt, ಕನ್ನಡ, Українська мова, ไทย
JavaScript / Ratings and Charts

Google Chart Scroller/Zoomer

— Add-On to

Subscribe to our feed to stay up to date!

New! Follow us as you want it!

Google Chart Scroller/Zoomer - CodeCanyon Item for Sale


Ad: Bluehost hosting

Create your own Google Chart and this jQuery plugin will transform it into a zoomable scrollable chart!

It’s as easy as this:


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

You can even pass in a date range for the x axis and it will create the x axis labels for you. That’s something that the Google Chart API doesn’t provide you. Then, you can also pass in a date just like you do in PHP to get the labels formatted just the way you want.

There is also a function that is provided for you so that you can have links that change the currently zoomed-in range:

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

You have complete control over the styles and colors. The Google Chart API allows you to customize any colors, fonts, etc. in the graphs and every generated HTML element has a class applied for easy CSS styling (it only generates 9 elements).

Here is a list of the options that you can (optionally) pass in:

  • The height of the lower scrolling chart
  • Any additional Google Chart variables that you want to be applied to the lower chart and not to the upper chart
  • The x axis minimum and maximum range (date or number)
  • The default zoomed-in minimum and maximum range (date or number)
  • The number of labels you want to show on the lower chart’s x axis
  • The format for any dates in the axis labels
  • An onChange() callback function that will get called when the user changes the zoomed-in range
  • An onDrag() callback function that will be called as the user drags/resizes the zoomed-in range
  • Gracefully degrades to just show the chart if JavaScript is not enabled

Note: this plugin only works with Google Chart type “lc”

Other components in this categoryAll components of this author
CommentsFrequently asked questions and answers


22 November 09

Last Update:
22 November 09

Compatible Browsers:
IE6, IE7, IE8, IE9, Firefox, Safari, Opera, Chrome

Files Included:
JavaScript JS

Software Version:


eCommerce, eCommerce, All Items, dynamic chart, google chart, scrolling, zooming