Fork me on GitHub

Using Dygraphs to load down-sampled data while zooming - Example 5

This examples shares majority of javascript and setup as previous examples, but shows a 2nd y-axis and adds support for plotting multiple independent series.

Files

example5.html
This page. Contains the graph container's HTML, range selector buttons, and this documentation. No javascript.
j/JGS.Demo5Page.js
Contains all of the Dygraphs specific handling. The majority of this file is the same as previous examples, however, additional setup and formatting has been added to load multiple series and show a 2nd y-axis.
j/JGS.GraphDataProviderMultiSeries.js
This is a new class created for this example. It is a more generic version of the same class used in previous examples for getting range and detail data from the server/simulator and aggregating,splicing, and converting it for dygraphs. What this class adds is support for combining multiple series in to a single dataset useable by dygraphs even when the time axis does not align between the series. For details, see comments and code around the JGS.Demo5Page._combineSeries method.
j/JGS.ServerDataSimulator.js
Simulates a remote time series data service. Includes simulated delays. This file is shared with all the other It was modified slightly while building this example so that multiple series have different trending and value ranges.