How to use

ZoomCharts library is created completely from scratch, thinking about data exploration from very beginning.

Custom coded multi-touch interaction layer combined with an extensive API results in an amazing charts that feel alive when you touch them!

How to explore data using ZoomCharts?

  • Click/tap on charts
  • Use gestures like drag/pinch/swipe

Pie Chart

Explore multi-level data in depth and across the level of interest.

Drill-down to next sub-category of data

Drill-down to the next sub-category of data. Drill-down levels are not limited.


Click on a slice or on the label.

Tap on a slice or on the label.

Drill-up one level.

Go back to the previous upper-level of the data.


Click in the middle of a chart.

Tap in the middle of a chart.

Select slice.

By default slice will be selected with a click if there is no more drill-down available. If there is drill-down available, clicking on slice will invoke drill-down.


Click on a slice or on the label.

Tap on a slice or on the label.

Select multiple slices.

Click on a slice holding down ctrl or shift key to select multiple facets.


Ctrl + Click on a slice or on the particular label.

Expand "others" slice.

Expand others slice to see more data.


Click on the "others" slice or on the particular label.

Tap on the "others" slice or on the particular label.

Expand "previous" slice.

Expand others slice to go back to main results.


Click on the "previous" slice or on the particular label.

Tap on the "previous" slice or on the particular label.

Facet Chart

Explore single and multi-dimensional data with optional side-by-side comparison

Drill-down to next sub-category of data

Drill-down to the next sub-category of data. Drill-down levels are not limited.


Click on a column/bar

Tap on a column/bar

Drill-up one level.

Go back to the previous upper-level of the data.


Click on the chart and drag up. Release when desired zoom level reached. You may also use dedicated "Zoom out" button.

Tap on the chart and drag up. Release when desired zoom level reached. You may also use dedicated "Zoom out" button.

Go back

Return chart to previous state before recent interaction happened.


Use dedicated "Back" button.

Finetune zoom

You may finetune your chart appearance by dragging up/down and left/right. Dragging it up will zoom in. Dragging it down will zoom out. Left or right drag will move x-axis to left or right revealing more data.


Click on the chart and drag to any direction. You may use dedicated "left" and/or "right" buttons which become visible if there is more data available in the particular direction

Tap on the chart and drag to any direction. You may use dedicated "left" and/or "right" buttons which become visible if there is more data available in the particular direction

Toggle Lin/Log view

Toggle y-axis from linear to logarithmic scale and back.


Use dedicated "Lin/Log" button.

Export displayed view

Export chart to various formats.


Use dedicated "Export" button.

Select a facet

By default facet will be selected with a click if there is no more drill-down available. If there is drill-down available, clicking on facet will invoke drill-down.


Click on a column/bar

Tap on a column/bar

Select multiple facets

Click on a facet holding down ctrl or shift key to select multiple facets.


Ctrl + Click on a column/bar.

Hide/Show series

Click on a legend (if legend is enabled) to toggle visibility of a particular series.

Legend is not enabled by default.

Click on a legend label/bar

Tap on a legend label

Time Chart

The most efficient way of exploring time-based data

Drill-down to next time unit

Drill down to a next time measurment unit. E.g.: Drill down from a yearl by months view to a month by days view.


Click on a column/bar.
Click on an imaginable column if chart view mode is set to lines or areas.

Tap on a column/bar.
Tap on an imaginable column if chart view mode is set to lines or areas.

Drill-down to larger time period

Timeline axis has two time scale informational elements. Upper line shows time scale for the visualized time grain. Bottom line shows information in larger time scale. You are able to reposition and zoom the visible time range to fit bottom lines timeframe.


Click on a bottom line label

Tap on a bottom line label

Zoom out

Zoom out to view a larger time period.


Click on the chart and drag up. Release when desired zoom level reached. You may also use dedicated "Zoom out" button.

Pinch out horizontally on the chart. Tap on the chart and drag up. Release when desired zoom level reached. You may also use dedicated "Zoom out" button.

Zoom in

Zoom in to view a smaller time period.


Click on the chart and drag down. Release when desired zoom level reached.

Pinch in horizontally on the chart. Tap on the chart and drag down. Release when desired zoom level reached.

Go back

Return chart to previous state before recent interaction happened.


Use dedicated "Back" button.

Scroll back (time)

Change the displayed time period to earlier.


Click on the chart and drag to the right. Chart will continue movement by inertia and stop. Click again to stop it manually.

Tap on the chart and drag to the right. Chart will continue movement by inertia and stop. Tap again to stop it manually.

Scroll forward (time)

Change the displayed time period to later.


Click on the chart and drag to the left. Chart will continue movement by inertia and stop. Click again to stop it manually.

