<!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>
.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 chartData = [{
// Pie Slice 1
valueBox: {
text: '%data-bubblesize',
fontColor: 'black',
placement: 'bottom',
},
dataPie: 'Food',
dataV: [6599, 6602, 6759],
},
{
// Pie Slice 2
dataPie: 'Housing',
dataV: [16887, 17148, 17798],
},
{
// Pie Slice 3
dataPie: 'Apparel and Services',
dataV: [1736, 1604, 1786],
},
{
// Pie Slice 4
dataPie: 'Transportation',
dataV: [8998, 9004, 9073],
},
{
// Pie Slice 5
dataPie: 'Healthcare',
dataV: [3556, 3631, 4290],
},
{
// Pie Slice 6
dataPie: 'Entertainment',
dataV: [2605, 2482, 2728],
},
{
// Pie Slice 7
dataPie: 'Contributions',
dataV: [7504, 7362, 7514],
},
{
// Pie Slice 8
dataPie: 'Other',
dataV: [3557, 3267, 3548],
},
];
let chartConfig = {
type: 'bubble-pie',
title: {
text: 'Average Annual Expenditures in the U.S.',
fontFamily: 'Georgia',
},
subtitle: {
text: 'Source: U.S. Bureau of Labor Statistics<br>http://www.bls.gov/news.release/cesan.nr0.htm',
fontWeight: 'normal',
},
legend: {
header: {
text: 'Expenditure Breakdown',
fontFamily: 'Georgia',
paddingTop: '8px',
},
height: '50%',
item: {
text: '%data-pie',
},
width: '21%',
x: '75%',
y: '25%',
},
plot: {
tooltip: {
text: '%data-pie: $%data-v (or %data-pv%)',
},
values: [
// Bubbles
[0, 51442, 51442],
[1, 51100, 51100],
[2, 53495, 53495],
],
dataBubble: ['2012', '2013', '2014'], // Year
dataBubblesize: ['$51,442', '$51,100', '$53,495'], // Total Expenditures,
maxSize: 50,
minSize: 40,
},
plotarea: {
marginLeft: '10%',
marginRight: '30%',
marginTop: '20%',
},
scaleX: {
item: {
fontFamily: 'Georgia',
},
labels: ['2015', '2016', '2017'],
offsetEnd: '75px',
offsetStart: '75px',
},
scaleY: {
values: '51100:54000:900',
decimals: 0,
format: '$%v',
item: {
fontFamily: 'Georgia',
},
offsetEnd: '75px',
offsetStart: '75px',
short: true,
shortUnit: 'k',
},
series: chartData,
};
zingchart.render({
id: 'myChart',
data: chartConfig,
height: '100%',
width: '100%',
});
</script>
</body>
</html>
let chartData = [
{
// Pie Slice 1
valueBox: {
text: '%data-bubblesize',
fontColor: 'black',
placement: 'bottom',
},
dataPie: 'Food',
dataV: [6599, 6602, 6759],
},
{
// Pie Slice 2
dataPie: 'Housing',
dataV: [16887, 17148, 17798],
},
{
// Pie Slice 3
dataPie: 'Apparel and Services',
dataV: [1736, 1604, 1786],
},
{
// Pie Slice 4
dataPie: 'Transportation',
dataV: [8998, 9004, 9073],
},
{
// Pie Slice 5
dataPie: 'Healthcare',
dataV: [3556, 3631, 4290],
},
{
// Pie Slice 6
dataPie: 'Entertainment',
dataV: [2605, 2482, 2728],
},
{
// Pie Slice 7
dataPie: 'Contributions',
dataV: [7504, 7362, 7514],
},
{
// Pie Slice 8
dataPie: 'Other',
dataV: [3557, 3267, 3548],
},
];
let chartConfig = {
type: 'bubble-pie',
title: {
text: 'Average Annual Expenditures in the U.S.',
fontFamily: 'Georgia',
},
subtitle: {
text: 'Source: U.S. Bureau of Labor Statistics<br>http://www.bls.gov/news.release/cesan.nr0.htm',
fontWeight: 'normal',
},
legend: {
header: {
text: 'Expenditure Breakdown',
fontFamily: 'Georgia',
paddingTop: '8px',
},
height: '50%',
item: {
text: '%data-pie',
},
width: '21%',
x: '75%',
y: '25%',
},
plot: {
tooltip: {
text: '%data-pie: $%data-v (or %data-pv%)',
},
values: [
// Bubbles
[0, 51442, 51442],
[1, 51100, 51100],
[2, 53495, 53495],
],
dataBubble: ['2012', '2013', '2014'], // Year
dataBubblesize: ['$51,442', '$51,100', '$53,495'], // Total Expenditures,
maxSize: 50,
minSize: 40,
},
plotarea: {
marginLeft: '10%',
marginRight: '30%',
marginTop: '20%',
},
scaleX: {
item: {
fontFamily: 'Georgia',
},
labels: ['2015', '2016', '2017'],
offsetEnd: '75px',
offsetStart: '75px',
},
scaleY: {
values: '51100:54000:900',
decimals: 0,
format: '$%v',
item: {
fontFamily: 'Georgia',
},
offsetEnd: '75px',
offsetStart: '75px',
short: true,
shortUnit: 'k',
},
series: chartData,
};
zingchart.render({
id: 'myChart',
data: chartConfig,
height: '100%',
width: '100%',
});
