Get started with ZoomCharts SDK
Implement data visualization easily
Choose your prefered way to start
Tutorials
CDN
Use ZoomCharts CDN to access the library directly without downloading or installing anything. Just copy and paste the script below into your project.
HTML
<script src="https://cdn.zoomcharts-cloud.com/1/nightly/zoomcharts.js"></script>Using ZoomCharts from CDN is suggested for Development and Q&A only. When working in production please use local library version.
Download
Select the version you wish to download. This way you can also use nightly built and previous ZoomCharts SDK library versions.
NPM
This is an official ZoomCharts NPM package. It contains all ZoomCharts chart packages.
npm install --save @dvsl/zoomcharts
Your first chart
Code example for your first chart. Select the desired chart package to view the example just to get you going.
PieChart
HTML
<div id="chart"></div>
Javascript
let chart = new PieChart({
container: document.getElementById("chart"),
area: { height: null },
data: {
preloaded: {
"subvalues": [
{
"value": 35, "name": "Apples", "subvalues": [
{ "value": 25, "name": "Red apples" },
{ "value": 10, "name": "Green apples" }
]
},
{
"value": 20, "name": "Grapes", "subvalues": [
{ "value": 15, "name": "Sweet grapes" },
{ "value": 5, "name": "Sour grapes" }
]
},
{ "value": 50, "name": "Vegetables"}
]
}
}
});The code renders this visual:
FacetChart
HTML
<div id="chart"></div>
Javascript
let chart = new FacetChart({
container: document.getElementById("chart"),
data: {
preloaded: {
subvalues: [
{subvalues: [{name: "Mozilla Compatible Agent 5.0", value: 292}, {name: "Mozilla Compatible Agent 4.0", value: 4}], name: "Mozilla Compatible Agent", value: 296, "id": "Mozilla Compatible Agent"},
{subvalues: [{name: "Playstation 3 (not set)", value: 204}], name: "Playstation 3", value: 204, "id": "Playstation 3"},
{subvalues: [{name: "YaBrowser 1.5.1106.241", value: 40}, {name: "YaBrowser 1.7.1364.21027", value: 32}, {name: "YaBrowser 1.7.1364.17262", value: 23}, {name: "YaBrowser 1.7.1364.22076", value: 23}, {name: "YaBrowser 1.5.1105.412", value: 18}, {name: "YaBrowser 1.7.1364.15751", value: 15}, {name: "YaBrowser 1.7.1364.22194", value: 15}, {name: "YaBrowser 1.7.1364.13754", value: 8}, {name: "YaBrowser 1.7.1364.12390", value: 5}], name: "YaBrowser", value: 179, "id": "YaBrowser"},
{subvalues: [{name: "IE with Chrome Frame 8.0", value: 78}, {name: "IE with Chrome Frame 7.0", value: 14}], name: "IE with Chrome Frame", value: 92, "id": "IE with Chrome Frame"},
{subvalues: [{name: "Amazon Silk 1.0.22.153_10033210", value: 26}, {name: "Amazon Silk 3.1", value: 19}, {name: "Amazon Silk 3.4", value: 16}, {name: "Amazon Silk 2.9", value: 11}, {name: "Amazon Silk 3.0", value: 9}, {name: "Amazon Silk 3.7", value: 3}], name: "Amazon Silk", value: 84, "id": "Amazon Silk"}
]
}
},
series: [
{data: {field: "value"}}
]
});The code renders this visual:
NetChart
HTML
<div id="chart"></div>
Javascript
let chart = new NetChart({
container: document.getElementById("chart"),
data: {
preloaded: {
"nodes":[
{"id":"m-1", "style": {"label":"Joe"}, "loaded":true},
{"id":"m-2", "style": {"label":"Fred"}, "loaded":true},
{"id":"m-3", "style": {"label":"Tom"}, "loaded":true},
],
"links":[
{"id":"l01", "from":"m-1", "to":"m-2"},
{"id":"l02", "from":"m-2", "to":"m-3"},
{"id":"l03", "from":"m-1", "to":"m-3"}
]
}
}
});The code renders this visual:
TimeChart
HTML
<div id="chart"></div>
Javascript
let chart = new TimeChart({
container: document.getElementById("chart"),
data:
{
units: ["M"],
timestampInSeconds: true,
preloaded: {
dataLimitFrom: 1279408157,
dataLimitTo: 1384253671,
unit: "M",
values: [
[1358620069, 21.43], [1360955055, 34.51541], [1363536829, 95.7],
[1366088526, 266], [1368368125, 141.42236], [1371180511, 130.0],
[1373758345, 111.652], [1376745412, 148.7], [1379147545, 148.90893],
[1382024434, 233.4], [1383881325, 395]
]
}
}
});The code renders this visual:
GeoChart
HTML
<div id="chart"></div>
Javascript
let chart = new GeoChart({
container: document.getElementById("chart"),
data: {
preloaded: {
nodes: [
{ id: "Squaw Valley", coordinates: [-119.181449, 36.707146] }, // long, lat
{ id: "Atlanta", coordinates: [-84.388846, 33.752504] },
{ id: "New York", coordinates: [-73.996705, 40.74838] },
{ id: "Lake Placid", coordinates: [-81.364918, 27.294474] }
],
links: [
{ from: "New York", to: "Atlanta", drivingTime: "13 hours 3 mins" },
{ from: "New York", to: "Squaw Valley", drivingTime: "1 day 18 hours" },
{ from: "New York", to: "Lake Placid", drivingTime: "17 hours 33 mins" },
{ from: "Lake Placid", to: "Squaw Valley", drivingTime: "1 day 15 hours" },
{ from: "Atlanta", to: "Squaw Valley", drivingTime: "1 day 10 hours" }
]
}
},
layers: [
{
name: "Points",
type: "items",
style: {
linkStyleFunction: function (link) {
link.label = link.data.drivingTime;
}
}
}
],
navigation: {
initialLat: 35.04409,
initialLng: -90.246213,
initialZoom: 4,
minZoom: 4
}
});The code renders this visual:
Customize your chart
There are countless chart types and customisations you can apply.
Visit Documentation
Check out all possible settings you can use to customize your chart.
Visit documentation