{"id":12352,"date":"2022-02-11T19:47:02","date_gmt":"2022-02-11T19:47:02","guid":{"rendered":"https:\/\/mailinvest.blog\/index.php\/2022\/02\/11\/google-chart-scroller-zoomer\/"},"modified":"2022-02-11T19:47:02","modified_gmt":"2022-02-11T19:47:02","slug":"google-chart-scroller-zoomer","status":"publish","type":"post","link":"https:\/\/mailinvest.blog\/index.php\/2022\/02\/11\/google-chart-scroller-zoomer\/","title":{"rendered":"Google Chart Scroller\/Zoomer"},"content":{"rendered":"<\/a>\n

LIVE PREVIEW<\/a>BUY FOR $7<\/a><\/p>\n

<\/p>\n

Create your own Google Chart and this jQuery plugin will transform it into a zoomable scrollable chart!<\/p>\n

It’s as easy as this:<\/p>\n

\n$('#chart').gChartScroller();\n<\/pre>\n
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.<\/p>\n
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.<\/p>\n
There is also a function that is provided for you so that you can have links that change the currently zoomed-in range:<\/p>\n
\n$('#chart').gChartSet(startX, endX);\n<\/pre>\n
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).<\/p>\n
Here is a list of the options that you can (optionally) pass in:<\/p>\n
    \n
  • The height of the lower scrolling chart<\/li>\n
  • Any additional Google Chart variables that you want to be applied to the lower chart and not to the upper chart<\/li>\n
  • The x axis minimum and maximum range (date or number)<\/li>\n
  • The default zoomed-in minimum and maximum range (date or number)<\/li>\n
  • The number of labels you want to show on the lower chart’s x axis<\/li>\n
  • The format for any dates in the axis labels<\/li>\n
  • An onChange() callback function that will get called when the user changes the zoomed-in range<\/li>\n
  • An onDrag() callback function that will be called as the user drags\/resizes the zoomed-in range<\/li>\n
  • Gracefully degrades to just show the chart if JavaScript is not enabled<\/li>\n<\/ul>\n
    Note: this plugin only works with Google Chart type “lc”<\/p>\n