All ZoomCharts Demos

Chart Types - Network Charts

Bubble map (mind map)

Radial graph chart displaying all data

Radial graph chart with expandable nodes

Graph chart

Chart Types - Area charts

100% stacked area chart

Area chart

Area chart smooth

Bar and area chart

Bar, line and area chart

Line and area chart

Multiple areas chart

Candlestick and area chart

Multiple areas chart normal stacking

Multiple areas chart based stacking

Stacked area chart with normal stacking using time based data

Stacked area chart with based stacking

Area chart

Bar, line and area chart

Bar and area chart

Stacked area chart with normal stacking using categorical data

Stacked area chart with based stacking

Multiple areas chart with normal stacking, categorical data

Multiple areas chart with based stacking, categorical data

Area chart with smoothing

Multiple area streams with solid fill

Multiple smooth area streams with gradient fill

Time Chart - stacked area

World population since 1960's

Chart Types - Bar charts

Bar chart with time based data

100% stacked bars chart

Bar and area chart

Bar, line and area chart

Side by side bar chart

Bar, line and area chart

Bar and area chart

Side by side bar chart

Time Chart - stacked bars

Global emissions since 1751

Horizontal bar chart

Bar chart with dark theme

Chart Types - Line charts

Line chart with time based data

Line chart with smoothing

Bar, line and area chart

Line and area chart

Line and bar chart

Multiple lines chart

Line Chart

Bar, line and area chart

Line Chart with smoothing

Chart Types - Donut & Pie charts

Donut chart with grouping and drill-down

Donut chart with drill-down

Donut chart with background image, grouping and drill-down

Multiple level donut chart with others grouping

Map and donut chart

Pie chart - donut, bevel theme, hierarchical structure

Browser shares (sample data). Click to explore

Pie Chart - donut, 3d (raised) theme, hierarchical

Car manufacturers, totals, year 2012

Pie Chart - donut, one level

Example on raised theme and with just one level of data.

Chart Types - Gauge charts

Single level gauge chart

Multiple level gauge chart

Gauge chart filled centre

Gauge with live data

Using PieChart you can create a gauge chart by simply specifying some settings. The example also demonstrates how chart responds to live data.

Chart Types - Stream charts

Multiple streams chart with solid fill and smoothing

Multiple area streams with solid fill

Multiple smooth area streams with gradient fill

Stream chart from zero line

Stream chart

Chart Types - Map charts

Map chart

Driving time between cities on the map

Some locations on the map

Bubble map chart

Network chart over world map

Map and donut chart

Grouped bubble map chart

Droplet shapes and custom map

Use droplets shapes to enhance item position.

Chart Types - Candlestick charts

Candlestick chart

Candlestick and area chart

Candlestick chart (bar)

Candlestick series type

Euro / USD: 2014.01.01 - 2015.03.14

Chart Types - Waterfall charts

Waterfall chart

Multiple level span chart with categorical data

Chart Types - Matrix charts

Dot matrix chart

Chart Types - Hierarchy & flow charts

Hierarchy chart

Category hierarchy layout mode

Hierarchy layout of nodes with links and images

Positions nodes in levels depending on their relations

Hierarchy layout of nodes

Positions nodes in levels depending on their relations

Chart Types - Bubble charts

Bubble map (mind map)

Bubble chart

Bubble map chart

Grouped bubble map chart

Features - Aura

Auras on dark theme

Shows how auras can be customized and how they look on dark theme.

Auras on light theme

Features - Legend

Pie chart with grouping, drill-down and legend

Grid Legend

Inline Legend

Inline Single Line Legend

Clickable legend

Legend works as a filter for PieChart. Click on label item to drill down into corresponding slice on the chart.

Legend placement

Example where chart legend is palced on top of the cart. Note that legend can be positioned also on the right or left or bottom (default setting if legend is enabled).

TimeChart Legend

Use legend to show or hide some series.

FacetChart Legend

Use legend to show or hide some series.

Legend represented classes

Features - Charts on charts

Showing driving time of connected cities

