• 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: '2x3',
    18.       graphset: [{ //Pie Chart 1
    19.           type: 'pie',
    20.           scale: {
    21.             sizeFactor: 0.1,
    22.             mediaRules: [{
    23.               maxWidth: 400,
    24.               sizeFactor: 1,
    25.             }]
    26.           },
    27.           plot: {
    28.             valueBox: {
    29.               placement: 'out',
    30.               fontSize: 10,
    31.               fontWeight: 'normal'
    32.             }
    33.           },
    34.           series: [{
    35.               values: [60]
    36.             },
    37.             {
    38.               values: [59]
    39.             },
    40.             {
    41.               values: [35]
    42.             },
    43.             {
    44.               values: [31]
    45.             },
    46.             {
    47.               values: [29]
    48.             }
    49.           ]
    50.         },
    51.         { //Pie Chart 2
    52.           type: 'pie',
    53.           scale: {
    54.             sizeFactor: 0.5,
    55.             mediaRules: [{
    56.               maxWidth: 400,
    57.               sizeFactor: 1,
    58.             }]
    59.           },
    60.           plot: {
    61.             valueBox: {
    62.               placement: 'out',
    63.               fontSize: 10,
    64.               fontWeight: 'normal'
    65.             }
    66.           },
    67.           series: [{
    68.               values: [60]
    69.             },
    70.             {
    71.               values: [59]
    72.             },
    73.             {
    74.               values: [35]
    75.             },
    76.             {
    77.               values: [31]
    78.             },
    79.             {
    80.               values: [29]
    81.             }
    82.           ]
    83.         },
    84.         { //Pie Chart 3
    85.           type: 'pie',
    86.           scale: {
    87.             sizeFactor: 1.0,
    88.             mediaRules: [{
    89.               maxWidth: 400,
    90.               sizeFactor: 1,
    91.             }]
    92.           },
    93.           plot: {
    94.             valueBox: {
    95.               fontSize: 12,
    96.               fontWeight: 'normal',
    97.               offsetR: 15
    98.             }
    99.           },
    100.           series: [{
    101.               values: [60]
    102.             },
    103.             {
    104.               values: [59]
    105.             },
    106.             {
    107.               values: [35]
    108.             },
    109.             {
    110.               values: [31]
    111.             },
    112.             {
    113.               values: [29]
    114.             }
    115.           ]
    116.         },
    117.         { //Angular Gauge 1
    118.           type: 'gauge',
    119.           scale: {
    120.             sizeFactor: 1.0,
    121.             mediaRules: [{
    122.               maxWidth: 400,
    123.               sizeFactor: 1,
    124.             }]
    125.           },
    126.           scaleR: {
    127.             center: {
    128.               size: 5,
    129.               backgroundColor: '#66CCFF #FFCCFF',
    130.               borderColor: 'none'
    131.             }
    132.           },
    133.           series: [{
    134.             values: [35],
    135.             csize: '5%',
    136.             size: '90%',
    137.             backgroundColor: '#000000'
    138.           }]
    139.         },
    140.         { //Angular Gauge 2
    141.           type: 'gauge',
    142.           scale: {
    143.             sizeFactor: 0.5,
    144.             mediaRules: [{
    145.               maxWidth: 400,
    146.               sizeFactor: 1,
    147.             }]
    148.           },
    149.           scaleR: {
    150.             center: {
    151.               size: 4,
    152.               backgroundColor: '#66CCFF #FFCCFF',
    153.               borderColor: 'none'
    154.             },
    155.             item: {
    156.               offsetR: -5,
    157.               fontSize: 10
    158.             }
    159.           },
    160.           series: [{
    161.             values: [35],
    162.             csize: '4%',
    163.             size: '90%',
    164.             backgroundColor: '#000000'
    165.           }]
    166.         },
    167.         { //Angular Gauge 3
    168.           type: 'gauge',
    169.           scale: {
    170.             sizeFactor: 0.3,
    171.             mediaRules: [{
    172.               maxWidth: 400,
    173.               sizeFactor: 1,
    174.             }]
    175.           },
    176.           scaleR: {
    177.             center: {
    178.               size: 3,
    179.               backgroundColor: '#66CCFF #FFCCFF',
    180.               borderColor: 'none'
    181.             },
    182.             item: {
    183.               offsetR: -5,
    184.               fontSize: 10
    185.             }
    186.           },
    187.           series: [{
    188.             values: [35],
    189.             csize: '3%',
    190.             size: '90%',
    191.             backgroundColor: '#000000'
    192.           }]
    193.         }
    194.       ]
    195.     };
    196.  
    197.     zingchart.render({
    198.       id: 'myChart',
    199.       data: chartConfig,
    200.       height: 400,
    201.       width: '100%'
    202.     });
    203.   </script>
    204. </body>
    205.  
    206. </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: '2x3',
    3.   graphset: [{ //Pie Chart 1
    4.       type: 'pie',
    5.       scale: {
    6.         sizeFactor: 0.1,
    7.         mediaRules: [{
    8.           maxWidth: 400,
    9.           sizeFactor: 1,
    10.         }]
    11.       },
    12.       plot: {
    13.         valueBox: {
    14.           placement: 'out',
    15.           fontSize: 10,
    16.           fontWeight: 'normal'
    17.         }
    18.       },
    19.       series: [{
    20.           values: [60]
    21.         },
    22.         {
    23.           values: [59]
    24.         },
    25.         {
    26.           values: [35]
    27.         },
    28.         {
    29.           values: [31]
    30.         },
    31.         {
    32.           values: [29]
    33.         }
    34.       ]
    35.     },
    36.     { //Pie Chart 2
    37.       type: 'pie',
    38.       scale: {
    39.         sizeFactor: 0.5,
    40.         mediaRules: [{
    41.           maxWidth: 400,
    42.           sizeFactor: 1,
    43.         }]
    44.       },
    45.       plot: {
    46.         valueBox: {
    47.           placement: 'out',
    48.           fontSize: 10,
    49.           fontWeight: 'normal'
    50.         }
    51.       },
    52.       series: [{
    53.           values: [60]
    54.         },
    55.         {
    56.           values: [59]
    57.         },
    58.         {
    59.           values: [35]
    60.         },
    61.         {
    62.           values: [31]
    63.         },
    64.         {
    65.           values: [29]
    66.         }
    67.       ]
    68.     },
    69.     { //Pie Chart 3
    70.       type: 'pie',
    71.       scale: {
    72.         sizeFactor: 1.0,
    73.         mediaRules: [{
    74.           maxWidth: 400,
    75.           sizeFactor: 1,
    76.         }]
    77.       },
    78.       plot: {
    79.         valueBox: {
    80.           fontSize: 12,
    81.           fontWeight: 'normal',
    82.           offsetR: 15
    83.         }
    84.       },
    85.       series: [{
    86.           values: [60]
    87.         },
    88.         {
    89.           values: [59]
    90.         },
    91.         {
    92.           values: [35]
    93.         },
    94.         {
    95.           values: [31]
    96.         },
    97.         {
    98.           values: [29]
    99.         }
    100.       ]
    101.     },
    102.     { //Angular Gauge 1
    103.       type: 'gauge',
    104.       scale: {
    105.         sizeFactor: 1.0,
    106.         mediaRules: [{
    107.           maxWidth: 400,
    108.           sizeFactor: 1,
    109.         }]
    110.       },
    111.       scaleR: {
    112.         center: {
    113.           size: 5,
    114.           backgroundColor: '#66CCFF #FFCCFF',
    115.           borderColor: 'none'
    116.         }
    117.       },
    118.       series: [{
    119.         values: [35],
    120.         csize: '5%',
    121.         size: '90%',
    122.         backgroundColor: '#000000'
    123.       }]
    124.     },
    125.     { //Angular Gauge 2
    126.       type: 'gauge',
    127.       scale: {
    128.         sizeFactor: 0.5,
    129.         mediaRules: [{
    130.           maxWidth: 400,
    131.           sizeFactor: 1,
    132.         }]
    133.       },
    134.       scaleR: {
    135.         center: {
    136.           size: 4,
    137.           backgroundColor: '#66CCFF #FFCCFF',
    138.           borderColor: 'none'
    139.         },
    140.         item: {
    141.           offsetR: -5,
    142.           fontSize: 10
    143.         }
    144.       },
    145.       series: [{
    146.         values: [35],
    147.         csize: '4%',
    148.         size: '90%',
    149.         backgroundColor: '#000000'
    150.       }]
    151.     },
    152.     { //Angular Gauge 3
    153.       type: 'gauge',
    154.       scale: {
    155.         sizeFactor: 0.3,
    156.         mediaRules: [{
    157.           maxWidth: 400,
    158.           sizeFactor: 1,
    159.         }]
    160.       },
    161.       scaleR: {
    162.         center: {
    163.           size: 3,
    164.           backgroundColor: '#66CCFF #FFCCFF',
    165.           borderColor: 'none'
    166.         },
    167.         item: {
    168.           offsetR: -5,
    169.           fontSize: 10
    170.         }
    171.       },
    172.       series: [{
    173.         values: [35],
    174.         csize: '3%',
    175.         size: '90%',
    176.         backgroundColor: '#000000'
    177.       }]
    178.     }
    179.   ]
    180. };
    181.  
    182. zingchart.render({
    183.   id: 'myChart',
    184.   data: chartConfig,
    185.   height: 400,
    186.   width: '100%'
    187. });