Time Filtering

This demo showcases the time range and time picker components of ChartFactor. These are independent components that can also be used together to apply time filters to your visualizations.

The time range filter includes a bar to easily zoom-in and navigate through different time ranges. Change the size of the bar by dragging its left and right handles. Drag the bar to select a different time range.

Alternatively, utilize the time picker to select a date range from its quick presets, relative, and absolute options. Use the “Apply” button to apply the selected time range to all visualizations.

The chart below represents data from a Ticket Sales table residing in our Elasticsearch server. It shows total revenue from ticket sales by category for the time range selected.

If you'd like to see the demo in full screen click here

Review the complete source code and copy/paste it to create your own.

Html

{"action": "import", "url": "../cf-demos/time-filter-demo/index.html"}

Javascript

{"action": "import", "url": "../cf-demos/time-filter-demo/index.js"}

Css

{"action": "import", "url": "../cf-demos/time-filter-demo/style.css"}

The Ticket Sales table is derived from the Amazon’s Sample Database for Redshift. The data represents ticket sales activity for the fictional TICKIT web site, where users buy and sell tickets online for different types of events.