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