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

Same as example 3, but shows use of annotations. The granularity of the annotations changes when selecting 1d range.

Files

example7.html

This page. Contains the graph container's HTML, range selector buttons, and this documentation. No javascript.

j/JGS.Demo7Page.js

This is the most relevant file. Contains all of the Dygraphs specific handling. 99% is the same as example 3. Additional code added to load and set annotations. In a non-demo system these annotations could be loaded from server and any number of other ways. The appropriate granularity would be use-case specific. The only caveat is that the annotation.x value must align exactly to an existing x value in the graphed data set.

j/JGS.GraphDataProvider.js

Responsible for getting range and detail data from the server/simulator and then aggregating,splicing, and converting it for dygraphs. This file is shared with example 1 & 2 & 3.

j/JGS.ServerDataSimulator.js

Simulates a remote time series data service. Includes simulated delays. This file is shared with example 1 & 2 & 3.

Back to examples list