Chronoscope

Demo

Large Datasets

Chronoscope supports interactive framerates on datasets with tens of thousands of points by using multiresolution representation and incremental streaming. (Note: may take a few seconds to load, depending on browser and network connection.)

When the number of points about to be plotted exceeds a certain heuristic, Chronoscope falls back to a lower resolution representation of the dataset, which can be provided by the user, or automatically calculated by various filtering algorithms. This is similar to mip-mapping techniques commonly used in 3D graphics to reduce bandwidth and decrease aliasing.

Sending millions of elements to a user's browser might not be a great idea, so Chronoscope supports incremental streaming of remote datasets.

The example below shows a dataset with over 18,000 points (daily US Federal Reserve Funds Rates going back to 1954).

Loading Chronoscope Data...

Multiple Axes, Multiple Dataset Renderers

This page shows two datasets, the first is a large set of FedFunds US Daily Funds Rate data, plotted as an XY line chart. The second set of data is the US unemployment rate, plotted as a bar chart. Chronoscope automatically creates two axes, auto-ranges the ticks, and distributes them on opposite sides of the chart. The positioning of the layout can be modified by using GSS.

Loading Chronoscope Data...

Overlays

Chronoscope allows vector graphic shapes to be overlaid on the chart. Overlays support hit detection, GSS styles, text labels, event handlers, and "info windows". In general, the feature set is similar to Google Maps overlays, which is no surprise, since we drew some of our inspiration for Chronoscope from Google Maps.

The current overlay classes implemented allow 3 different types of marker: those attached to an axis outside the plot area, those attached to an axis inside the plot area (as a vertical or horizontal bar), or those attached to an (x,y) coordinate inside of the plot area.

Markers support pop-up info windows when clicked, and will trigger the chart to animate to their attachment points if they are currently not visible. You can trigger them via Javascript as well.

The example below shows markers in action.

Loading Chronoscope Data...

And the Javascript responsible:

chronoscope.Chronoscope.createTimeseriesChartById("markersdemo", [unratedata], 650, 433, function(view) { var plot = view.getChart().getPlot(); smarker = new chronoscope.Marker("10/10/1972", 0, "S"); smarker.addOverlayListener(function() { smarker.openInfoWindow('Hello, you clicked the "S" marker.'); }); plot.addOverlay(smarker); var amarker = new chronoscope.Marker("10/10/1989", 0, "A"); amarker.addOverlayListener(function() { amarker.openInfoWindow('Hello, you clicked the "A" marker.'); }); plot.addOverlay(amarker); var hmarker = new chronoscope.RangeBarMarker("3", "5", "Ideal Unemployment Range"); plot.addOverlay(hmarker); var vmarker = new chronoscope.DomainBarMarker("1/1/1994", "4/1/2000", "Dot Com Boom"); plot.addOverlay(vmarker); view.getChart().redraw(); });
© Timepedia