• Edit
  • Download
    1. <!DOCTYPE html>
    2. <html>
    3.  
    4. <head>
    5.   <meta charset="utf-8">
    6.   <title>ZingSoft Demo</title>
    7.  
    8.   <script nonce="undefined" src="https://cdn.zingchart.com/zingchart.min.js"></script>
    9.   <style></style>
    10. </head>
    11.  
    12. <body>
    13.   <div id='myChart'></div>
    14.   <script>
    15.     ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"];
    16.     var myConfig = {
    17.       graphset: [{
    18.         type: "navpie",
    19.         title: {
    20.           text: 'navpie chart'
    21.         },
    22.         options: {
    23.           threshold: "15%",
    24.           others: {
    25.             backgroundColor: "#999 #333"
    26.           },
    27.           slice: 0.65,
    28.           back: {
    29.             padding: 10,
    30.             fontWeight: "bold",
    31.             color: "#fff",
    32.             fontSize: 12,
    33.             border: "3px solid #47a",
    34.             borderRadius: 9,
    35.             backgroundColor: "#369",
    36.             shadow: true,
    37.             shadowAlpha: 0.5
    38.           }
    39.         },
    40.         series: [{
    41.             values: [69],
    42.             text: "Apple",
    43.             palette: 0
    44.           },
    45.           {
    46.             values: [51],
    47.             text: "Microsoft",
    48.             palette: 1
    49.           },
    50.           {
    51.             values: [42],
    52.             text: "Oracle",
    53.             palette: 2
    54.           },
    55.           {
    56.             values: [25],
    57.             text: "Dell",
    58.             palette: 3
    59.           },
    60.           {
    61.             values: [19],
    62.             text: "Amazon",
    63.             palette: 4
    64.           },
    65.           {
    66.             values: [9],
    67.             detach: false,
    68.             dataGroup: [1],
    69.             tooltipText: "IBM:4<br>HP:3<br>Qualcomm:2",
    70.             text: "Click for more...",
    71.             backgroundColor: "#999 #333",
    72.             palette: 5
    73.           }
    74.         ]
    75.       }],
    76.     };
    77.  
    78.     zingchart.render({
    79.       id: 'myChart',
    80.       data: myConfig,
    81.       height: 400,
    82.       width: '100%'
    83.     });
    84.   </script>
    85. </body>
    86.  
    87. </html>
    1. <!DOCTYPE html>
    2. <html>
    3.  
    4. <head>
    5.   <meta charset="utf-8">
    6.   <title>ZingSoft Demo</title>
    7.  
    8.   <script src="https://cdn.zingchart.com/zingchart.min.js"></script>
    9. </head>
    10.  
    11. <body>
    12.   <div id='myChart'></div>
    13. </body>
    14.  
    15. </html>
    1.  
    1. var myConfig = {
    2.   graphset: [{
    3.     type: "navpie",
    4.     title: {
    5.       text: 'navpie chart'
    6.     },
    7.     options: {
    8.       threshold: "15%",
    9.       others: {
    10.         backgroundColor: "#999 #333"
    11.       },
    12.       slice: 0.65,
    13.       back: {
    14.         padding: 10,
    15.         fontWeight: "bold",
    16.         color: "#fff",
    17.         fontSize: 12,
    18.         border: "3px solid #47a",
    19.         borderRadius: 9,
    20.         backgroundColor: "#369",
    21.         shadow: true,
    22.         shadowAlpha: 0.5
    23.       }
    24.     },
    25.     series: [{
    26.         values: [69],
    27.         text: "Apple",
    28.         palette: 0
    29.       },
    30.       {
    31.         values: [51],
    32.         text: "Microsoft",
    33.         palette: 1
    34.       },
    35.       {
    36.         values: [42],
    37.         text: "Oracle",
    38.         palette: 2
    39.       },
    40.       {
    41.         values: [25],
    42.         text: "Dell",
    43.         palette: 3
    44.       },
    45.       {
    46.         values: [19],
    47.         text: "Amazon",
    48.         palette: 4
    49.       },
    50.       {
    51.         values: [9],
    52.         detach: false,
    53.         dataGroup: [1],
    54.         tooltipText: "IBM:4<br>HP:3<br>Qualcomm:2",
    55.         text: "Click for more...",
    56.         backgroundColor: "#999 #333",
    57.         palette: 5
    58.       }
    59.     ]
    60.   }],
    61. };
    62.  
    63. zingchart.render({
    64.   id: 'myChart',
    65.   data: myConfig,
    66.   height: 400,
    67.   width: '100%'
    68. });