<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ZingGrid Demo</title>
<script nonce="undefined" src="https://cdn.zingchart.com/zingchart.min.js"></script>
<script nonce="undefined">
zingchart.MODULESDIR = "https://cdn.zingchart.com/modules/";
ZC.LICENSE = ["b55b025e438fa8a98e32482b5f768ff5"];
</script>
<script nonce="undefined" src='//code.jquery.com/jquery-2.1.4.min.js'></script>
<script nonce="undefined" src="https://cdn.zingchart.com/zingchart.min.js"></script>
<script nonce="undefined">
zingchart.MODULESDIR = "https://cdn.zingchart.com/modules/";
ZC.LICENSE = ["b55b025e438fa8a98e32482b5f768ff5"];
</script>
<script nonce="undefined" src='//code.jquery.com/jquery-2.1.4.min.js'></script>
<style>
html,
body {
height: 100%;
width: 100%;
margin: 0;
padding: 20px;
}
.chart {
width: 150px;
min-height: 150px;
display: inline-block;
}
.zc-ref {
display: none;
}
</style>
</head>
<body>
<h2>Spark (alone)</h2>
<div id="cline" class="chart"></div>
<div id="carea" class="chart"></div>
<div id="cvbar" class="chart"></div>
<div id="cmixed" class="chart"></div>
<div id="cvline" class="chart"></div>
<div id="cvarea" class="chart"></div>
<div id="chbar" class="chart"></div>
<div id="cscatter" class="chart"></div>
<div id="chscatter" class="chart"></div>
<div id="cbubble" class="chart"></div>
<div id="chbubble" class="chart"></div>
<div id="cpiefull" class="chart"></div>
<div id="cpiering" class="chart"></div>
<div id="cnestedpie" class="chart"></div>
<div id="cpiano" class="chart"></div>
<div id="cradardots" class="chart"></div>
<div id="cradarline" class="chart"></div>
<div id="cradararea" class="chart"></div>
<div id="cradarrose" class="chart"></div>
<div id="cgauge" class="chart"></div>
<div id="cvbullet" class="chart"></div>
<div id="chbullet" class="chart"></div>
<div id="crange" class="chart"></div>
<div id="cvrange" class="chart"></div>
<div id="cvenn" class="chart"></div>
<div id="cvfunnel" class="chart"></div>
<div id="chfunnel" class="chart"></div>
<div id="cline3d" class="chart"></div>
<div id="carea3d" class="chart"></div>
<div id="cvbar3d" class="chart"></div>
<div id="chbar3d" class="chart"></div>
<div id="cpiefull3d" class="chart"></div>
<div id="cpiering3d" class="chart"></div>
<script>
ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"]; // function for randomly assigning data to charts
window.v = function(n, c, r) {
var values = [],
value = 0,
i;
for (i = 0; i < n; i++) {
if (i === 0) {
value = Math.round(20 + 80 * Math.random());
switch (c) {
case 1:
values.push(value);
break;
case 2:
values.push([i, value]);
break;
case 3:
values.push([i, value, Math.round(4 + 6 * Math.random())]);
break;
}
} else {
switch (c) {
case 1:
if (r) {
value = Math.round(20 + 80 * Math.random());
} else {
value = values[i - 1] + Math.round(-15 + 30 * Math.random());
if (value < 0) {
value = Math.round(10 + 10 * Math.random())
}
}
values.push(value);
break;
case 2:
if (r) {
value = Math.round(20 + 80 * Math.random());
} else {
value = values[i - 1][1] + Math.round(-15 + 30 * Math.random());
if (value < 0) {
value = Math.round(10 + 10 * Math.random())
}
}
values.push([i, value]);
break;
case 3:
if (r) {
value = Math.round(20 + 80 * Math.random());
} else {
value = values[i - 1][1] + Math.round(-15 + 30 * Math.random());
if (value < 0) {
value = Math.round(10 + 10 * Math.random())
}
}
values.push([i, value, Math.round(4 + 6 * Math.random())]);
break;
}
}
}
return values;
}
zingchart.render({
id: 'cline',
width: 80,
height: 80,
theme: 'spark',
data: {
borderWidth: 1,
borderColor: '#ccc',
type: 'line',
title: {
text: 'line'
},
plot: {
stacked: true
},
series: [{
values: v(24, 1)
},
{
values: v(24, 1)
}
]
}
});
zingchart.render({
id: 'carea',
width: 80,
height: 80,
theme: 'spark',
data: {
borderWidth: 1,
borderColor: '#ccc',
type: 'area',
title: {
text: 'area'
},
plot: {
stacked: true
},
series: [{
values: v(24, 1)
},
{
values: v(24, 1)
}
]
}
});
zingchart.render({
id: 'cvbar',
width: 80,
height: 80,
theme: 'spark',
data: {
borderWidth: 1,
borderColor: '#ccc',
type: 'vbar',
title: {
text: 'vbar'
},
plot: {
stacked: true
},
series: [{
values: v(8, 1)
},
{
values: v(8, 1)
}
]
}
});
zingchart.render({
id: 'cmixed',
width: 80,
height: 80,
theme: 'spark',
data: {
borderWidth: 1,
borderColor: '#ccc',
type: 'mixed',
title: {
text: 'mixed'
},
series: [{
type: 'vbar',
values: v(8, 1)
},
{
type: 'line',
values: v(8, 1)
}
]
}
});
zingchart.render({
id: 'cvline',
width: 80,
height: 80,
theme: 'spark',
data: {
borderWidth: 1,
borderColor: '#ccc',
type: 'vline',
title: {
text: 'vline'
},
plot: {
stacked: true
},
series: [{
values: v(24, 1)
},
{
values: v(24, 1)
}
]
}
});
zingchart.render({
id: 'cvarea',
width: 80,
height: 80,
theme: 'spark',
data: {
borderWidth: 1,
borderColor: '#ccc',
type: 'varea',
title: {
text: 'varea'
},
plot: {
stacked: true
},
series: [{
values: v(24, 1)
},
{
values: v(24, 1)
}
]
}
});
zingchart.render({
id: 'chbar',
width: 80,
height: 80,
theme: 'spark',
data: {
borderWidth: 1,
borderColor: '#ccc',
type: 'hbar',
title: {
text: 'hbar'
},
plot: {
stacked: true
},
series: [{
values: v(8, 1)
},
{
values: v(8, 1)
}
]
}
});
zingchart.render({
id: 'cscatter',
width: 80,
height: 80,
theme: 'spark',
data: {
borderWidth: 1,
borderColor: '#ccc',
type: 'scatter',
title: {
text: 'scatter'
},
plot: {},
series: [{
values: v(12, 2, true)
},
{
values: v(12, 2, true)
}
]
}
});
zingchart.render({
id: 'chscatter',
width: 80,
height: 80,
theme: 'spark',
data: {
borderWidth: 1,
borderColor: '#ccc',
type: 'hscatter',
title: {
text: 'hscatter'
},
plot: {},
series: [{
values: v(12, 2, true)
},
{
values: v(12, 2, true)
}
]
}
});
zingchart.render({
id: 'cbubble',
width: 80,
height: 80,
theme: 'spark',
data: {
borderWidth: 1,
borderColor: '#ccc',
type: 'bubble',
title: {
text: 'bubble'
},
plot: {},
series: [{
values: v(6, 3, true)
},
{
values: v(6, 3, true)
}
]
}
});
zingchart.render({
id: 'chbubble',
width: 80,
height: 80,
theme: 'spark',
data: {
borderWidth: 1,
borderColor: '#ccc',
type: 'hbubble',
title: {
text: 'hbubble'
},
plot: {},
series: [{
values: v(6, 3, true)
},
{
values: v(6, 3, true)
}
]
}
});
zingchart.render({
id: 'cpiefull',
width: 80,
height: 80,
theme: 'spark',
data: {
borderWidth: 1,
borderColor: '#ccc',
type: 'pie',
title: {
text: 'pie-full'
},
plot: {},
series: [{
values: v(1, 1)
},
{
values: v(1, 1)
},
{
values: v(1, 1)
},
{
values: v(1, 1)
}
]
}
});
zingchart.render({
id: 'cpiering',
width: 80,
height: 80,
theme: 'spark',
data: {
borderWidth: 1,
borderColor: '#ccc',
type: 'pie',
title: {
text: 'pie-ring'
},
plot: {
slice: '40%'
},
series: [{
values: v(1, 1)
},
{
values: v(1, 1)
},
{
values: v(1, 1)
},
{
values: v(1, 1)
}
]
}
});
zingchart.render({
id: 'cnestedpie',
width: 80,
height: 80,
theme: 'spark',
data: {
borderWidth: 1,
borderColor: '#ccc',
type: 'nestedpie',
title: {
text: 'nestedpie'
},
plot: {},
series: [{
values: v(2, 1)
},
{
values: v(2, 1)
},
{
values: v(2, 1)
},
{
values: v(2, 1)
}
]
}
});
zingchart.render({
id: 'cpiano',
width: 80,
height: 80,
theme: 'spark',
data: {
borderWidth: 1,
borderColor: '#ccc',
type: 'piano',
title: {
text: 'piano'
},
plot: {},
series: [{
values: v(6, 1)
},
{
values: v(6, 1)
},
{
values: v(6, 1)
},
{
values: v(6, 1)
}
]
}
});
zingchart.render({
id: 'cradardots',
width: 80,
height: 80,
theme: 'spark',
data: {
borderWidth: 1,
borderColor: '#ccc',
type: 'radar',
title: {
text: 'radar-dots'
},
plot: {
stacked: true,
aspect: 'dots'
},
series: [{
values: v(6, 1)
},
{
values: v(6, 1)
}
]
}
});
zingchart.render({
id: 'cradarline',
width: 80,
height: 80,
theme: 'spark',
data: {
borderWidth: 1,
borderColor: '#ccc',
type: 'radar',
title: {
text: 'radar-line'
},
plot: {
stacked: true,
aspect: 'line'
},
series: [{
values: v(6, 1)
},
{
values: v(6, 1)
}
]
}
});
zingchart.render({
id: 'cradararea',
width: 80,
height: 80,
theme: 'spark',
data: {
borderWidth: 1,
borderColor: '#ccc',
type: 'radar',
title: {
text: 'radar-area'
},
plot: {
stacked: true,
aspect: 'area'
},
series: [{
values: v(6, 1)
},
{
values: v(6, 1)
}
]
}
});
zingchart.render({
id: 'cradarrose',
width: 80,
height: 80,
theme: 'spark',
data: {
borderWidth: 1,
borderColor: '#ccc',
type: 'radar',
title: {
text: 'radar-rose'
},
plot: {
aspect: 'rose'
},
series: [{
values: v(6, 1)
},
{
values: v(6, 1)
}
]
}
});
zingchart.render({
id: 'cgauge',
width: 80,
height: 80,
theme: 'spark',
data: {
borderWidth: 1,
borderColor: '#ccc',
type: 'gauge',
title: {
text: 'gauge'
},
series: [{
values: v(1, 1)
},
{
values: v(1, 1)
}
]
}
});
zingchart.render({
id: 'cvbullet',
width: 80,
height: 80,
theme: 'spark',
data: {
borderWidth: 1,
borderColor: '#ccc',
type: 'vbullet',
title: {
text: 'vbullet'
},
series: [{
values: v(2, 1),
goals: v(2, 1)
},
{
values: v(2, 1),
goals: v(2, 1)
}
]
}
});
zingchart.render({
id: 'chbullet',
width: 80,
height: 80,
theme: 'spark',
data: {
borderWidth: 1,
borderColor: '#ccc',
type: 'hbullet',
title: {
text: 'hbullet'
},
series: [{
values: v(2, 1),
goals: v(2, 1)
},
{
values: v(2, 1),
goals: v(2, 1)
}
]
}
});
zingchart.render({
id: 'crange',
width: 80,
height: 80,
theme: 'spark',
data: {
borderWidth: 1,
borderColor: '#ccc',
type: 'range',
title: {
text: 'range'
},
series: [{
values: [
[15, 30],
[20, 40],
[16, 35],
[21, 30],
[25, 45],
[18, 27],
[23, 35],
[29, 39],
[27, 30],
[19, 34]
]
}]
}
});
zingchart.render({
id: 'cvrange',
width: 80,
height: 80,
theme: 'spark',
data: {
borderWidth: 1,
borderColor: '#ccc',
type: 'vrange',
title: {
text: 'vrange'
},
series: [{
values: [
[15, 30],
[20, 40],
[16, 35],
[21, 30],
[25, 45],
[18, 27],
[23, 35],
[29, 39],
[27, 30],
[19, 34]
]
}]
}
});
zingchart.render({
id: 'cvenn',
width: 80,
height: 80,
theme: 'spark',
data: {
borderWidth: 1,
borderColor: '#ccc',
type: 'venn',
title: {
text: 'venn'
},
series: [{
values: [10],
join: [2]
},
{
values: [6],
join: [1]
},
{
values: [8],
join: [3]
}
]
}
});
zingchart.render({
id: 'cvfunnel',
width: 80,
height: 80,
theme: 'spark',
data: {
borderWidth: 1,
borderColor: '#ccc',
type: 'vfunnel',
title: {
text: 'vfunnel'
},
series: [{
values: v(1, 1)
},
{
values: v(1, 1)
},
{
values: v(1, 1)
},
{
values: v(1, 1)
},
{
values: v(1, 1)
}
]
}
});
zingchart.render({
id: 'chfunnel',
width: 80,
height: 80,
theme: 'spark',
data: {
borderWidth: 1,
borderColor: '#ccc',
type: 'hfunnel',
title: {
text: 'hfunnel'
},
series: [{
values: v(1, 1)
},
{
values: v(1, 1)
},
{
values: v(1, 1)
},
{
values: v(1, 1)
},
{
values: v(1, 1)
}
]
}
});
/* ================================================== */
zingchart.render({
id: 'cline3d',
width: 80,
height: 80,
theme: 'spark',
data: {
borderWidth: 1,
borderColor: '#ccc',
type: 'line3d',
title: {
text: 'line3d'
},
plot: {
stacked: true
},
series: [{
values: v(12, 1)
},
{
values: v(12, 1)
}
]
}
});
zingchart.render({
id: 'carea3d',
width: 80,
height: 80,
theme: 'spark',
data: {
borderWidth: 1,
borderColor: '#ccc',
type: 'area3d',
title: {
text: 'area3d'
},
plot: {
stacked: true
},
series: [{
values: v(12, 1)
},
{
values: v(12, 1)
}
]
}
});
zingchart.render({
id: 'cvbar3d',
width: 80,
height: 80,
theme: 'spark',
data: {
borderWidth: 1,
borderColor: '#ccc',
type: 'vbar3d',
title: {
text: 'vbar3d'
},
plot: {
stacked: true
},
series: [{
values: v(4, 1)
},
{
values: v(4, 1)
}
]
}
});
zingchart.render({
id: 'chbar3d',
width: 80,
height: 80,
theme: 'spark',
data: {
borderWidth: 1,
borderColor: '#ccc',
type: 'hbar3d',
title: {
text: 'hbar3d'
},
plot: {
stacked: true
},
series: [{
values: v(4, 1)
},
{
values: v(4, 1)
}
]
}
});
zingchart.render({
id: 'cpiefull3d',
width: 80,
height: 80,
theme: 'spark',
data: {
borderWidth: 1,
borderColor: '#ccc',
type: 'pie3d',
title: {
text: 'pie3d-full'
},
plot: {},
series: [{
values: v(1, 1)
},
{
values: v(1, 1)
},
{
values: v(1, 1)
},
{
values: v(1, 1)
}
]
}
});
zingchart.render({
id: 'cpiering3d',
width: 80,
height: 80,
theme: 'spark',
data: {
borderWidth: 1,
borderColor: '#ccc',
type: 'pie3d',
title: {
text: 'pie3d-ring'
},
plot: {
slice: '40%'
},
series: [{
values: v(1, 1)
},
{
values: v(1, 1)
},
{
values: v(1, 1)
},
{
values: v(1, 1)
}
]
}
});
</script>
</body>
</html>
// function for randomly assigning data to charts
window.v = function(n, c, r) {
var values = [],
value = 0,
i;
for (i = 0; i < n; i++) {
if (i === 0) {
value = Math.round(20 + 80 * Math.random());
switch (c) {
case 1:
values.push(value);
break;
case 2:
values.push([i, value]);
break;
case 3:
values.push([i, value, Math.round(4 + 6 * Math.random())]);
break;
}
} else {
switch (c) {
case 1:
if (r) {
value = Math.round(20 + 80 * Math.random());
} else {
value = values[i - 1] + Math.round(-15 + 30 * Math.random());
if (value < 0) {
value = Math.round(10 + 10 * Math.random())
}
}
values.push(value);
break;
case 2:
if (r) {
value = Math.round(20 + 80 * Math.random());
} else {
value = values[i - 1][1] + Math.round(-15 + 30 * Math.random());
if (value < 0) {
value = Math.round(10 + 10 * Math.random())
}
}
values.push([i, value]);
break;
case 3:
if (r) {
value = Math.round(20 + 80 * Math.random());
} else {
value = values[i - 1][1] + Math.round(-15 + 30 * Math.random());
if (value < 0) {
value = Math.round(10 + 10 * Math.random())
}
}
values.push([i, value, Math.round(4 + 6 * Math.random())]);
break;
}
}
}
return values;
}
zingchart.render({
id: 'cline',
width: 80,
height: 80,
theme: 'spark',
data: {
borderWidth: 1,
borderColor: '#ccc',
type: 'line',
title: {
text: 'line'
},
plot: {
stacked: true
},
series: [{
values: v(24, 1)
},
{
values: v(24, 1)
}
]
}
});
zingchart.render({
id: 'carea',
width: 80,
height: 80,
theme: 'spark',
data: {
borderWidth: 1,
borderColor: '#ccc',
type: 'area',
title: {
text: 'area'
},
plot: {
stacked: true
},
series: [{
values: v(24, 1)
},
{
values: v(24, 1)
}
]
}
});
zingchart.render({
id: 'cvbar',
width: 80,
height: 80,
theme: 'spark',
data: {
borderWidth: 1,
borderColor: '#ccc',
type: 'vbar',
title: {
text: 'vbar'
},
plot: {
stacked: true
},
series: [{
values: v(8, 1)
},
{
values: v(8, 1)
}
]
}
});
zingchart.render({
id: 'cmixed',
width: 80,
height: 80,
theme: 'spark',
data: {
borderWidth: 1,
borderColor: '#ccc',
type: 'mixed',
title: {
text: 'mixed'
},
series: [{
type: 'vbar',
values: v(8, 1)
},
{
type: 'line',
values: v(8, 1)
}
]
}
});
zingchart.render({
id: 'cvline',
width: 80,
height: 80,
theme: 'spark',
data: {
borderWidth: 1,
borderColor: '#ccc',
type: 'vline',
title: {
text: 'vline'
},
plot: {
stacked: true
},
series: [{
values: v(24, 1)
},
{
values: v(24, 1)
}
]
}
});
zingchart.render({
id: 'cvarea',
width: 80,
height: 80,
theme: 'spark',
data: {
borderWidth: 1,
borderColor: '#ccc',
type: 'varea',
title: {
text: 'varea'
},
plot: {
stacked: true
},
series: [{
values: v(24, 1)
},
{
values: v(24, 1)
}
]
}
});
zingchart.render({
id: 'chbar',
width: 80,
height: 80,
theme: 'spark',
data: {
borderWidth: 1,
borderColor: '#ccc',
type: 'hbar',
title: {
text: 'hbar'
},
plot: {
stacked: true
},
series: [{
values: v(8, 1)
},
{
values: v(8, 1)
}
]
}
});
zingchart.render({
id: 'cscatter',
width: 80,
height: 80,
theme: 'spark',
data: {
borderWidth: 1,
borderColor: '#ccc',
type: 'scatter',
title: {
text: 'scatter'
},
plot: {},
series: [{
values: v(12, 2, true)
},
{
values: v(12, 2, true)
}
]
}
});
zingchart.render({
id: 'chscatter',
width: 80,
height: 80,
theme: 'spark',
data: {
borderWidth: 1,
borderColor: '#ccc',
type: 'hscatter',
title: {
text: 'hscatter'
},
plot: {},
series: [{
values: v(12, 2, true)
},
{
values: v(12, 2, true)
}
]
}
});
zingchart.render({
id: 'cbubble',
width: 80,
height: 80,
theme: 'spark',
data: {
borderWidth: 1,
borderColor: '#ccc',
type: 'bubble',
title: {
text: 'bubble'
},
plot: {},
series: [{
values: v(6, 3, true)
},
{
values: v(6, 3, true)
}
]
}
});
zingchart.render({
id: 'chbubble',
width: 80,
height: 80,
theme: 'spark',
data: {
borderWidth: 1,
borderColor: '#ccc',
type: 'hbubble',
title: {
text: 'hbubble'
},
plot: {},
series: [{
values: v(6, 3, true)
},
{
values: v(6, 3, true)
}
]
}
});
zingchart.render({
id: 'cpiefull',
width: 80,
height: 80,
theme: 'spark',
data: {
borderWidth: 1,
borderColor: '#ccc',
type: 'pie',
title: {
text: 'pie-full'
},
plot: {},
series: [{
values: v(1, 1)
},
{
values: v(1, 1)
},
{
values: v(1, 1)
},
{
values: v(1, 1)
}
]
}
});
zingchart.render({
id: 'cpiering',
width: 80,
height: 80,
theme: 'spark',
data: {
borderWidth: 1,
borderColor: '#ccc',
type: 'pie',
title: {
text: 'pie-ring'
},
plot: {
slice: '40%'
},
series: [{
values: v(1, 1)
},
{
values: v(1, 1)
},
{
values: v(1, 1)
},
{
values: v(1, 1)
}
]
}
});
zingchart.render({
id: 'cnestedpie',
width: 80,
height: 80,
theme: 'spark',
data: {
borderWidth: 1,
borderColor: '#ccc',
type: 'nestedpie',
title: {
text: 'nestedpie'
},
plot: {},
series: [{
values: v(2, 1)
},
{
values: v(2, 1)
},
{
values: v(2, 1)
},
{
values: v(2, 1)
}
]
}
});
zingchart.render({
id: 'cpiano',
width: 80,
height: 80,
theme: 'spark',
data: {
borderWidth: 1,
borderColor: '#ccc',
type: 'piano',
title: {
text: 'piano'
},
plot: {},
series: [{
values: v(6, 1)
},
{
values: v(6, 1)
},
{
values: v(6, 1)
},
{
values: v(6, 1)
}
]
}
});
zingchart.render({
id: 'cradardots',
width: 80,
height: 80,
theme: 'spark',
data: {
borderWidth: 1,
borderColor: '#ccc',
type: 'radar',
title: {
text: 'radar-dots'
},
plot: {
stacked: true,
aspect: 'dots'
},
series: [{
values: v(6, 1)
},
{
values: v(6, 1)
}
]
}
});
zingchart.render({
id: 'cradarline',
width: 80,
height: 80,
theme: 'spark',
data: {
borderWidth: 1,
borderColor: '#ccc',
type: 'radar',
title: {
text: 'radar-line'
},
plot: {
stacked: true,
aspect: 'line'
},
series: [{
values: v(6, 1)
},
{
values: v(6, 1)
}
]
}
});
zingchart.render({
id: 'cradararea',
width: 80,
height: 80,
theme: 'spark',
data: {
borderWidth: 1,
borderColor: '#ccc',
type: 'radar',
title: {
text: 'radar-area'
},
plot: {
stacked: true,
aspect: 'area'
},
series: [{
values: v(6, 1)
},
{
values: v(6, 1)
}
]
}
});
zingchart.render({
id: 'cradarrose',
width: 80,
height: 80,
theme: 'spark',
data: {
borderWidth: 1,
borderColor: '#ccc',
type: 'radar',
title: {
text: 'radar-rose'
},
plot: {
aspect: 'rose'
},
series: [{
values: v(6, 1)
},
{
values: v(6, 1)
}
]
}
});
zingchart.render({
id: 'cgauge',
width: 80,
height: 80,
theme: 'spark',
data: {
borderWidth: 1,
borderColor: '#ccc',
type: 'gauge',
title: {
text: 'gauge'
},
series: [{
values: v(1, 1)
},
{
values: v(1, 1)
}
]
}
});
zingchart.render({
id: 'cvbullet',
width: 80,
height: 80,
theme: 'spark',
data: {
borderWidth: 1,
borderColor: '#ccc',
type: 'vbullet',
title: {
text: 'vbullet'
},
series: [{
values: v(2, 1),
goals: v(2, 1)
},
{
values: v(2, 1),
goals: v(2, 1)
}
]
}
});
zingchart.render({
id: 'chbullet',
width: 80,
height: 80,
theme: 'spark',
data: {
borderWidth: 1,
borderColor: '#ccc',
type: 'hbullet',
title: {
text: 'hbullet'
},
series: [{
values: v(2, 1),
goals: v(2, 1)
},
{
values: v(2, 1),
goals: v(2, 1)
}
]
}
});
zingchart.render({
id: 'crange',
width: 80,
height: 80,
theme: 'spark',
data: {
borderWidth: 1,
borderColor: '#ccc',
type: 'range',
title: {
text: 'range'
},
series: [{
values: [
[15, 30],
[20, 40],
[16, 35],
[21, 30],
[25, 45],
[18, 27],
[23, 35],
[29, 39],
[27, 30],
[19, 34]
]
}]
}
});
zingchart.render({
id: 'cvrange',
width: 80,
height: 80,
theme: 'spark',
data: {
borderWidth: 1,
borderColor: '#ccc',
type: 'vrange',
title: {
text: 'vrange'
},
series: [{
values: [
[15, 30],
[20, 40],
[16, 35],
[21, 30],
[25, 45],
[18, 27],
[23, 35],
[29, 39],
[27, 30],
[19, 34]
]
}]
}
});
zingchart.render({
id: 'cvenn',
width: 80,
height: 80,
theme: 'spark',
data: {
borderWidth: 1,
borderColor: '#ccc',
type: 'venn',
title: {
text: 'venn'
},
series: [{
values: [10],
join: [2]
},
{
values: [6],
join: [1]
},
{
values: [8],
join: [3]
}
]
}
});
zingchart.render({
id: 'cvfunnel',
width: 80,
height: 80,
theme: 'spark',
data: {
borderWidth: 1,
borderColor: '#ccc',
type: 'vfunnel',
title: {
text: 'vfunnel'
},
series: [{
values: v(1, 1)
},
{
values: v(1, 1)
},
{
values: v(1, 1)
},
{
values: v(1, 1)
},
{
values: v(1, 1)
}
]
}
});
zingchart.render({
id: 'chfunnel',
width: 80,
height: 80,
theme: 'spark',
data: {
borderWidth: 1,
borderColor: '#ccc',
type: 'hfunnel',
title: {
text: 'hfunnel'
},
series: [{
values: v(1, 1)
},
{
values: v(1, 1)
},
{
values: v(1, 1)
},
{
values: v(1, 1)
},
{
values: v(1, 1)
}
]
}
});
/* ================================================== */
zingchart.render({
id: 'cline3d',
width: 80,
height: 80,
theme: 'spark',
data: {
borderWidth: 1,
borderColor: '#ccc',
type: 'line3d',
title: {
text: 'line3d'
},
plot: {
stacked: true
},
series: [{
values: v(12, 1)
},
{
values: v(12, 1)
}
]
}
});
zingchart.render({
id: 'carea3d',
width: 80,
height: 80,
theme: 'spark',
data: {
borderWidth: 1,
borderColor: '#ccc',
type: 'area3d',
title: {
text: 'area3d'
},
plot: {
stacked: true
},
series: [{
values: v(12, 1)
},
{
values: v(12, 1)
}
]
}
});
zingchart.render({
id: 'cvbar3d',
width: 80,
height: 80,
theme: 'spark',
data: {
borderWidth: 1,
borderColor: '#ccc',
type: 'vbar3d',
title: {
text: 'vbar3d'
},
plot: {
stacked: true
},
series: [{
values: v(4, 1)
},
{
values: v(4, 1)
}
]
}
});
zingchart.render({
id: 'chbar3d',
width: 80,
height: 80,
theme: 'spark',
data: {
borderWidth: 1,
borderColor: '#ccc',
type: 'hbar3d',
title: {
text: 'hbar3d'
},
plot: {
stacked: true
},
series: [{
values: v(4, 1)
},
{
values: v(4, 1)
}
]
}
});
zingchart.render({
id: 'cpiefull3d',
width: 80,
height: 80,
theme: 'spark',
data: {
borderWidth: 1,
borderColor: '#ccc',
type: 'pie3d',
title: {
text: 'pie3d-full'
},
plot: {},
series: [{
values: v(1, 1)
},
{
values: v(1, 1)
},
{
values: v(1, 1)
},
{
values: v(1, 1)
}
]
}
});
zingchart.render({
id: 'cpiering3d',
width: 80,
height: 80,
theme: 'spark',
data: {
borderWidth: 1,
borderColor: '#ccc',
type: 'pie3d',
title: {
text: 'pie3d-ring'
},
plot: {
slice: '40%'
},
series: [{
values: v(1, 1)
},
{
values: v(1, 1)
},
{
values: v(1, 1)
},
{
values: v(1, 1)
}
]
}
});