<!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>
.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>
<div id='drilldown1' 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": "pie",
"title": {
"text": "Aggregate",
"fontColor": "#333333",
"fontSize": 14,
"fontFamily": "\"Roboto\", \"Helvetica\", \"Arial\", sans-serif;",
"fontWeight": 300,
"position": "50% 100%"
},
"noData": {
"text": "Currently there is no data in the chart",
"fontColor": "#333333",
"fontSize": 18,
"fontFamily": "\"Roboto\", \"Helvetica\", \"Arial\", sans-serif;",
"fontWeight": 300
},
"plotarea": {
"margin": "0px 0px 12px 0px"
},
"series": [{
"values": [2],
"text": "Christian",
"backgroundColor": " #00bcd4",
"data-background-color": " #00bcd4",
"data-legend-name": "Christian"
},
{
"values": [2],
"text": "Buddhist",
"backgroundColor": " #f44336",
"data-background-color": " #f44336",
"data-legend-name": "Buddhist"
},
// {
// "values": [0],
// "text": "Catholic",
// "backgroundColor": " #9c27b0",
// "data-background-color": " #9c27b0",
// "data-legend-name": "Catholic"
// },
{
"values": [2],
"text": "Catholic - Confirmed",
"backgroundColor": " #4caf50",
"data-background-color": " #4caf50",
"data-legend-name": "Catholic - Confirmed"
},
{
"values": [0],
"text": "Sikh",
"backgroundColor": " #337ab7",
"data-background-color": " #337ab7",
"data-legend-name": "Sikh"
},
{
"values": [0],
"text": "Unknown",
"backgroundColor": " #ff9800",
"data-background-color": " #ff9800",
"data-legend-name": "Unknown"
}
],
"plot": {
"detach": false,
"tooltip": {
"alpha": 1,
"text": "<div class=\"pie-chart-tooltip text-center\" style=\"border-color:%color\"><span style=\"color:%data-background-color\">%t <br/> %v | %npv%</span</div>",
"fontColor": "#333333",
"fontSize": 14,
"fontFamily": "\"Roboto\", \"Helvetica\", \"Arial\", sans-serif;",
"fontWeight": 300,
"borderWidth": 0,
"borderRadius": 8,
"placement": "node:out",
"backgroundColor": "#ffffff",
"padding": "0",
"htmlMode": true,
"decimals": 0
},
"slice": 70,
"valueBox": {
"text": "%npv%",
"fontColor": "white",
"fontSize": 14,
"fontFamily": "\"Roboto\", \"Helvetica\", \"Arial\", sans-serif;",
"fontWeight": 400,
"decimals": 0,
"connector": {
"lineColor": "#616161"
},
"rules": [{
"text": "%npv",
"rule": "%node-value == 0",
"-rule": "%npv <= 0.0",
"visible": false
}]
},
"rules": [{
"text": "%p",
"rule": "%node-value == 0",
"-rule": "%p <= 0.0",
"visible": false
}],
"cursor": "hand"
},
"labels": [{
"fontWeight": 500,
"anchor": "c",
"x": "50%",
"y": "47%",
"fontSize": 32,
"text": "6"
}],
"gui": {
"contextMenu": {
"backgroundColor": "white",
"item": {
"backgroundColor": "white",
"fontColor": "black",
"hoverState": {
"backgroundColor": "black",
"fontColor": "grey"
}
}
},
"behaviors": [{
"id": "Reload",
"enabled": "none"
},
{
"id": "SaveAsImage",
"enabled": "none"
},
{
"id": "DownloadPDF",
"enabled": "none"
},
{
"id": "DownloadSVG",
"enabled": "none"
},
{
"id": "DownloadCSV",
"enabled": "none"
},
{
"id": "DownloadXLS",
"enabled": "none"
},
{
"id": "ViewDataTable",
"enabled": "none"
},
{
"id": "Print",
"enabled": "none"
},
{
"id": "ViewSource",
"enabled": "none"
},
{
"id": "About ZingChart",
"enabled": "none"
},
{
"id": "ZoomIn",
"enabled": "none"
},
{
"id": "ZoomOut",
"enabled": "none"
},
{
"id": "ViewAll",
"enabled": "none"
},
{
"id": "HideGuide",
"enabled": "none"
}
]
}
};
zingchart.render({
id: 'myChart',
data: chartConfig,
height: '450px',
width: '100%',
});
</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>
<div id="myChart" class="chart--container">
<a class="zc-ref" href="https://www.zingchart.com/">Powered by ZingChart</a>
</div>
<div id='drilldown1' class="chart--container">
<a class="zc-ref" href="https://www.zingchart.com/">Powered by ZingChart</a>
</div>
</body>
</html>
.zc-ref {
display: none;
}
let chartConfig = {
"type": "pie",
"title": {
"text": "Aggregate",
"fontColor": "#333333",
"fontSize": 14,
"fontFamily": "\"Roboto\", \"Helvetica\", \"Arial\", sans-serif;",
"fontWeight": 300,
"position": "50% 100%"
},
"noData": {
"text": "Currently there is no data in the chart",
"fontColor": "#333333",
"fontSize": 18,
"fontFamily": "\"Roboto\", \"Helvetica\", \"Arial\", sans-serif;",
"fontWeight": 300
},
"plotarea": {
"margin": "0px 0px 12px 0px"
},
"series": [{
"values": [2],
"text": "Christian",
"backgroundColor": " #00bcd4",
"data-background-color": " #00bcd4",
"data-legend-name": "Christian"
},
{
"values": [2],
"text": "Buddhist",
"backgroundColor": " #f44336",
"data-background-color": " #f44336",
"data-legend-name": "Buddhist"
},
// {
// "values": [0],
// "text": "Catholic",
// "backgroundColor": " #9c27b0",
// "data-background-color": " #9c27b0",
// "data-legend-name": "Catholic"
// },
{
"values": [2],
"text": "Catholic - Confirmed",
"backgroundColor": " #4caf50",
"data-background-color": " #4caf50",
"data-legend-name": "Catholic - Confirmed"
},
{
"values": [0],
"text": "Sikh",
"backgroundColor": " #337ab7",
"data-background-color": " #337ab7",
"data-legend-name": "Sikh"
},
{
"values": [0],
"text": "Unknown",
"backgroundColor": " #ff9800",
"data-background-color": " #ff9800",
"data-legend-name": "Unknown"
}
],
"plot": {
"detach": false,
"tooltip": {
"alpha": 1,
"text": "<div class=\"pie-chart-tooltip text-center\" style=\"border-color:%color\"><span style=\"color:%data-background-color\">%t <br/> %v | %npv%</span</div>",
"fontColor": "#333333",
"fontSize": 14,
"fontFamily": "\"Roboto\", \"Helvetica\", \"Arial\", sans-serif;",
"fontWeight": 300,
"borderWidth": 0,
"borderRadius": 8,
"placement": "node:out",
"backgroundColor": "#ffffff",
"padding": "0",
"htmlMode": true,
"decimals": 0
},
"slice": 70,
"valueBox": {
"text": "%npv%",
"fontColor": "white",
"fontSize": 14,
"fontFamily": "\"Roboto\", \"Helvetica\", \"Arial\", sans-serif;",
"fontWeight": 400,
"decimals": 0,
"connector": {
"lineColor": "#616161"
},
"rules": [{
"text": "%npv",
"rule": "%node-value == 0",
"-rule": "%npv <= 0.0",
"visible": false
}]
},
"rules": [{
"text": "%p",
"rule": "%node-value == 0",
"-rule": "%p <= 0.0",
"visible": false
}],
"cursor": "hand"
},
"labels": [{
"fontWeight": 500,
"anchor": "c",
"x": "50%",
"y": "47%",
"fontSize": 32,
"text": "6"
}],
"gui": {
"contextMenu": {
"backgroundColor": "white",
"item": {
"backgroundColor": "white",
"fontColor": "black",
"hoverState": {
"backgroundColor": "black",
"fontColor": "grey"
}
}
},
"behaviors": [{
"id": "Reload",
"enabled": "none"
},
{
"id": "SaveAsImage",
"enabled": "none"
},
{
"id": "DownloadPDF",
"enabled": "none"
},
{
"id": "DownloadSVG",
"enabled": "none"
},
{
"id": "DownloadCSV",
"enabled": "none"
},
{
"id": "DownloadXLS",
"enabled": "none"
},
{
"id": "ViewDataTable",
"enabled": "none"
},
{
"id": "Print",
"enabled": "none"
},
{
"id": "ViewSource",
"enabled": "none"
},
{
"id": "About ZingChart",
"enabled": "none"
},
{
"id": "ZoomIn",
"enabled": "none"
},
{
"id": "ZoomOut",
"enabled": "none"
},
{
"id": "ViewAll",
"enabled": "none"
},
{
"id": "HideGuide",
"enabled": "none"
}
]
}
};
zingchart.render({
id: 'myChart',
data: chartConfig,
height: '450px',
width: '100%',
});