Create your personal Google Chart and this jQuery plugin will remodel it right into a zoomable scrollable chart!
It’s as simple as this:
It creates a smaller chart that isn’t zoomed-in beneath. Then, utilizing your mouse, you possibly can zoom in and scroll throughout the x axis.
You possibly can even move in a date vary for the x axis and it’ll create the x axis labels for you. That’s one thing that the Google Chart API doesn’t present you. Then, it’s also possible to move in a date identical to you do in PHP to get the labels formatted simply the best way you need.
There’s additionally a perform that’s offered for you as a way to have hyperlinks that change the at the moment zoomed-in vary:
You may have full management over the types and colours. The Google Chart API lets you customise any colours, fonts, and so on. within the graphs and each generated HTML component has a category utilized for straightforward CSS styling (it solely generates 9 components).
Here’s a checklist of the choices that you would be able to (optionally) move in:
- The peak of the decrease scrolling chart
- Any extra Google Chart variables that you just need to be utilized to the decrease chart and to not the higher chart
- The x axis minimal and most vary (date or quantity)
- The default zoomed-in minimal and most vary (date or quantity)
- The variety of labels you need to present on the decrease chart’s x axis
- The format for any dates within the axis labels
- An onChange() callback perform that may get referred to as when the consumer modifications the zoomed-in vary
- An onDrag() callback perform that might be referred to as because the consumer drags/resizes the zoomed-in vary
Word: this plugin solely works with Google Chart kind “lc”