Ultimate JavaScript Network chart package for Graph Visualization and Exploration

Some of the chart types included in Net Chart charts package:
Network chart Hierarchy chart Bubble chart Dot Matrix chart Radial Graph See all

Control at your fingertips.

All the natural and intuitive controls are coming to graph visualization with ZoomChharts Network Chart

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.

Give it a try

That's an actual JavaScript chart demo below.
Hint shows your action to take.
Step 1:

It's easy to set-up and customize

Complex network and graph structures become easily understandable and explorable with Net Chart charts package

Nodes

Every object in the network has it's node with various dynamic and/or pre-set visual options.

Links

Links represent relations and different connection types between those objects.

Items

Actionable items on objects and links provide additional information about them.

Auras

Unique and graphically impressive way to divide graph data visualization into clusters.

Various charts included in package

Net Chart JavaScript charts package includes following charts:
Network charts

Graph chart

Grouped network chart

Radial graph

Area charts

Smooth area

Smooth area

Multiple areas

Multiple areas

Multiple stacked areas

Multiple stacked areas

100% stacked

Area & candlesticks

Area & bars

Area & bars

Area & lines

Area, lines & bars

Area, lines & bars

Bar charts
Line charts

Smooth line

Smooth line

Multiple lines

Area, lines & bars

Area, lines & bars

Donut & pie charts

Multiple level donut

Multiple level pie chart

Gauge charts

Filled gauge

Donut gauge

Multiple level gauge

Stream charts

Single smooth stream

Multiple streams

Multiple smooth streams

Map charts

Location points

Aggregated location points

Donut charts on map

Pie charts on map

Bar charts on map

Connections on map

Shapes on map

Candlestick charts
Waterfall charts

Waterfall categories

Matrix charts
Hierarchy & flow charts

Hierarchy, bottom top

Flow, bottom top

Bubble charts

Network chart visualization integration example

ZoomCharts JavaScript charts are designed to save your time on integration and development.
JavaScript code:
End result:

Start creating interactive, professional graph data visualizations quickly and easily using ZoomCharts JavaScript charts library!

system_update_altStart free