• 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.       layout: "2x2",
    18.       graphset: [{
    19.           type: "gauge",
    20.           backgroundColor: "#BDBDBD",
    21.           x: 0, //position from left of chart edge
    22.           y: 0, //position top of chart
    23.           height: "25%",
    24.           width: "20%",
    25.           plotarea: { //effects main chart region
    26.             margin: "dynamic"
    27.           },
    28.           scale: {
    29.             sizeFactor: 1.3
    30.           },
    31.           scaleR: {
    32.             center: {
    33.               size: 10,
    34.               backgroundColor: "#fff",
    35.               borderColor: "#acabab"
    36.             }
    37.           },
    38.           series: [{
    39.             values: [42],
    40.             palette: 0 //pulls first color from defalut theme
    41.           }]
    42.         },
    43.         {
    44.           type: "gauge",
    45.           backgroundColor: "#a9a7a7",
    46.           x: "20%",
    47.           y: 0,
    48.           height: "25%",
    49.           width: "20%",
    50.           plotarea: {
    51.             margin: "dynamic"
    52.           },
    53.           scale: {
    54.             sizeFactor: 1.3
    55.           },
    56.           scaleR: {
    57.             center: {
    58.               size: 10,
    59.               backgroundColor: "#fff",
    60.               borderColor: "#acabab"
    61.             }
    62.           },
    63.           series: [{
    64.             values: [42],
    65.             palette: 1 //pulls second color from defalut theme
    66.           }]
    67.         },
    68.         {
    69.           type: "gauge",
    70.           backgroundColor: "#807f7f",
    71.           x: "40%",
    72.           y: 0,
    73.           height: "25%",
    74.           width: "20%",
    75.           plotarea: {
    76.             margin: "dynamic"
    77.           },
    78.           scale: {
    79.             sizeFactor: 1.3
    80.           },
    81.           scaleR: {
    82.             center: {
    83.               size: 10,
    84.               backgroundColor: "#fff",
    85.               borderColor: "#acabab"
    86.             }
    87.           },
    88.           series: [{
    89.             values: [42],
    90.             palette: 2 //pulls third color from default theme 
    91.           }]
    92.         },
    93.         {
    94.           type: "gauge",
    95.           backgroundColor: "#747373",
    96.           x: "60%",
    97.           y: 0,
    98.           height: "25%",
    99.           width: "20%",
    100.           plotarea: {
    101.             margin: "dynamic"
    102.           },
    103.           scale: {
    104.             sizeFactor: 1.3
    105.           },
    106.           scaleR: {
    107.             center: {
    108.               size: 10,
    109.               backgroundColor: "#fff",
    110.               borderColor: "#acabab"
    111.             }
    112.           },
    113.           series: [{
    114.             values: [42],
    115.             palette: 3
    116.           }]
    117.         },
    118.         {
    119.           type: "gauge",
    120.           backgroundColor: "#616161",
    121.           x: "80%",
    122.           y: 0,
    123.           height: "25%",
    124.           width: "20%",
    125.           plotarea: {
    126.             margin: "dynamic"
    127.           },
    128.           scale: {
    129.             sizeFactor: 1.3
    130.           },
    131.           scaleR: {
    132.             center: {
    133.               size: 10,
    134.               backgroundColor: "#fff",
    135.               borderColor: "#acabab"
    136.             }
    137.           },
    138.           series: [{
    139.             values: [42],
    140.             palette: 4 //pulls fourth color from default theme
    141.           }]
    142.         },
    143.         {
    144.           type: "mixed",
    145.           backgroundColor: "#E0E0E0",
    146.           x: 0,
    147.           y: "25%",
    148.           height: "40%",
    149.           width: "100%",
    150.           plotarea: {
    151.             margin: "dynamic"
    152.           },
    153.           series: [{
    154.               type: "line",
    155.               values: [35, 42, 67, 89, 50, 36, 35, 42, 67, 89, 50, 36]
    156.             },
    157.             {
    158.               type: "bar",
    159.               values: [28, 40, 39, 36, 8, 40, 39, 36, 8, 40, 39, 36]
    160.             }
    161.           ]
    162.         },
    163.         {
    164.           type: "hbar",
    165.           backgroundColor: "#F5F5F5",
    166.           x: 0,
    167.           y: "65%",
    168.           height: "35%",
    169.           width: "50%",
    170.           plotarea: {
    171.             margin: "dynamic"
    172.           },
    173.           series: [{
    174.               values: [42]
    175.             },
    176.             {
    177.               values: [36]
    178.             }
    179.           ]
    180.         },
    181.         {
    182.           type: "scatter",
    183.           backgroundColor: "#F5F5F5",
    184.           x: "50%",
    185.           y: "65%",
    186.           height: "35%",
    187.           width: "50%",
    188.           plotarea: {
    189.             margin: "dynamic"
    190.           },
    191.           series: [{
    192.               values: [42, 45, 98, 65, 74, 25, 45]
    193.             },
    194.             {
    195.               values: [36, 50, 65, 48, 35, 40, 45]
    196.             }
    197.           ]
    198.         }
    199.       ]
    200.     };
    201.  
    202.     zingchart.render({
    203.       id: 'myChart',
    204.       data: myConfig,
    205.       height: 500,
    206.       width: '100%'
    207.     });
    208.   </script>
    209. </body>
    210.  
    211. </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.   layout: "2x2",
    3.   graphset: [{
    4.       type: "gauge",
    5.       backgroundColor: "#BDBDBD",
    6.       x: 0, //position from left of chart edge
    7.       y: 0, //position top of chart
    8.       height: "25%",
    9.       width: "20%",
    10.       plotarea: { //effects main chart region
    11.         margin: "dynamic"
    12.       },
    13.       scale: {
    14.         sizeFactor: 1.3
    15.       },
    16.       scaleR: {
    17.         center: {
    18.           size: 10,
    19.           backgroundColor: "#fff",
    20.           borderColor: "#acabab"
    21.         }
    22.       },
    23.       series: [{
    24.         values: [42],
    25.         palette: 0 //pulls first color from defalut theme
    26.       }]
    27.     },
    28.     {
    29.       type: "gauge",
    30.       backgroundColor: "#a9a7a7",
    31.       x: "20%",
    32.       y: 0,
    33.       height: "25%",
    34.       width: "20%",
    35.       plotarea: {
    36.         margin: "dynamic"
    37.       },
    38.       scale: {
    39.         sizeFactor: 1.3
    40.       },
    41.       scaleR: {
    42.         center: {
    43.           size: 10,
    44.           backgroundColor: "#fff",
    45.           borderColor: "#acabab"
    46.         }
    47.       },
    48.       series: [{
    49.         values: [42],
    50.         palette: 1 //pulls second color from defalut theme
    51.       }]
    52.     },
    53.     {
    54.       type: "gauge",
    55.       backgroundColor: "#807f7f",
    56.       x: "40%",
    57.       y: 0,
    58.       height: "25%",
    59.       width: "20%",
    60.       plotarea: {
    61.         margin: "dynamic"
    62.       },
    63.       scale: {
    64.         sizeFactor: 1.3
    65.       },
    66.       scaleR: {
    67.         center: {
    68.           size: 10,
    69.           backgroundColor: "#fff",
    70.           borderColor: "#acabab"
    71.         }
    72.       },
    73.       series: [{
    74.         values: [42],
    75.         palette: 2 //pulls third color from default theme 
    76.       }]
    77.     },
    78.     {
    79.       type: "gauge",
    80.       backgroundColor: "#747373",
    81.       x: "60%",
    82.       y: 0,
    83.       height: "25%",
    84.       width: "20%",
    85.       plotarea: {
    86.         margin: "dynamic"
    87.       },
    88.       scale: {
    89.         sizeFactor: 1.3
    90.       },
    91.       scaleR: {
    92.         center: {
    93.           size: 10,
    94.           backgroundColor: "#fff",
    95.           borderColor: "#acabab"
    96.         }
    97.       },
    98.       series: [{
    99.         values: [42],
    100.         palette: 3
    101.       }]
    102.     },
    103.     {
    104.       type: "gauge",
    105.       backgroundColor: "#616161",
    106.       x: "80%",
    107.       y: 0,
    108.       height: "25%",
    109.       width: "20%",
    110.       plotarea: {
    111.         margin: "dynamic"
    112.       },
    113.       scale: {
    114.         sizeFactor: 1.3
    115.       },
    116.       scaleR: {
    117.         center: {
    118.           size: 10,
    119.           backgroundColor: "#fff",
    120.           borderColor: "#acabab"
    121.         }
    122.       },
    123.       series: [{
    124.         values: [42],
    125.         palette: 4 //pulls fourth color from default theme
    126.       }]
    127.     },
    128.     {
    129.       type: "mixed",
    130.       backgroundColor: "#E0E0E0",
    131.       x: 0,
    132.       y: "25%",
    133.       height: "40%",
    134.       width: "100%",
    135.       plotarea: {
    136.         margin: "dynamic"
    137.       },
    138.       series: [{
    139.           type: "line",
    140.           values: [35, 42, 67, 89, 50, 36, 35, 42, 67, 89, 50, 36]
    141.         },
    142.         {
    143.           type: "bar",
    144.           values: [28, 40, 39, 36, 8, 40, 39, 36, 8, 40, 39, 36]
    145.         }
    146.       ]
    147.     },
    148.     {
    149.       type: "hbar",
    150.       backgroundColor: "#F5F5F5",
    151.       x: 0,
    152.       y: "65%",
    153.       height: "35%",
    154.       width: "50%",
    155.       plotarea: {
    156.         margin: "dynamic"
    157.       },
    158.       series: [{
    159.           values: [42]
    160.         },
    161.         {
    162.           values: [36]
    163.         }
    164.       ]
    165.     },
    166.     {
    167.       type: "scatter",
    168.       backgroundColor: "#F5F5F5",
    169.       x: "50%",
    170.       y: "65%",
    171.       height: "35%",
    172.       width: "50%",
    173.       plotarea: {
    174.         margin: "dynamic"
    175.       },
    176.       series: [{
    177.           values: [42, 45, 98, 65, 74, 25, 45]
    178.         },
    179.         {
    180.           values: [36, 50, 65, 48, 35, 40, 45]
    181.         }
    182.       ]
    183.     }
    184.   ]
    185. };
    186.  
    187. zingchart.render({
    188.   id: 'myChart',
    189.   data: myConfig,
    190.   height: 500,
    191.   width: '100%'
    192. });