<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ZingSoft Demo</title>
<script nonce="undefined" src="https://cdn.zingchart.com/zingchart.min.js"></script>
<style></style>
</head>
<body>
<div id='myChart'></div>
<div id='myNextChart'></div>
<script>
ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"];
var myConfig = {
type: 'pie',
title: {
text: 'Drilldown Chart',
fontFamily: 'Georgia'
},
plot: {
detach: false,
cursor: 'hand',
valueBox: {
text: '%t',
fontFamily: 'Georgia',
fontSize: 14,
fontWeight: 'normal',
offsetR: '30%'
},
tooltip: {
visible: false
}
},
series: [{
values: [6600],
text: 'Alpha',
backgroundColor: '#cc0000'
},
{
values: [3500],
text: 'Beta',
backgroundColor: '#ff6600'
},
{
values: [3400],
text: 'Gamma',
backgroundColor: '#ffcc00'
},
{
values: [3220],
text: 'Delta',
backgroundColor: '#88cc00'
},
{
values: [3100],
text: 'Epsilon',
backgroundColor: '#66ccff'
},
{
values: [3713],
text: 'Zeta',
backgroundColor: '#0066ff'
}
]
};
var myDrilldownConfig = [];
//the Next Drilldown Charts
myDrilldownConfig[0] = {
type: 'bar',
title: {
text: 'Alpha',
fontFamily: 'Georgia'
},
subtitle: {
text: 'Bar Chart',
fontWeight: 'normal'
},
scaleX: {
labels: ['A1', 'A2', 'A3', 'A4', 'A5', 'A6']
},
scaleY: {
guide: {
lineStyle: 'dotted'
},
},
series: [{
values: [30, 34, 31, 35, 59, 61],
styles: ["#cc0000", "#ff0000", "#ff3333", "#ff6666", "#ff9999", "#ffcccc"]
}],
shapes: [{
type: 'triangle',
backgroundColor: '#cc0000',
size: 10,
angle: -90,
x: 20,
y: 20,
cursor: 'hand',
id: 'backwards'
}]
};
myDrilldownConfig[1] = {
type: 'line',
title: {
text: 'Beta',
fontFamily: 'Georgia'
},
subtitle: {
text: 'Line Chart',
fontWeight: 'normal'
},
scaleX: {
},
scaleY: {
guide: {
lineStyle: 'dotted'
},
},
series: [{
values: [30, 34, 31, 35, 59, 61],
lineColor: '#ff6600',
marker: {
backgroundColor: '#ff6600'
}
},
{
values: [35, 40, 66, 19, 29, 33],
lineColor: '#ff944d',
marker: {
backgroundColor: '#ff944d'
}
},
{
values: [21, 25, 33, 59, 37, 25],
lineColor: '#ffc299',
marker: {
backgroundColor: '#ffc299'
}
}
],
shapes: [{
type: 'triangle',
backgroundColor: '#ff6600',
size: 10,
angle: -90,
x: 20,
y: 20,
cursor: 'hand',
id: 'backwards'
}]
};
myDrilldownConfig[2] = {
type: 'area',
title: {
text: 'Gamma',
fontFamily: 'Georgia'
},
subtitle: {
text: 'Area Chart',
fontWeight: 'normal'
},
plot: {
aspect: 'stepped',
stacked: true
},
scaleX: {
},
scaleY: {
values: '0:140:20',
guide: {
lineStyle: 'dotted'
},
},
series: [{
values: [30, 34, 31, 35, 59, 61],
lineColor: '#ffcc00',
marker: {
backgroundColor: '#ffcc00'
},
backgroundColor: '#ffcc00'
},
{
values: [35, 40, 66, 19, 29, 33],
lineColor: '#ffdb4d',
marker: {
backgroundColor: '#ffdb4d'
},
backgroundColor: '#ffdb4d'
},
{
values: [21, 25, 33, 59, 37, 25],
lineColor: '#ffeb99',
marker: {
backgroundColor: '#ffeb99'
},
backgroundColor: '#ffeb99'
}
],
shapes: [{
type: 'triangle',
backgroundColor: '#ffcc00',
size: 10,
angle: -90,
x: 20,
y: 20,
cursor: 'hand',
id: 'backwards'
}]
};
myDrilldownConfig[3] = {
type: 'scatter',
title: {
text: 'Delta',
fontFamily: 'Georgia'
},
subtitle: {
text: 'Scatter Plot',
fontWeight: 'normal'
},
scaleX: {
guide: {
lineStyle: 'dotted'
}
},
scaleY: {
guide: {
lineStyle: 'dotted'
},
},
series: [{
values: [30, 34, 21, 35, 59, 61],
marker: {
type: 'square',
size: 5,
backgroundColor: '#88cc00',
borderWidth: 1,
borderColor: 'gray'
}
},
{
values: [35, 40, 66, 19, 29, 33],
marker: {
type: 'diamond',
size: 5,
backgroundColor: '#b3ff1a',
borderWidth: 1,
borderColor: 'gray'
}
},
{
values: [21, 25, 33, 59, 37, 25],
marker: {
type: 'triangle',
size: 5,
backgroundColor: '#ccff66',
borderWidth: 1,
borderColor: 'gray'
}
}
],
shapes: [{
type: 'triangle',
backgroundColor: '#88cc00',
size: 10,
angle: -90,
x: 20,
y: 20,
cursor: 'hand',
id: 'backwards'
}]
};
myDrilldownConfig[4] = {
type: 'range',
title: {
text: 'Epsilon',
fontFamily: 'Georgia'
},
subtitle: {
text: 'Range Chart',
fontWeight: 'normal'
},
plot: {
aspect: 'spline'
},
scaleX: {
},
scaleY: {
guide: {
lineStyle: 'dotted'
},
},
series: [{
values: [
[30, 35],
[34, 45],
[31, 50],
[35, 40],
[40, 68],
[33, 60]
],
lineColor: '#66ccff',
marker: {
backgroundColor: '#66ccff'
},
backgroundColor: '#66ccff'
}],
shapes: [{
type: 'triangle',
backgroundColor: '#66ccff',
size: 10,
angle: -90,
x: 20,
y: 20,
cursor: 'hand',
id: 'backwards'
}]
};
myDrilldownConfig[5] = {
type: 'heatmap',
title: {
text: 'Zeta',
fontFamily: 'Georgia'
},
subtitle: {
text: 'Heatmap',
fontWeight: 'normal'
},
scaleX: {
guide: {
visible: false
}
},
scaleY: {
labels: ['Z1', 'Z2', 'Z3'],
guide: {
visible: false
},
},
series: [{
values: [30, 34, 31, 35, 59, 61],
backgroundColor: '#0066ff'
},
{
values: [35, 40, 66, 19, 29, 33],
backgroundColor: '#0066ff'
},
{
values: [21, 25, 33, 59, 37, 25],
backgroundColor: '#0066ff'
}
],
shapes: [{
type: 'triangle',
backgroundColor: '#0066ff',
size: 10,
angle: -90,
x: 20,
y: 20,
cursor: 'hand',
id: 'backwards'
}]
};
zingchart.node_click = function(e) {
if (e.id === 'myChart') {
zingchart.exec('myChart', 'destroy');
zingchart.render({
id: 'myNextChart',
data: myDrilldownConfig[e.plotindex], //to reference the drilldown charts
height: 400,
width: '100%'
});
}
}
zingchart.shape_click = function(e) {
var shapeId = e.shapeid;
console.log(e);
switch (shapeId) {
case 'forwards':
case 'backwards':
case 'default':
zingchart.exec('myNextChart', 'destroy');
zingchart.render({
id: 'myChart',
data: myConfig,
height: 400,
width: '100%'
});
break;
}
}
zingchart.render({
id: 'myChart',
data: myConfig,
height: 400,
width: '100%'
});
</script>
</body>
</html>
var myConfig = {
type: 'pie',
title: {
text: 'Drilldown Chart',
fontFamily: 'Georgia'
},
plot: {
detach: false,
cursor: 'hand',
valueBox: {
text: '%t',
fontFamily: 'Georgia',
fontSize: 14,
fontWeight: 'normal',
offsetR: '30%'
},
tooltip: {
visible: false
}
},
series: [{
values: [6600],
text: 'Alpha',
backgroundColor: '#cc0000'
},
{
values: [3500],
text: 'Beta',
backgroundColor: '#ff6600'
},
{
values: [3400],
text: 'Gamma',
backgroundColor: '#ffcc00'
},
{
values: [3220],
text: 'Delta',
backgroundColor: '#88cc00'
},
{
values: [3100],
text: 'Epsilon',
backgroundColor: '#66ccff'
},
{
values: [3713],
text: 'Zeta',
backgroundColor: '#0066ff'
}
]
};
var myDrilldownConfig = [];
//the Next Drilldown Charts
myDrilldownConfig[0] = {
type: 'bar',
title: {
text: 'Alpha',
fontFamily: 'Georgia'
},
subtitle: {
text: 'Bar Chart',
fontWeight: 'normal'
},
scaleX: {
labels: ['A1', 'A2', 'A3', 'A4', 'A5', 'A6']
},
scaleY: {
guide: {
lineStyle: 'dotted'
},
},
series: [{
values: [30, 34, 31, 35, 59, 61],
styles: ["#cc0000", "#ff0000", "#ff3333", "#ff6666", "#ff9999", "#ffcccc"]
}],
shapes: [{
type: 'triangle',
backgroundColor: '#cc0000',
size: 10,
angle: -90,
x: 20,
y: 20,
cursor: 'hand',
id: 'backwards'
}]
};
myDrilldownConfig[1] = {
type: 'line',
title: {
text: 'Beta',
fontFamily: 'Georgia'
},
subtitle: {
text: 'Line Chart',
fontWeight: 'normal'
},
scaleX: {
},
scaleY: {
guide: {
lineStyle: 'dotted'
},
},
series: [{
values: [30, 34, 31, 35, 59, 61],
lineColor: '#ff6600',
marker: {
backgroundColor: '#ff6600'
}
},
{
values: [35, 40, 66, 19, 29, 33],
lineColor: '#ff944d',
marker: {
backgroundColor: '#ff944d'
}
},
{
values: [21, 25, 33, 59, 37, 25],
lineColor: '#ffc299',
marker: {
backgroundColor: '#ffc299'
}
}
],
shapes: [{
type: 'triangle',
backgroundColor: '#ff6600',
size: 10,
angle: -90,
x: 20,
y: 20,
cursor: 'hand',
id: 'backwards'
}]
};
myDrilldownConfig[2] = {
type: 'area',
title: {
text: 'Gamma',
fontFamily: 'Georgia'
},
subtitle: {
text: 'Area Chart',
fontWeight: 'normal'
},
plot: {
aspect: 'stepped',
stacked: true
},
scaleX: {
},
scaleY: {
values: '0:140:20',
guide: {
lineStyle: 'dotted'
},
},
series: [{
values: [30, 34, 31, 35, 59, 61],
lineColor: '#ffcc00',
marker: {
backgroundColor: '#ffcc00'
},
backgroundColor: '#ffcc00'
},
{
values: [35, 40, 66, 19, 29, 33],
lineColor: '#ffdb4d',
marker: {
backgroundColor: '#ffdb4d'
},
backgroundColor: '#ffdb4d'
},
{
values: [21, 25, 33, 59, 37, 25],
lineColor: '#ffeb99',
marker: {
backgroundColor: '#ffeb99'
},
backgroundColor: '#ffeb99'
}
],
shapes: [{
type: 'triangle',
backgroundColor: '#ffcc00',
size: 10,
angle: -90,
x: 20,
y: 20,
cursor: 'hand',
id: 'backwards'
}]
};
myDrilldownConfig[3] = {
type: 'scatter',
title: {
text: 'Delta',
fontFamily: 'Georgia'
},
subtitle: {
text: 'Scatter Plot',
fontWeight: 'normal'
},
scaleX: {
guide: {
lineStyle: 'dotted'
}
},
scaleY: {
guide: {
lineStyle: 'dotted'
},
},
series: [{
values: [30, 34, 21, 35, 59, 61],
marker: {
type: 'square',
size: 5,
backgroundColor: '#88cc00',
borderWidth: 1,
borderColor: 'gray'
}
},
{
values: [35, 40, 66, 19, 29, 33],
marker: {
type: 'diamond',
size: 5,
backgroundColor: '#b3ff1a',
borderWidth: 1,
borderColor: 'gray'
}
},
{
values: [21, 25, 33, 59, 37, 25],
marker: {
type: 'triangle',
size: 5,
backgroundColor: '#ccff66',
borderWidth: 1,
borderColor: 'gray'
}
}
],
shapes: [{
type: 'triangle',
backgroundColor: '#88cc00',
size: 10,
angle: -90,
x: 20,
y: 20,
cursor: 'hand',
id: 'backwards'
}]
};
myDrilldownConfig[4] = {
type: 'range',
title: {
text: 'Epsilon',
fontFamily: 'Georgia'
},
subtitle: {
text: 'Range Chart',
fontWeight: 'normal'
},
plot: {
aspect: 'spline'
},
scaleX: {
},
scaleY: {
guide: {
lineStyle: 'dotted'
},
},
series: [{
values: [
[30, 35],
[34, 45],
[31, 50],
[35, 40],
[40, 68],
[33, 60]
],
lineColor: '#66ccff',
marker: {
backgroundColor: '#66ccff'
},
backgroundColor: '#66ccff'
}],
shapes: [{
type: 'triangle',
backgroundColor: '#66ccff',
size: 10,
angle: -90,
x: 20,
y: 20,
cursor: 'hand',
id: 'backwards'
}]
};
myDrilldownConfig[5] = {
type: 'heatmap',
title: {
text: 'Zeta',
fontFamily: 'Georgia'
},
subtitle: {
text: 'Heatmap',
fontWeight: 'normal'
},
scaleX: {
guide: {
visible: false
}
},
scaleY: {
labels: ['Z1', 'Z2', 'Z3'],
guide: {
visible: false
},
},
series: [{
values: [30, 34, 31, 35, 59, 61],
backgroundColor: '#0066ff'
},
{
values: [35, 40, 66, 19, 29, 33],
backgroundColor: '#0066ff'
},
{
values: [21, 25, 33, 59, 37, 25],
backgroundColor: '#0066ff'
}
],
shapes: [{
type: 'triangle',
backgroundColor: '#0066ff',
size: 10,
angle: -90,
x: 20,
y: 20,
cursor: 'hand',
id: 'backwards'
}]
};
zingchart.node_click = function(e) {
if (e.id === 'myChart') {
zingchart.exec('myChart', 'destroy');
zingchart.render({
id: 'myNextChart',
data: myDrilldownConfig[e.plotindex], //to reference the drilldown charts
height: 400,
width: '100%'
});
}
}
zingchart.shape_click = function(e) {
var shapeId = e.shapeid;
console.log(e);
switch (shapeId) {
case 'forwards':
case 'backwards':
case 'default':
zingchart.exec('myNextChart', 'destroy');
zingchart.render({
id: 'myChart',
data: myConfig,
height: 400,
width: '100%'
});
break;
}
}
zingchart.render({
id: 'myChart',
data: myConfig,
height: 400,
width: '100%'
});