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

This example shows that the overall technique works with live continuous data loading as well, but it requires some additional handling and complexity. The main difference when using live data and dynamic zooming, is that it's necessary to prevent changing graph automatically unless the user intends to be looking at the most recent live data continuously. This is highly dependent on user interface design and expectations.

In this simple example, if the user has zoomed in to detail view with the detail end time less than 10 seconds from current time, then code assumes user intends to look at the most recent live data continuously and so it resets the detail window end time on each data load. If the user pans/zooms away from the current time, then code does not automatically reset detail view even though new data is still continuing to be loaded and will be visible in the range viewer.

Note that the original demos were not written with live data loading in mind. Some minor refactoring would make for much cleaner implementation.

Files

example6.html

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

j/JGS.Demo6Page.js

This is the most relevant file. Contains all of the Dygraphs specific handling. 90% the same as example 3, but adds live data loading and additional hooks to track mouse button to prevent redrawing with live data while user is interacting.

j/JGS.GraphDataProviderLive.js

Responsible for getting range and detail data from the server/simulator and then aggregating,splicing, and converting it for dygraphs. This file is same as the GraphDataProvider used for example 1 & 2 & 3, but uses GraphDataSimulatorLive.js to source data.

j/JGS.ServerDataSimulatorLive.js

Simulates a remote time series data service. Includes simulated delays. This file is the same as ServerDataSimulator used in example 1 & 2 & 3, but also simulates loading of new live data on each data load call. This is poorly coded and is meant only to support this demo.

Back to examples list