<!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>
@import 'https://fonts.googleapis.com/css?family=Open+Sans';
.zc-body {
background-color: #2B313B;
}
.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 = {
type: 'pie',
backgroundColor: '#2B313B',
title: {
text: 'Global Browser Usage',
align: 'left',
fontColor: '#fff',
fontFamily: 'Open Sans',
fontSize: '25px',
offsetX: '10px',
},
subtitle: {
text: 'June 2020',
align: 'left',
fontColor: '#8e99a9',
fontFamily: 'Open Sans',
fontSize: '16px',
offsetX: '10px',
offsetY: '10px'
},
plot: {
tooltip: {
text: '%npv%',
padding: '5px 10px',
fontFamily: 'Open Sans',
fontSize: '18px'
},
valueBox: {
text: '%t\n%npv%',
fontFamily: 'Open Sans',
placement: 'out'
},
animation: {
effect: 'ANIMATION_EXPAND_VERTICAL',
method: 'ANIMATION_REGULAR_EASE_OUT',
sequence: 'ANIMATION_BY_PLOT',
speed: 500
},
borderColor: '#2B313B',
borderWidth: '5px'
},
plotarea: {
margin: '20px 0 0 0'
},
source: {
text: 'Source: gs.statcounter.com',
fontColor: '#8e99a9',
fontFamily: 'Open Sans',
textAlign: 'left'
},
series: [{
text: 'IE and Edge',
values: [4.8],
backgroundColor: '#50ADF5'
},
{
text: 'Chrome',
values: [63.69],
backgroundColor: '#FF7965'
},
{
text: 'Firefox',
values: [4.64],
backgroundColor: '#FFCB45'
},
{
text: 'Safari',
values: [15.15],
backgroundColor: '#6877e5'
},
{
text: 'Other',
values: [11.72],
backgroundColor: '#6FB07F'
}
]
};
// RENDER CHARTS
// -----------------------------
zingchart.render({
id: 'myChart',
data: chartConfig,
height: '100%',
width: '100%',
});
</script>
</body>
</html>
// CHART CONFIG
// -----------------------------
let chartConfig = {
type: 'pie',
backgroundColor: '#2B313B',
title: {
text: 'Global Browser Usage',
align: 'left',
fontColor: '#fff',
fontFamily: 'Open Sans',
fontSize: '25px',
offsetX: '10px',
},
subtitle: {
text: 'June 2020',
align: 'left',
fontColor: '#8e99a9',
fontFamily: 'Open Sans',
fontSize: '16px',
offsetX: '10px',
offsetY: '10px'
},
plot: {
tooltip: {
text: '%npv%',
padding: '5px 10px',
fontFamily: 'Open Sans',
fontSize: '18px'
},
valueBox: {
text: '%t\n%npv%',
fontFamily: 'Open Sans',
placement: 'out'
},
animation: {
effect: 'ANIMATION_EXPAND_VERTICAL',
method: 'ANIMATION_REGULAR_EASE_OUT',
sequence: 'ANIMATION_BY_PLOT',
speed: 500
},
borderColor: '#2B313B',
borderWidth: '5px'
},
plotarea: {
margin: '20px 0 0 0'
},
source: {
text: 'Source: gs.statcounter.com',
fontColor: '#8e99a9',
fontFamily: 'Open Sans',
textAlign: 'left'
},
series: [
{
text: 'IE and Edge',
values: [4.8],
backgroundColor: '#50ADF5'
},
{
text: 'Chrome',
values: [63.69],
backgroundColor: '#FF7965'
},
{
text: 'Firefox',
values: [4.64],
backgroundColor: '#FFCB45'
},
{
text: 'Safari',
values: [15.15],
backgroundColor: '#6877e5'
},
{
text: 'Other',
values: [11.72],
backgroundColor: '#6FB07F'
}
]
};
// RENDER CHARTS
// -----------------------------
zingchart.render({
id: 'myChart',
data: chartConfig,
height: '100%',
width: '100%',
});
