Google Line Chart
It's pretty easy to create powerful line charts using google charts, once you know how.
This tutorial gives you a minimal single-file example that you can copy/paste into an
index.html file to get you started, along with the explanation of the various configuration options.
Directly below is a video demonstrating the capabilities.
Source Code And Config Explanations
The key thing is to learn and edit the configuration options. I will explain the main ones that I used below.
aggregationTarget- We set this to
auto, because we want to show one tooltip per selected point, rather than just one tooltip for all selected points.
crosshair- by setting a crosshair with orientation vertical, we get that cool line following us along the x-axis as we hover over the graph and select points.
explorer- with the explorer configuration I have set up, the user can use the mouse to zoom by dragging the mouse over the section they are interested in. Right clicking will reset the view. I only wanted to be able to zoom in on the x-axis.
tooltip- I set trigger to
bothso that I could see the tooltip data when hovering, not just when selecting a point.
selectionMode- by setting this to multiple, I can have multiple points selected at the same time, not just one!
First published: 16th August 2018