• 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>
    10.     @import 'https://fonts.googleapis.com/css?family=Open+Sans';
    11.  
    12.     html,
    13.     body {
    14.       width: 100%;
    15.       height: 100%;
    16.     }
    17.  
    18.     #myChart {
    19.       width: 100%;
    20.       height: 100%;
    21.       min-height: 250px;
    22.     }
    23.  
    24.     .zc-ref {
    25.       display: none;
    26.     }
    27.   </style>
    28. </head>
    29.  
    30. <body>
    31.   <div id='myChart'><a class="zc-ref" href="https://www.zingchart.com/">Charts by ZingChart</a></div>
    32.   <script>
    33.     ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"];
    34.     var myConfig = {
    35.       type: "pie",
    36.       plot: {
    37.         borderColor: "#2B313B",
    38.         borderWidth: 5,
    39.         // slice: 90,
    40.         valueBox: {
    41.           placement: 'out',
    42.           text: '%t\n%npv%',
    43.           fontFamily: "Open Sans"
    44.         },
    45.         tooltip: {
    46.           fontSize: '18',
    47.           fontFamily: "Open Sans",
    48.           padding: "5 10",
    49.           text: "%npv%"
    50.         },
    51.         animation: {
    52.           effect: 2,
    53.           method: 5,
    54.           speed: 900,
    55.           sequence: 1,
    56.           delay: 3000
    57.         }
    58.       },
    59.       source: {
    60.         text: 'gs.statcounter.com',
    61.         fontColor: "#8e99a9",
    62.         fontFamily: "Open Sans"
    63.       },
    64.       title: {
    65.         fontColor: "#8e99a9",
    66.         text: 'Global Browser Usage',
    67.         align: "left",
    68.         offsetX: 10,
    69.         fontFamily: "Open Sans",
    70.         fontSize: 25
    71.       },
    72.       subtitle: {
    73.         offsetX: 10,
    74.         offsetY: 10,
    75.         fontColor: "#8e99a9",
    76.         fontFamily: "Open Sans",
    77.         fontSize: "16",
    78.         text: 'May 2016',
    79.         align: "left"
    80.       },
    81.       plotarea: {
    82.         margin: "20 0 0 0"
    83.       },
    84.       series: [{
    85.           values: [11.38],
    86.           text: "Internet Explorer",
    87.           backgroundColor: '#50ADF5',
    88.         },
    89.         {
    90.           values: [56.94],
    91.           text: "Chrome",
    92.           backgroundColor: '#FF7965',
    93.           detached: true
    94.         },
    95.         {
    96.           values: [14.52],
    97.           text: 'Firefox',
    98.           backgroundColor: '#FFCB45',
    99.           detached: true
    100.         },
    101.         {
    102.           text: 'Safari',
    103.           values: [9.69],
    104.           backgroundColor: '#6877e5'
    105.         },
    106.         {
    107.           text: 'Other',
    108.           values: [7.48],
    109.           backgroundColor: '#6FB07F'
    110.         }
    111.       ]
    112.     };
    113.  
    114.     zingchart.render({
    115.       id: 'myChart',
    116.       data: myConfig,
    117.       height: '100%',
    118.       width: '100%'
    119.     });
    120.   </script>
    121. </body>
    122.  
    123. </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'><a class="zc-ref" href="https://www.zingchart.com/">Charts by ZingChart</a></div>
    13. </body>
    14.  
    15. </html>
    1. @import 'https://fonts.googleapis.com/css?family=Open+Sans';
    2.  
    3. html,
    4. body {
    5.   width: 100%;
    6.   height: 100%;
    7. }
    8.  
    9. #myChart {
    10.   width: 100%;
    11.   height: 100%;
    12.   min-height: 250px;
    13. }
    14.  
    15. .zc-ref {
    16.   display: none;
    17. }
    1. var myConfig = {
    2.   type: "pie",
    3.   plot: {
    4.     borderColor: "#2B313B",
    5.     borderWidth: 5,
    6.     // slice: 90,
    7.     valueBox: {
    8.       placement: 'out',
    9.       text: '%t\n%npv%',
    10.       fontFamily: "Open Sans"
    11.     },
    12.     tooltip: {
    13.       fontSize: '18',
    14.       fontFamily: "Open Sans",
    15.       padding: "5 10",
    16.       text: "%npv%"
    17.     },
    18.     animation: {
    19.       effect: 2,
    20.       method: 5,
    21.       speed: 900,
    22.       sequence: 1,
    23.       delay: 3000
    24.     }
    25.   },
    26.   source: {
    27.     text: 'gs.statcounter.com',
    28.     fontColor: "#8e99a9",
    29.     fontFamily: "Open Sans"
    30.   },
    31.   title: {
    32.     fontColor: "#8e99a9",
    33.     text: 'Global Browser Usage',
    34.     align: "left",
    35.     offsetX: 10,
    36.     fontFamily: "Open Sans",
    37.     fontSize: 25
    38.   },
    39.   subtitle: {
    40.     offsetX: 10,
    41.     offsetY: 10,
    42.     fontColor: "#8e99a9",
    43.     fontFamily: "Open Sans",
    44.     fontSize: "16",
    45.     text: 'May 2016',
    46.     align: "left"
    47.   },
    48.   plotarea: {
    49.     margin: "20 0 0 0"
    50.   },
    51.   series: [{
    52.       values: [11.38],
    53.       text: "Internet Explorer",
    54.       backgroundColor: '#50ADF5',
    55.     },
    56.     {
    57.       values: [56.94],
    58.       text: "Chrome",
    59.       backgroundColor: '#FF7965',
    60.       detached: true
    61.     },
    62.     {
    63.       values: [14.52],
    64.       text: 'Firefox',
    65.       backgroundColor: '#FFCB45',
    66.       detached: true
    67.     },
    68.     {
    69.       text: 'Safari',
    70.       values: [9.69],
    71.       backgroundColor: '#6877e5'
    72.     },
    73.     {
    74.       text: 'Other',
    75.       values: [7.48],
    76.       backgroundColor: '#6FB07F'
    77.     }
    78.   ]
    79. };
    80.  
    81. zingchart.render({
    82.   id: 'myChart',
    83.   data: myConfig,
    84.   height: '100%',
    85.   width: '100%'
    86. });