Network chart over world map

Social network

Piechart on netchart

Simple example that loads piechart on netchart node onclick

Piechart on netchart

Simple example that loads piecharts on a netchart nodes

Features - Cross filtering

Browser usage on different charts with cross-filtering

Global sales data

Impressive example on how to use almost all of the ZoomCharts chart packages to create an amazing fully interactive dashboard. In this case it is sales data, but just image your own data here!

Filtering bank statements

Features - Big data

Central Layout Gravity

Clusters

Panama Papers

Network Graph - big data network

Anonymous company data (5220 nodes, 6047 links).

Features - Stacking

Stacked column chart with normal stacking

Stacked area chart with normal stacking using time based data

Stacked multiple level bar chart with time based data

Stacked bars. Black theme.

Global emissions since 1751

Time Chart - stacked bars

Global emissions since 1751

Time Chart - stacked area

World population since 1960's

Stacked series

Facet Chart - clustered and stacked series, one level

Passenger cars in use totals, year 2012

Features - Filtering

Interactive highlight

Hover on node to highlight path to it.

Interactive node filtering

Use the slider below to filter persons by age.

Features - Realtime data

WiFi status like visualization

Example on how to dynamically and automatically change style for individual chart columns. Randomly columns are colored green or red to imitate WiFi status behaviour.

Gauge with live data

Using PieChart you can create a gauge chart by simply specifying some settings. The example also demonstrates how chart responds to live data.

Realtime data source

Sample where an external function is used to add data in real time using `addData` method.

Features - Events

Long press event

PieChart events tester

A demo with prepared event logging. Various events and data will be outputted in a special window.

TimeChart events tester

Event log shows events as they are fired.

Dashboards - Prototypes

Browser usage on different charts with cross-filtering

Fraud inspector

Cinema Browser

Panama Papers

Global sales data

Impressive example on how to use almost all of the ZoomCharts chart packages to create an amazing fully interactive dashboard. In this case it is sales data, but just image your own data here!

Crime analytics

A dashboard that shows crime analytics using multiple ZoomChart's chart packages.

User demographics

Different kind of app demonstration that allows you to input your own data. Another great example of what you can achieve in your product.

Filtering bank statements

Chart Packages - NetChart

Twitter data shapes and nodes

Twitter data on map.

Auras on dark theme

Shows how auras can be customized and how they look on dark theme.

Hierarchy chart

Bubble map (mind map)

Radial network chart displaying all data

Radial network chart with expandable nodes

Network chart

Bubble chart

Network chart using random radiuses

Flow chart

Driving time between cities on the map

Network chart

Dot matrix chart

Network chart over world map

Radial graph chart displaying all data

Radial graph chart with expandable nodes

Grouped Network chart

Graph chart

Long press event

Central Layout Gravity

Category hierarchy layout mode

NetChart Value Axis enhancements

Clusters

NetChart Layout Switch

Auras on light theme

Various navigation modes

Companies & Shareholders

Social network

Fraud inspector

Cinema Browser

Panama Papers

Graph Editor

Link items example

Links have extra items showing star.

Piechart on netchart

Simple example that loads piechart on netchart node onclick

Hierarchy layout of nodes with links and images

Positions nodes in levels depending on their relations

Dashed nodes and links

Shows how to style labels, links and nodes by using dashes.

Focus nodes

The orange node is the focus, showing all nodes 2 levels deep. Double click on a node to focus it.

Random colors example

Shows how to assign colors to nodes and links.

Arrows demo

Shows how to assign link decorations to build arrows.

Built-in shapes

Shows how to specify one of the builtin node shapes and what they look like

NetChart with dark theme

Radial net layout representing tree data

Positioning net nodes so that they expands outwards radially.

Hierarchy layout of nodes

Positions nodes in levels depending on their relations

Adding data incrementally

The web application manually adds data by calling chart.addData.

Node items example

Nodes have extra items showing star and age.

Force directed net layout

Positioning graph nodes so that the edges are mostly equal length and there are as few crossing edges as possible.

Dashed nodes and links

