• 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.     let chartConfig = {
    17.       layout: '1x2',
    18.       graphset: [{ //Pie Chart
    19.           type: 'pie',
    20.           title: {
    21.             text: 'Pie Chart'
    22.           },
    23.           scaleR: {
    24.             aperture: 360,
    25.             refAngle: 270,
    26.  
    27.             mediaRules: [{
    28.               maxWidth: 400,
    29.               refAngle: 0
    30.             }]
    31.           },
    32.           scale: {
    33.             sizeFactor: 0.8
    34.           },
    35.           plot: {
    36.             valueBox: {
    37.               fontSize: 12,
    38.               fontWeight: 'normal',
    39.               offsetR: '35%'
    40.             }
    41.           },
    42.           series: [{
    43.               values: [60]
    44.             },
    45.             {
    46.               values: [59]
    47.             },
    48.             {
    49.               values: [35]
    50.             },
    51.             {
    52.               values: [31]
    53.             },
    54.             {
    55.               values: [29]
    56.             }
    57.           ]
    58.         },
    59.         { //Angular Gauge Chart
    60.           type: 'gauge',
    61.           title: {
    62.             text: 'Angular Gauge'
    63.           },
    64.           scaleR: {
    65.             aperture: 270,
    66.             center: {
    67.               size: 5,
    68.               backgroundColor: '#66CCFF #FFCCFF',
    69.               borderColor: 'none'
    70.             },
    71.             minorTicks: 9,
    72.             minorTick: {
    73.               placement: 'inner',
    74.               size: 15
    75.             },
    76.  
    77.             mediaRules: [{
    78.               maxWidth: 400,
    79.               minorTicks: 0,
    80.               item: {
    81.                 offsetR: -40
    82.               },
    83.               tick: {
    84.                 size: 10
    85.               },
    86.               ring: {
    87.                 size: 10
    88.               },
    89.             }]
    90.           },
    91.           scale: {
    92.             sizeFactor: 0.8
    93.           },
    94.           series: [{
    95.             values: [79],
    96.             csize: '5%',
    97.             size: '90%',
    98.             backgroundColor: '#000000'
    99.           }]
    100.         }
    101.       ]
    102.     };
    103.  
    104.     zingchart.render({
    105.       id: 'myChart',
    106.       data: chartConfig,
    107.       height: 400,
    108.       width: '100%'
    109.     });
    110.   </script>
    111. </body>
    112.  
    113. </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. let chartConfig = {
    2.   layout: '1x2',
    3.   graphset: [{ //Pie Chart
    4.       type: 'pie',
    5.       title: {
    6.         text: 'Pie Chart'
    7.       },
    8.       scaleR: {
    9.         aperture: 360,
    10.         refAngle: 270,
    11.  
    12.         mediaRules: [{
    13.           maxWidth: 400,
    14.           refAngle: 0
    15.         }]
    16.       },
    17.       scale: {
    18.         sizeFactor: 0.8
    19.       },
    20.       plot: {
    21.         valueBox: {
    22.           fontSize: 12,
    23.           fontWeight: 'normal',
    24.           offsetR: '35%'
    25.         }
    26.       },
    27.       series: [{
    28.           values: [60]
    29.         },
    30.         {
    31.           values: [59]
    32.         },
    33.         {
    34.           values: [35]
    35.         },
    36.         {
    37.           values: [31]
    38.         },
    39.         {
    40.           values: [29]
    41.         }
    42.       ]
    43.     },
    44.     { //Angular Gauge Chart
    45.       type: 'gauge',
    46.       title: {
    47.         text: 'Angular Gauge'
    48.       },
    49.       scaleR: {
    50.         aperture: 270,
    51.         center: {
    52.           size: 5,
    53.           backgroundColor: '#66CCFF #FFCCFF',
    54.           borderColor: 'none'
    55.         },
    56.         minorTicks: 9,
    57.         minorTick: {
    58.           placement: 'inner',
    59.           size: 15
    60.         },
    61.  
    62.         mediaRules: [{
    63.           maxWidth: 400,
    64.           minorTicks: 0,
    65.           item: {
    66.             offsetR: -40
    67.           },
    68.           tick: {
    69.             size: 10
    70.           },
    71.           ring: {
    72.             size: 10
    73.           },
    74.         }]
    75.       },
    76.       scale: {
    77.         sizeFactor: 0.8
    78.       },
    79.       series: [{
    80.         values: [79],
    81.         csize: '5%',
    82.         size: '90%',
    83.         backgroundColor: '#000000'
    84.       }]
    85.     }
    86.   ]
    87. };
    88.  
    89. zingchart.render({
    90.   id: 'myChart',
    91.   data: chartConfig,
    92.   height: 400,
    93.   width: '100%'
    94. });