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.