Shows how to assign different dash areas.

Image nodes look style

This is one of available node rendering styles.

Pinned node style demo

Uses style settings to display an icon for pinned nodes.

Round text nodes look style

This is one of available node rendering styles.

Style is embedded in data

Nodes and links have style attribute in data and no style functions are used.

Text nodes look style

Multiline labels

Use style.nodeLabel.aspectRatio to tune label wrapping. Set aspectRatio to 0 to turn off multiline labels.

Round text nodes look style

This is one of available node rendering styles.

Fixed coordinated example

Use node.x and node.y in data together with layout.mode = "static" to control node placement.

Hover effects demo

Uses style function to show more details on hover.

Images demo

Shows how to assign images to nodes.

Label style example

Basic label style definitions. The style can be further changed with style functions.

Info popup

Hover over a node to see a custom info popup

Scroll into view

A method that can be called, to pan/zoom the viewport to the specified nodes

Manual mode

Click on node to show it's neighbors. Right click on a node and choose "collapse" to hide it and it's neighbors.

Show all nodes

The whole network is shown.

Preloaded data

Simple example with data embedded directly into settings object.

Custom context menu

Simple custom context menu, default menu disabled. Right click on nodes and links to see menu.

Replace Data

Chart.replaceData discards all existing data and replaces by the new data. Coordinates are specified in the data so they are not animated.

Replace Data.

Chart.replaceData discards all existing data and replaces by the new data. The chart ensures a smooth transition between old and new data.

Chart.addData adds nodes and links to the chart

Click anywhere to add new nodes to the chart. Double click on a node to add a new node with a link to it.

Chart.removeData removes objects from the chart

Click to remove nodes and links.

Interactive highlight

Hover on node to highlight path to it.

NetChart with data URL

Simple example where the whole network is loaded from a single URL.

Network Graph - company network, with icons

Anonymous company data.

Network Graph - explore social links

Sample data.

Network graph with glyphicons

Simple example with nodes and glypicons (as fonts) on top of them

Piechart on netchart

Simple example that loads piecharts on a netchart nodes

Reload data

Network Graph - colorful bubles

Anonymous network device sturcture.

Network Graph - drag external elements onto the chart

Interactive node filtering

Use the slider below to filter persons by age.

NetChart with data function

A data function example with incremental loading. Chart call data function when new nodes are about to be displayed.

Network Graph - big data network

Anonymous company data (5220 nodes, 6047 links).

Global sales data

Impressive example on how to use almost all of the ZoomCharts chart packages to create an amazing fully interactive dashboard. In this case it is sales data, but just image your own data here!

Crime analytics

A dashboard that shows crime analytics using multiple ZoomChart's chart packages.

NetChart on GeoChart

Display linked data on map. Fully functional, interactive Net Chart placed on map.

Load data from other source

In case you want to load data from different source after chart is loaded with some basic data. Chart.reloadData removes existing data and fires a request for new data, but before that we user Chart.replaceSettings to replace data source URL.

Connect nodes by dragging

Custom info popup

Simple custom info popup, enabling info popup on custom items.

Custom popup on click

Click on a node will display custom HTML popup that is not part of NetChart.

Legend represented classes

Network graph - nodes with custom thumbnails

ZoomCharts.com site structure

Cursor demo.

Shows how to assign different cursors when nodes are hovered.

Radial net layout.

Positioning net nodes so that they expands outwards radially.

Custom shape example

Shows how to specify your own node shapes, and their own respective rendering functions

ClassName is embedded in data.

Nodes and links have className attribute in data. Use them to assign additional set of style.

Chart Packages - PieChart

Agreggated Pie Charts on Geo Chart

Depending on a zoom level of the map the data is automatically aggregated and displayed in PieCharts.

Pie chart with others grouping and drill-down

Pie chart with others grouping

Pie chart with drill down

Donut chart with grouping and drill-down

Donut chart with drill-down

Pie chart with grouping, drill-down and legend

Donut chart with background image, grouping and drill-down

Multiple level pie chart with others grouping

