<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ZingSoft Demo</title>
<link href='https://fonts.googleapis.com/css?family=Bitter' rel='stylesheet' type='text/css'>
<script nonce="undefined" src="https://cdn.zingchart.com/zingchart.min.js"></script>
<style>
.chart--container {
height: 100%;
width: 100%;
min-height: 530px;
}
.zc-ref {
display: none;
}
</style>
</head>
<body>
<div id="myChart" class="chart--container"><a class="zc-ref" href="https://www.zingchart.com/">Powered by ZingChart</a></div>
<script>
ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"];
let chartConfig = {
type: 'bubble-pie',
backgroundColor: '#bfe6f2',
title: {
text: 'ZingChart Team Growth',
fontColor: '#1d7795',
fontFamily: 'Bitter',
textAlign: 'left',
x: '2%',
y: '5%',
},
subtitle: {
text: '2010-2018',
fontColor: '#1d7795',
fontFamily: 'Georgia',
fontWeight: 'normal',
textAlign: 'left',
x: '12%',
y: '12%',
},
legend: {
backgroundColor: 'none',
borderColor: 'none',
header: {
text: 'ZingChart Team By Role:',
fontColor: '#1d7795',
fontFamily: 'Bitter',
},
item: {
text: '%data-pie',
fontColor: '#1d7795',
fontFamily: 'Georgia',
},
marker: {
type: 'circle',
},
width: '30%',
height: '22%',
x: '5%',
y: '60%',
},
plot: {
tooltip: {
text: 'In %data-bubble, ZingChart had<br>%node-size-value team members.<br><br>%data-pie made up %data-pv%<br>(or %data-v members) of the team.',
backgroundColor: 'none',
borderColor: 'none',
fontColor: '#1d7795',
fontFamily: 'Georgia',
fontSize: '12px',
height: '22%',
sticky: true,
timeout: 30000,
width: '25%',
wrapText: true,
x: '7.5%',
y: '28%',
},
values: [
[2010, 2, 2], // 2010 bubblepi
[2012, 4, 4], // 2012 bubblepie
[2014, 5, 5], // 2014 bubblepie
[2016, 8, 8], // 2016 bubblepie
[2018, 11, 11], // 2018 bubblepie
],
dataBubble: ['2010', '2012', '2014', '2016', '2018'],
},
plotarea: {
backgroundColor: '#eaf7fb',
marginBottom: '12%',
marginLeft: '42%',
marginRight: '5%',
marginTop: '5%',
},
scaleX: {
values: '2010:2018:2',
guide: {
lineColor: '#7CA82B',
lineStyle: 'dotted',
},
item: {
fontColor: '#698e25',
fontSize: '10px',
},
lineColor: 'none',
tick: {
lineColor: '#7CA82B',
lineStyle: 'dotted',
},
},
scaleY: {
values: '2:12:2',
guide: {
lineColor: '#7CA82B',
lineStyle: 'dotted',
},
labels: ['', '', '', '', '', ''],
lineColor: 'none',
tick: {
visible: false,
},
},
labels: [{
text: 'Hover over a bubble pie slice:',
backgroundColor: '#fce9e9 #f9d2d2',
borderColor: '#dd2222',
borderRadius: '15px',
borderWidth: '1px',
fontColor: '#1d7795',
fontStyle: 'italic',
height: '35%',
lineStyle: 'dotted',
padding: '10%',
verticalAlign: 'top',
width: '30%',
x: '5%',
y: '20%',
},
{
borderColor: '#97cd32',
borderRadius: '10px',
borderWidth: '1px',
height: '22%',
lineStyle: 'dotted',
width: '25%',
x: '7.5%',
y: '28%',
},
],
series: [{
dataPie: 'Management',
dataV: [1, 1, 1, 2, 2],
marker: {
backgroundImage: 'PATTERN_WEAVE',
},
},
{
dataPie: 'Developers',
dataV: [1, 2, 2, 3, 6],
marker: {
backgroundImage: 'PATTERN_DOTTED_DIAMOND',
},
},
{
dataPie: 'Marketing',
dataV: [null, 1, 1, 2, 2],
marker: {
backgroundImage: 'PATTERN_SHADE_25',
},
},
{
dataPie: 'Sales',
dataV: [null, null, 1, 1, 1],
marker: {
backgroundImage: 'PATTERN_DASHED_HORIZONTAL',
},
},
],
};
zingchart.loadModules('patterns');
zingchart.loadModules('bubblepie', function() {
zingchart.render({
id: 'myChart',
data: chartConfig,
height: '100%',
width: '100%',
});
});
</script>
</body>
</html>
let chartConfig = {
type: 'bubble-pie',
backgroundColor: '#bfe6f2',
title: {
text: 'ZingChart Team Growth',
fontColor: '#1d7795',
fontFamily: 'Bitter',
textAlign: 'left',
x: '2%',
y: '5%',
},
subtitle: {
text: '2010-2018',
fontColor: '#1d7795',
fontFamily: 'Georgia',
fontWeight: 'normal',
textAlign: 'left',
x: '12%',
y: '12%',
},
legend: {
backgroundColor: 'none',
borderColor: 'none',
header: {
text: 'ZingChart Team By Role:',
fontColor: '#1d7795',
fontFamily: 'Bitter',
},
item: {
text: '%data-pie',
fontColor: '#1d7795',
fontFamily: 'Georgia',
},
marker: {
type: 'circle',
},
width: '30%',
height: '22%',
x: '5%',
y: '60%',
},
plot: {
tooltip: {
text: 'In %data-bubble, ZingChart had<br>%node-size-value team members.<br><br>%data-pie made up %data-pv%<br>(or %data-v members) of the team.',
backgroundColor: 'none',
borderColor: 'none',
fontColor: '#1d7795',
fontFamily: 'Georgia',
fontSize: '12px',
height: '22%',
sticky: true,
timeout: 30000,
width: '25%',
wrapText: true,
x: '7.5%',
y: '28%',
},
values: [
[2010, 2, 2], // 2010 bubblepi
[2012, 4, 4], // 2012 bubblepie
[2014, 5, 5], // 2014 bubblepie
[2016, 8, 8], // 2016 bubblepie
[2018, 11, 11], // 2018 bubblepie
],
dataBubble: ['2010', '2012', '2014', '2016', '2018'],
},
plotarea: {
backgroundColor: '#eaf7fb',
marginBottom: '12%',
marginLeft: '42%',
marginRight: '5%',
marginTop: '5%',
},
scaleX: {
values: '2010:2018:2',
guide: {
lineColor: '#7CA82B',
lineStyle: 'dotted',
},
item: {
fontColor: '#698e25',
fontSize: '10px',
},
lineColor: 'none',
tick: {
lineColor: '#7CA82B',
lineStyle: 'dotted',
},
},
scaleY: {
values: '2:12:2',
guide: {
lineColor: '#7CA82B',
lineStyle: 'dotted',
},
labels: ['', '', '', '', '', ''],
lineColor: 'none',
tick: {
visible: false,
},
},
labels: [
{
text: 'Hover over a bubble pie slice:',
backgroundColor: '#fce9e9 #f9d2d2',
borderColor: '#dd2222',
borderRadius: '15px',
borderWidth: '1px',
fontColor: '#1d7795',
fontStyle: 'italic',
height: '35%',
lineStyle: 'dotted',
padding: '10%',
verticalAlign: 'top',
width: '30%',
x: '5%',
y: '20%',
},
{
borderColor: '#97cd32',
borderRadius: '10px',
borderWidth: '1px',
height: '22%',
lineStyle: 'dotted',
width: '25%',
x: '7.5%',
y: '28%',
},
],
series: [
{
dataPie: 'Management',
dataV: [1, 1, 1, 2, 2],
marker: {
backgroundImage: 'PATTERN_WEAVE',
},
},
{
dataPie: 'Developers',
dataV: [1, 2, 2, 3, 6],
marker: {
backgroundImage: 'PATTERN_DOTTED_DIAMOND',
},
},
{
dataPie: 'Marketing',
dataV: [null, 1, 1, 2, 2],
marker: {
backgroundImage: 'PATTERN_SHADE_25',
},
},
{
dataPie: 'Sales',
dataV: [null, null, 1, 1, 1],
marker: {
backgroundImage: 'PATTERN_DASHED_HORIZONTAL',
},
},
],
};
zingchart.loadModules('patterns');
zingchart.loadModules('bubblepie', function () {
zingchart.render({
id: 'myChart',
data: chartConfig,
height: '100%',
width: '100%',
});
});
