<!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>
html,
body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
.chart--container {
min-height: 150px;
width: 100%;
height: 100%;
}
.zc-ref {
display: none;
}
</style>
</head>
<body>
<!-- CHART CONTAINER -->
<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 = {
graphset: [{
type: 'pie',
title: {
text: 'Earnings Insights<br>Corporate Overview',
align: 'right',
fontColor: '#616161'
},
legend: {
text: '%t<br>',
borderWidth: '0px',
header: {
text: 'Business Units',
align: 'right',
bold: true,
fontColor: '#616161',
fontSize: '13px'
},
item: {
align: 'right',
padding: '10px',
borderRadius: '3px',
fontColor: '#fff',
width: '115px'
},
itemOff: {
alpha: 0.7,
fontColor: '#616161',
lineWidth: '2px',
textAlpha: 1,
textDecoration: 'line-through'
},
markerOff: {
alpha: 0.2
},
toggleAction: 'remove',
verticalAlign: 'middle',
width: '140px'
},
plot: {
valueBox: {
decimals: 2
},
animation: {
effect: 'ANIMATION_EXPAND_VERTICAL',
method: 'ANIMATION_BACK_EASE_OUT',
onLegendToggle: false,
sequence: 'ANIMATION_BY_PLOT'
},
decimals: 0,
detach: false,
refAngle: 270,
thousandsSeparator: ','
},
scale: {
sizeFactor: 0.75
},
tooltip: {
text: '%t<br>$%v',
align: 'right',
bold: true,
borderRadius: '3px',
fontColor: '#fff',
offsetR: 10,
placement: 'node:out',
width: '110px'
},
series: [{
text: 'Operating System',
values: [119968796],
url: '//cdn.zingchart.com/resources/XUWNNU55_pie_level2_purp.txt',
target: 'graph',
tooltip: {
backgroundColor: '#4527A0'
},
backgroundColor: '#4527A0',
legendItem: {
backgroundColor: '#4527A0'
},
legendMarker: {
type: 'circle',
backgroundColor: '#fff',
borderColor: '#4527A0',
borderWidth: '4px',
size: '7px'
},
legendText: '%t<br><b>$%v</b>'
},
{
text: 'Network and Tools',
values: [97503958],
url: '//cdn.zingchart.com/resources/XUWNNU55_pie_level2_blue.txt',
target: 'graph',
backgroundColor: '#1565C0',
legendItem: {
backgroundColor: '#1565C0'
},
legendMarker: {
type: 'circle',
backgroundColor: '#fff',
borderColor: '#1565C0',
borderWidth: '4px',
size: '7px'
},
legendText: '%t<br><b>$%v</b>'
},
{
text: 'Business Division',
values: [85948575],
url: '//cdn.zingchart.com/resources/XUWNNU55_pie_level2_red.txt',
target: 'graph',
backgroundColor: '#AD1457',
legendItem: {
backgroundColor: '#AD1457'
},
legendMarker: {
type: 'circle',
backgroundColor: '#fff',
borderColor: '#AD1457',
borderWidth: '4px',
size: '7px'
},
legendText: '%t<br><b>$%v</b>'
},
{
text: 'Online Services',
values: [62096876],
url: '//cdn.zingchart.com/resources/XUWNNU55_pie_level2_green.txt',
target: 'graph',
backgroundColor: '#00695C',
legendItem: {
backgroundColor: '#00695C'
},
legendMarker: {
type: 'circle',
backgroundColor: '#fff',
borderColor: '#00695C',
borderWidth: '4px',
size: '7px'
},
legendText: '%t<br><b>$%v</b>'
},
{
text: 'Entertainment',
values: [40467564],
url: '//cdn.zingchart.com/resources/XUWNNU55_pie_level2_orange.txt',
target: 'graph',
backgroundColor: '#EF6C00',
legendItem: {
backgroundColor: '#EF6C00'
},
legendMarker: {
type: 'circle',
backgroundColor: '#fff',
borderColor: '#EF6C00',
borderWidth: '4px',
size: '7px'
},
legendText: '%t<br><b>$%v</b>'
}
]
}],
history: {
borderColor: '#616161',
borderRadius: '2px',
borderWidth: '3px',
item: {
text: 'Some Text',
backgroundColor: '#616161',
borderColor: '#616161',
fontColor: 'red',
fontSize: '10px'
},
itemOff: {
backgroundColor: '#dcdcdc',
borderColor: '#6161663',
size: '3px',
width: '3px',
height: '3px'
},
width: '45px',
height: '30px',
y: '20px'
}
};
zingchart.render({
id: 'myChart',
data: chartConfig,
height: '100%',
cacheControl: ''
});
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ZingSoft Demo</title>
<script src="https://cdn.zingchart.com/zingchart.min.js"></script>
</head>
<body>
<!-- CHART CONTAINER -->
<div id="myChart" class="chart--container">
<a class="zc-ref" href="https://www.zingchart.com/">Powered by ZingChart</a>
</div>
</body>
</html>
html,
body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
.chart--container {
min-height: 150px;
width: 100%;
height: 100%;
}
.zc-ref {
display: none;
}
let chartConfig = {
graphset: [{
type: 'pie',
title: {
text: 'Earnings Insights<br>Corporate Overview',
align: 'right',
fontColor: '#616161'
},
legend: {
text: '%t<br>',
borderWidth: '0px',
header: {
text: 'Business Units',
align: 'right',
bold: true,
fontColor: '#616161',
fontSize: '13px'
},
item: {
align: 'right',
padding: '10px',
borderRadius: '3px',
fontColor: '#fff',
width: '115px'
},
itemOff: {
alpha: 0.7,
fontColor: '#616161',
lineWidth: '2px',
textAlpha: 1,
textDecoration: 'line-through'
},
markerOff: {
alpha: 0.2
},
toggleAction: 'remove',
verticalAlign: 'middle',
width: '140px'
},
plot: {
valueBox: {
decimals: 2
},
animation: {
effect: 'ANIMATION_EXPAND_VERTICAL',
method: 'ANIMATION_BACK_EASE_OUT',
onLegendToggle: false,
sequence: 'ANIMATION_BY_PLOT'
},
decimals: 0,
detach: false,
refAngle: 270,
thousandsSeparator: ','
},
scale: {
sizeFactor: 0.75
},
tooltip: {
text: '%t<br>$%v',
align: 'right',
bold: true,
borderRadius: '3px',
fontColor: '#fff',
offsetR: 10,
placement: 'node:out',
width: '110px'
},
series: [{
text: 'Operating System',
values: [119968796],
url: '//cdn.zingchart.com/resources/XUWNNU55_pie_level2_purp.txt',
target: 'graph',
tooltip: {
backgroundColor: '#4527A0'
},
backgroundColor: '#4527A0',
legendItem: {
backgroundColor: '#4527A0'
},
legendMarker: {
type: 'circle',
backgroundColor: '#fff',
borderColor: '#4527A0',
borderWidth: '4px',
size: '7px'
},
legendText: '%t<br><b>$%v</b>'
},
{
text: 'Network and Tools',
values: [97503958],
url: '//cdn.zingchart.com/resources/XUWNNU55_pie_level2_blue.txt',
target: 'graph',
backgroundColor: '#1565C0',
legendItem: {
backgroundColor: '#1565C0'
},
legendMarker: {
type: 'circle',
backgroundColor: '#fff',
borderColor: '#1565C0',
borderWidth: '4px',
size: '7px'
},
legendText: '%t<br><b>$%v</b>'
},
{
text: 'Business Division',
values: [85948575],
url: '//cdn.zingchart.com/resources/XUWNNU55_pie_level2_red.txt',
target: 'graph',
backgroundColor: '#AD1457',
legendItem: {
backgroundColor: '#AD1457'
},
legendMarker: {
type: 'circle',
backgroundColor: '#fff',
borderColor: '#AD1457',
borderWidth: '4px',
size: '7px'
},
legendText: '%t<br><b>$%v</b>'
},
{
text: 'Online Services',
values: [62096876],
url: '//cdn.zingchart.com/resources/XUWNNU55_pie_level2_green.txt',
target: 'graph',
backgroundColor: '#00695C',
legendItem: {
backgroundColor: '#00695C'
},
legendMarker: {
type: 'circle',
backgroundColor: '#fff',
borderColor: '#00695C',
borderWidth: '4px',
size: '7px'
},
legendText: '%t<br><b>$%v</b>'
},
{
text: 'Entertainment',
values: [40467564],
url: '//cdn.zingchart.com/resources/XUWNNU55_pie_level2_orange.txt',
target: 'graph',
backgroundColor: '#EF6C00',
legendItem: {
backgroundColor: '#EF6C00'
},
legendMarker: {
type: 'circle',
backgroundColor: '#fff',
borderColor: '#EF6C00',
borderWidth: '4px',
size: '7px'
},
legendText: '%t<br><b>$%v</b>'
}
]
}],
history: {
borderColor: '#616161',
borderRadius: '2px',
borderWidth: '3px',
item: {
text: 'Some Text',
backgroundColor: '#616161',
borderColor: '#616161',
fontColor: 'red',
fontSize: '10px'
},
itemOff: {
backgroundColor: '#dcdcdc',
borderColor: '#6161663',
size: '3px',
width: '3px',
height: '3px'
},
width: '45px',
height: '30px',
y: '20px'
}
};
zingchart.render({
id: 'myChart',
data: chartConfig,
height: '100%',
cacheControl: ''
});