Multiple level donut chart with others grouping

Single level gauge chart

Multiple level gauge chart

Gauge chart filled centre

World countries and pie charts

Map and pie chart

Map and donut chart

Clickable legend

Legend works as a filter for PieChart. Click on label item to drill down into corresponding slice on the chart.

Various Themes

PieChart comes with some predefined and ready to use themes. Set them with one line of code. Also you can further modify chart settings as you wish.

Custom background image

It is possible to add an image as a background for a PieChart.

Gauge with live data

Using PieChart you can create a gauge chart by simply specifying some settings. The example also demonstrates how chart responds to live data.

Slice selection

Demonstration of various slice selections. It is possible to expand a slice or select one or more slices.

Test selection modes

Scrolling

You can gradually dive deeper into the "others" slice by doing a rotational gesture on the chart

Example to use custom info popup

PieChart events tester

A demo with prepared event logging. Various events and data will be outputted in a special window.

Legend placement

Example where chart legend is palced on top of the cart. Note that legend can be positioned also on the right or left or bottom (default setting if legend is enabled).

Label style

Labels can be styled to match your project theme.

Label placement

Labels can be placed inside the slices or outside. Demo provides simple way to switch between various options.

Dashed slices and labels

Shows how to assign different dash areas.

Pie Chart - pie, one level, raised theme

LA Lakers salaries season 2012/2013

Pie chart - donut, bevel theme, hierarchical structure

Browser shares (sample data). Click to explore

Preloaded data

Preloaded data is the most simplies data preparation method.

PieChart with data URL

Data url loads all drilldown levels in one go.

Incremental data-loading

Data can be incrementally loaded on demand - for example when expanding a slice.

PieChart with data function

Data function provides finer control of the loading process. This demo shows how to incrementally load data as the user drills down.

Pie chart - flat theme, custom labels

Latvian car market composition as of 1st of January, 2013. Source: csdd.lv

Pie Chart - donut, 3d (raised) theme, hierarchical

Car manufacturers, totals, year 2012

Pie Chart - donut, one level

Example on raised theme and with just one level of data.

Pie chart - continental data + breadcrumb feature

Categorise data based on different fields + breadcrumb feature. Click to explore

Pie Chart - pie, one level, 3d theme, no labels, info popup

LA Lakers salaries season 2012/2013

Partial slice swipe

Demo of how PieChart can be used to also input data - swipe each slice and see the results.

Categories

Categorise data based on different fields.

Social network

Cinema Browser

Piechart on netchart

Simple example that loads piechart on netchart node onclick

Piechart on netchart

Simple example that loads piecharts on a netchart nodes

Global sales data

Impressive example on how to use almost all of the ZoomCharts chart packages to create an amazing fully interactive dashboard. In this case it is sales data, but just image your own data here!

Crime analytics

A dashboard that shows crime analytics using multiple ZoomChart's chart packages.

User demographics

Different kind of app demonstration that allows you to input your own data. Another great example of what you can achieve in your product.

Highlighted Net Chart on Geo Chart

Pie Chart on Geo Chart

Use Pie Chart to display region corresponding data.

PieChart with dark theme

Latvian car market composition as of 1st of January, 2013. Source: csdd.lv

Pie chart - donut chart, flat theme, hierarchical structure

Latvian car market composition as of 1st of January, 2013. Source: csdd.lv

Legend entries

Customise entries look.

Filtering bank statements

Colour distribution

Shows different types of colour distributions

Chart Packages - TimeChart

Time Chart - Gradient Columns - Various different gradient setups

Columns with various different gradient setups

Bar chart with time based data

Line chart with time based data

100% stacked area chart

100% stacked bars chart

Area chart

Line chart with smoothing

Area chart smooth

Bar and area chart

Bar, line and area chart

Candlestick chart

Line and area chart

Line and bar chart

Multiple lines chart

Multiple areas chart

Candlestick and area chart

Stacked column chart with normal stacking

Stacked column chart with based stacking

Stacked bar chart using normal stacking

Stacked bar chart with based stacking

