<!doctype html>
<html class="zc-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 class="zc-body">
<div id="myChart" class="chart--container">
<a href="https://www.zingchart.com/" rel="noopener" class="zc-ref">Powered by ZingChart</a>
</div>
<script>
ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"]; // CHART CONFIG
// -----------------------------
let chartConfig = {
globals: {
fontFamily: 'Roboto',
},
layout: 'h',
graphset: [{
type: 'pie',
backgroundColor: '#F4F4F4',
title: {
text: 'Total number of bytes transferred',
backgroundColor: 'none',
color: '#626262',
fontSize: '16px',
x: '-20px',
y: '80px',
},
legend: {
margin: 'auto auto 16% auto',
backgroundColor: 'none',
borderWidth: '0px',
item: {
color: '%backgroundcolor',
},
layout: 'float',
marker: {
borderRadius: '3px',
borderWidth: '0px',
},
shadow: false,
},
plot: {
tooltip: {
text: '%v TB',
borderRadius: '3px',
shadow: false,
},
valueBox: {
visible: false,
},
marginRight: '100px',
borderWidth: '0px',
shadow: false,
size: '100px',
slice: 70,
},
plotarea: {
margin: '15% 5%',
backgroundColor: '#FFFFFF',
borderColor: '#DFE1E3',
borderRadius: '3px',
borderWidth: '1px',
},
labels: [{
text: '362 TB',
fontSize: '24px',
width: '10%',
x: '45%',
y: '47%',
}, ],
series: [{
text: 'AT&T',
values: [136],
backgroundColor: '#6CCFDF',
},
{
text: 'Verizon',
values: [118],
backgroundColor: '#E76D45',
},
{
text: 'T-Mobile',
values: [108],
backgroundColor: '#55BA72',
},
],
},
{
type: 'pie',
backgroundColor: '#F4F4F4',
title: {
text: 'Total number of requests',
backgroundColor: 'none',
color: '#626262',
fontSize: '16px',
x: '-52px',
y: '80px',
},
legend: {
margin: 'auto auto 16% auto',
backgroundColor: 'none',
borderWidth: '0px',
item: {
color: '%backgroundcolor',
},
layout: 'float',
marker: {
borderRadius: '3px',
borderWidth: '0px',
},
shadow: false,
},
plot: {
tooltip: {
text: '%v BN',
borderRadius: '3px',
shadow: false,
},
valueBox: {
visible: false,
},
borderWidth: '0px',
shadow: false,
size: '100px',
slice: 70,
},
plotarea: {
margin: '15% 5%',
backgroundColor: '#FFFFFF',
borderColor: '#DFE1E3',
borderRadius: '3px',
borderWidth: '1px',
},
labels: [{
text: '6.2 BN',
fontSize: '24px',
width: '10%',
x: '45%',
y: '47%',
}, ],
series: [{
text: 'AT&T',
values: [2.33],
backgroundColor: '#6CCFDF',
},
{
text: 'Verizon',
values: [2.02],
backgroundColor: '#E76D45',
},
{
text: 'T-Mobile',
values: [1.85],
backgroundColor: '#55BA72',
},
],
},
],
};
// RENDER CHARTS
// -----------------------------
zingchart.render({
id: 'myChart',
data: chartConfig,
});
</script>
</body>
</html>
// CHART CONFIG
// -----------------------------
let chartConfig = {
globals: {
fontFamily: 'Roboto',
},
layout: 'h',
graphset: [
{
type: 'pie',
backgroundColor: '#F4F4F4',
title: {
text: 'Total number of bytes transferred',
backgroundColor: 'none',
color: '#626262',
fontSize: '16px',
x: '-20px',
y: '80px',
},
legend: {
margin: 'auto auto 16% auto',
backgroundColor: 'none',
borderWidth: '0px',
item: {
color: '%backgroundcolor',
},
layout: 'float',
marker: {
borderRadius: '3px',
borderWidth: '0px',
},
shadow: false,
},
plot: {
tooltip: {
text: '%v TB',
borderRadius: '3px',
shadow: false,
},
valueBox: {
visible: false,
},
marginRight: '100px',
borderWidth: '0px',
shadow: false,
size: '100px',
slice: 70,
},
plotarea: {
margin: '15% 5%',
backgroundColor: '#FFFFFF',
borderColor: '#DFE1E3',
borderRadius: '3px',
borderWidth: '1px',
},
labels: [
{
text: '362 TB',
fontSize: '24px',
width: '10%',
x: '45%',
y: '47%',
},
],
series: [
{
text: 'AT&T',
values: [136],
backgroundColor: '#6CCFDF',
},
{
text: 'Verizon',
values: [118],
backgroundColor: '#E76D45',
},
{
text: 'T-Mobile',
values: [108],
backgroundColor: '#55BA72',
},
],
},
{
type: 'pie',
backgroundColor: '#F4F4F4',
title: {
text: 'Total number of requests',
backgroundColor: 'none',
color: '#626262',
fontSize: '16px',
x: '-52px',
y: '80px',
},
legend: {
margin: 'auto auto 16% auto',
backgroundColor: 'none',
borderWidth: '0px',
item: {
color: '%backgroundcolor',
},
layout: 'float',
marker: {
borderRadius: '3px',
borderWidth: '0px',
},
shadow: false,
},
plot: {
tooltip: {
text: '%v BN',
borderRadius: '3px',
shadow: false,
},
valueBox: {
visible: false,
},
borderWidth: '0px',
shadow: false,
size: '100px',
slice: 70,
},
plotarea: {
margin: '15% 5%',
backgroundColor: '#FFFFFF',
borderColor: '#DFE1E3',
borderRadius: '3px',
borderWidth: '1px',
},
labels: [
{
text: '6.2 BN',
fontSize: '24px',
width: '10%',
x: '45%',
y: '47%',
},
],
series: [
{
text: 'AT&T',
values: [2.33],
backgroundColor: '#6CCFDF',
},
{
text: 'Verizon',
values: [2.02],
backgroundColor: '#E76D45',
},
{
text: 'T-Mobile',
values: [1.85],
backgroundColor: '#55BA72',
},
],
},
],
};
// RENDER CHARTS
// -----------------------------
zingchart.render({
id: 'myChart',
data: chartConfig,
});