Tap on the chart and drag to the left. Chart will continue movement by inertia and stop. Tap again to stop it manually.

Finetune visible time period

Finetune visible time period of the chart by changing the zoom level and adjusting start and end points of the visible time span by single interaction.


Click on the chart and drag to any direction. Release when desired zoom level reached.

Tap on the chart and drag to any direction. Release when desired zoom level reached.

Select time period

Select time period of your liking to view totals for the selection and drill-down to the selected time period if you wish.


Click and drag horizontally on the timeline axis to select time region.

Tap and drag horizontally on the timeline axis to select time region.

Change selected time period

Edit the selected time period.


Click on the selection side and drag it horizontally.

Tap on the selection side and drag it horizontally.

Remove selection

Remove the selection of the time period.


Right click on the selected area.

Tap and hold on the selected area.

Drill-down to selected time period

Drill-down and zoom in to a selected time period.


Click on the selected area.

Tap on the selected area.

Change time grain

Choose different time agreggation unit.


Use dedicated "Displayed time unit" button.

Toggle Lin/Log view

Toggle y-axis from linear to logarithmic scale and back.


Use dedicated "Lin/Log" button.

Export displayed view

Export chart to various formats.


Use dedicated "Export" button.

Net Chart

Explore and navigate network data with interactive JavaScript Net Chart for gaph data visualization

Expand nodes neighbours

Click (tap) on a node to expand it's neighbours. By doing so will allow you to dynamically explore the network.


Click on a node

Tap on a node

Expand nodes neighbours in 2 levels and focus the double-clicked node

Double click (double tap) on a node to expand it's neighbours in 2 levels and focus the node.

Available if network visualization has focus mode enabled.

Double click on a node

Double tap on a node

Move node

Moves the node to other position and switches the particular node to a "fixed" state so it stays where you placed it even if other parts of the network are being moved around.


Click and drag a node

Tap and drag on a node

Rotate graph

Rotates the whole network visualization

Feature is disabled by default. Has to be enabled in configuration.

Two finger rotate movement

Show more info about node

Shows info window (Modal window) with additional information about the node. Also has action menu by default.


Right click

Long-press

Fix nodes location

Make nodes location fixed so it does not move while user interacts with any other part of the network.


Click and drag a node, it will become fixed. r right click it to show info window and use the "Pin" option from action menu inside of the info window.

Tap and drag a node, it will become fixed. Or long-press to show info window and use the "Pin" option from action menu inside of the info window.

Hide node and it's neighbours

To make node and it's neighbours disappear from the visualization.


Use "Hide" option in the action menu of the info window.

Hide nodes neighbours

Collapses the nodes neighbours, leave the node visible.


Use "Collapse" option in the action menu of the info window.

Zoom in/out graph visualization

Control the zoom level of graph visualization


Scroll mouse wheel to zoom in or out. Double click on an empty section to zoom in. Or use zoom controls in the toolbar of the chart.

Use pinching gestures to pinch in or out. Place fingers on the empty areas of the network visualization or you will invoke dragging function. Or use zoom controls in the toolbar of the chart.

Select a node

Selects a node making it available for further actions.


Click on a node

Tap on a node

Select multiple nodes

Select multiple nodes making them available for further actions.


Use "Ctrl + Click" or "Shift + Click" on the nodes you wish to select.

Multiple nodes selection is available by rectangular selection option only.

Rectangular selection of nodes

Select multiple nodes using rectangle selection option.


Click and hold on an empty area. When cursor turns to crosshair, drag it for a rectangle selection.

Tap and hold on an empty area. In a second or two, drag your finger for a rectangle selection.

Fit network visualization to screen for an overview

Fits all network to the screen by adjusting the zoom level and positioning of the network visualization. Layout of the nodes stays intact.


Use "Fit to screen" option in the toolbar of the chart.

Rearrange all nodes

Rearranges all nodes dynamically for the best possible layout


Use "Rearrange" option in the toolbar of the chart.

Lock all nodes

Fix the position of all nodes for the network visualization


Use "Lock all nodes" option in the toolbar of the chart.

Fullscreen

Resize the network chart visualization to fit full screen


Use "Fullscreen" option in the toolbar of the chart.

Revert action

Revert (undo) your last interaction with the network chart.


Use "Back" option in the toolbar of the chart.

Geo Chart

Location based data on an interactive map

Zoom in/out

Control map zoom level.


Use common gestures like scroll or double click.

Use pinch gestures.

Drill-down/Drill-up

Use zoom controls to drill-up or drill-down in your data as you change the zoom level of the map.

Depends on configuration of dynamic data agreggation.

Use common gestures like scroll or double click.

Use pinch gestures.