<!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%', });