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