Side by side bar chart

Multiple areas chart normal stacking

Multiple areas chart based stacking

Stacked area chart with normal stacking using time based data

Stacked area chart with based stacking

High - low chart

Multiple streams chart with solid fill and smoothing

Multiple area streams with solid fill

Stacked multiple level bar chart with time based data

Waterfall chart

Multiple smooth area streams with gradient fill

Stream chart from zero line

Candlestick chart (bar)

Stream chart

Grid Legend

Inline Legend

Inline Single Line Legend

Columns and area

MtGOX Bitcoin transactions

Both lines and columns.

Showing min max and average temperature.

Area with custom background image

Historical temperature data in Paris

Group values by weekday

Value labels

Stacked bars. Black theme.

Global emissions since 1751

Milestone markers

Apple stock prices, years 2004 - 2014

Line with markers

Simple line example

Two series show same data with different aggregations - min and max.

Multiple series

Sample where 4 different series from single data file

Step line example

Displays current value as horizontal line in each time segment.

Using value function

Two series - one shows only positive values another negative values.

Highlighting area between two lines

Two lines are placed in a stack. First line has no fill and provides bottom values. Second line has fill and provides top values.

Highlighting missing data points

Separate series shows values when there is no data. A fixed hidden value axis is used to ensure it fills entire chart height.

Simple columns example

Zoom in to explore the data.

Candlestick series type

Euro / USD: 2014.01.01 - 2015.03.14

Using dashed lines

Showing forecast data as dashed line.

Using gradient fill

Gradient fill assigns colors to specific values in data. Columns are painted between min and max values of the temperature in current period.

Time zone configuration - UTC data on various time zones

Euro / US Dollar trend by 4 hours from 01.01.2015 - 25.03.2015

Fixed scale value axis

Two value axis

Floating zero line

The zero line is allowed to move off chart to emphasize differences between min and max values.

Value axis inside the chart area

Styled value axis

Value axis disabled

Styling line items by dashes

Toolbar outside chart

Time zones - hours

Time zones - days

Custom toolbar item

No toolbar

Toolbar in left side

TimeChart Legend

Use legend to show or hide some series.

Second TimeChart that displays the preview of the whole data range

The overview chart can be used to navigate the main chart - try dragging the selection around.

Time Chart - columns with negative values

Historical temperature data in Paris

Time Chart - multiple lines with markers

Yahoo stock prices 1996 - 2014

Time Chart - columns

UK House prices since 1953

Time Chart - using thresholds to highlight extreme value changes

Yahoo stock prices 1996 - 2014

Time Chart - multiple lines with markers

Yahoo stock prices 1996 - 2014

Replacing data

Uses `addData` to dynamically replace part of the loaded data in the chart.

Realtime data source

Sample where an external function is used to add data in real time using `addData` method.

Incremental loading

TimeChart with data URL

Two Data Sources

Sample where two different data sources are used

Incremental loading

Preloaded data

Time Chart - area

Gold prices 1950-2014

Time Chart - clustered columns, logarithmic scale

Microsoft and Apple stock prices, years 2004 - 2014

Time Chart - area, with series toggle

Microsoft and Apple stock prices, years 2004 - 2014

Time Chart - stacked bars

Global emissions since 1751

Custom info popup example

Shows how to provide completely custom HTML code for the info popup.

Info popup example

Shows how to format a values displayed in the info popup.

Time axis limited to year 2013

You can zoom in and navigate within the year.

TimeChart events tester

Event log shows events as they are fired.

Time Chart - stacked area

World population since 1960's

Time Chart - clustered columns

Microsoft and Apple stock prices, years 2004 - 2014

Time Chart - minimized, no labels, no axis, round theme

Yahoo stock prices 1996 - 2014

Time Chart - 100% proportional area

Microsoft and Apple stock prices, years 2004 - 2014

TimeChart with data function

Global sales data

Impressive example on how to use almost all of the ZoomCharts chart packages to create an amazing fully interactive dashboard. In this case it is sales data, but just image your own data here!

Time Chart - Custom Gradient Columns

Columns with custom gradient

Time Chart - Gradient Columns - Horizontal Cylinders

Columns with gradient styled as horizontal cylinders

Time Chart - Gradient Columns - Vertical Cylinders

Columns with gradient styled as vertical cylinders

Legend

Use legend to show or hide some series.

Initial animation

Example showing how to enable and customize animation speed/intensity on initial chart loading.

Filtering bank statements

Chart Packages - FacetChart

WiFi status like visualization with a slider and selection

Example on how to dynamically change style for individual chart columns. Adjust slider to set selected columns accordingly.

WiFi status like visualization

Example on how to dynamically and automatically change style for individual chart columns. Randomly columns are colored green or red to imitate WiFi status behaviour.

Bar chart

Line Chart

Area chart

Bar, line and area chart

Bar and area chart

Stacked area chart with normal stacking using categorical data

Stacked area chart with based stacking

Multiple areas chart with normal stacking, categorical data

Multiple areas chart with based stacking, categorical data

Side by side bar chart

Area chart with smoothing

Line Chart with smoothing

Multiple level bar chart with categorical data

World countries and bar charts

Span chart with categorical data

Multiple level span chart with categorical data

Stacked series

FacetChart with drilldown

Browser shares (sample data). Click to explore

Side-by-side series

Value labels

Multilevel drill-down with breadcrumbs

Categorise data based on different fields + breadcrumb feature. Click to explore

Value formatter function.

FacetChart Legend

Use legend to show or hide some series.

Series - side by side

Facet Chart - clustered and stacked series, one level

Passenger cars in use totals, year 2012

Facet Chart - stacked area fill, markers, custom line colors, custom line width, smoothing, one level

Passenger cars in use totals, year 2012

Preloaded data

FacetChart with data URL

Facet Chart - clustered series, one level

Passenger cars in use totals, year 2012

Facet Chart - drill down, one level

Passenger cars in use totals, year 2012

FacetChart with data function

Horizontal bar chart

Bar chart with dark theme

Chart Packages - GeoChart

Agreggated Pie Charts on Geo Chart

Depending on a zoom level of the map the data is automatically aggregated and displayed in PieCharts.

Node radius by population

Example how to extend the internal Leaflet map to add additional map layers using custom plugins.

Country shapes with labels

Items are used to display shape labels. This example demonstrates also how to adjust label position for some countries or change country colors.

Custom shapes

Example showing how to create polygon type custom shapes.

Auto Aggregation and scaling by the rank of the currently visible nodes.

An example for usage for "allObjectsStyleFunction".

Changing shapes based on zoom level

This example demonstrates how to load / replace country, area or region shapes based on some condition.

World countries chart shapes only

Geo chart

Map chart

Driving time between cities on the map

Showing driving time of connected cities

Some locations on the map

Bubble map chart

World countries and pie charts

Network chart over world map

World countries and bar charts

Grouped Location Chart

Map and pie chart

Map and donut chart

Grouped bubble map chart

Global sales data

Impressive example on how to use almost all of the ZoomCharts chart packages to create an amazing fully interactive dashboard. In this case it is sales data, but just image your own data here!

Crime analytics

A dashboard that shows crime analytics using multiple ZoomChart's chart packages.

User demographics

Different kind of app demonstration that allows you to input your own data. Another great example of what you can achieve in your product.

Twitter data shapes and nodes

Auto Aggregate of data

Simple example that aggregates cities by population.

NetChart on GeoChart

Display linked data on map. Fully functional, interactive Net Chart placed on map.

Highlighted Net Chart on Geo Chart

Droplet shapes and custom map

Use droplets shapes to enhance item position.

Pie Chart on Geo Chart

Use Pie Chart to display region corresponding data.

Twitter data with dynamic colored shapes

Twitter data on map. Zoom in to see individual tweets

Selectable shapes

Specify shapes and select one or more countries by shift.

Data loading

Simple example that illustrates how data returned from server can be loaded incrementally as bounds of the visible area are supplied in the request.