• 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": "3x1",
    18.       "graphset": [{
    19.           "type": "bar",
    20.           "zoom": {
    21.             "shared": true,
    22.             "background-color": "#29A2CC",
    23.             "label": {
    24.               "visible": true,
    25.               "font-color": "#29A2CC",
    26.               "font-family": "Georgia",
    27.               "border-color": "#29A2CC",
    28.               "padding": "3%"
    29.             }
    30.           },
    31.           "scale-x": {
    32.             "zooming": true,
    33.             "max-items": 11,
    34.             "item": {
    35.               "font-size": 10
    36.             }
    37.           },
    38.           "scale-y": {
    39.             "values": "0:300:150",
    40.             "item": {
    41.               "font-size": 10
    42.             }
    43.           },
    44.           "plot": {
    45.             "bar-width": "50%",
    46.             "background-color": "#29A2CC"
    47.           },
    48.           "plotarea": {
    49.             "margin-left": "dynamic",
    50.             "margin-right": "15%",
    51.             "margin-top": "dynamic",
    52.             "margin-bottom": "dynamic"
    53.           },
    54.           "labels": [{
    55.             "text": "Bar<br>Chart",
    56.             "font-family": "Georgia",
    57.             "font-color": "white",
    58.             "x": "90%",
    59.             "y": "35%",
    60.             "height": "30%",
    61.             "width": "7%",
    62.             "background-color": "#29A2CC",
    63.             "border-radius": "3px"
    64.           }],
    65.           "series": [{
    66.             "values": [
    67.               138.2, 196.3, 153.6, 127.4, 114.1, 181.4, 131.1, 170.9, 154.4, 105.2,
    68.               136.3, 180.4, 150.5, 135.3, 130.5, 164.3, 110.5, 127.2, 183.9, 191.3,
    69.               184.8, 165.7, 102.4, 196.2, 179.1, 116.8, 175.2, 137.8, 100.9, 177.3,
    70.               122.5, 123.1, 131.7, 109.4, 167.2, 142.7, 140.7, 165.5, 148.6, 181.2,
    71.               108.7, 132.9, 161.9, 192.1, 134.5, 149.4, 183.9, 124.4, 114.4, 121.7,
    72.               249.6, 224.3, 199.3, 151.4, 112.4, 213.5, 265.3, 239.5, 294.6, 284.4,
    73.               279.2, 273.7, 233.7, 290.1, 228.2, 269.3, 208.4, 224.6, 235.1, 222.5,
    74.               225.7, 257.2, 238.1, 262.5, 229.6, 269.7, 283.9, 236.2, 260.8, 255.2,
    75.               258.1, 219.5, 292.4, 264.8, 251.7, 225.9, 206.5, 203.3, 258.2, 200.7,
    76.               237.2, 208.1, 262.7, 292.8, 249.2, 242.6, 284.4, 246.7, 275.9, 274.5,
    77.               234.2
    78.             ]
    79.           }]
    80.         },
    81.         {
    82.           "type": "area",
    83.           "zoom": {
    84.             "shared": true,
    85.             "background-color": "#D31E1E",
    86.             "label": {
    87.               "visible": true,
    88.               "font-color": "#D31E1E",
    89.               "font-family": "Georgia",
    90.               "border-color": "#D31E1E",
    91.               "padding": "3%"
    92.             }
    93.           },
    94.           "scale-x": {
    95.             "zooming": true,
    96.             "max-items": 11,
    97.             "item": {
    98.               "font-size": 10
    99.             }
    100.           },
    101.           "scale-y": {
    102.             "values": "0:300:150",
    103.             "item": {
    104.               "font-size": 10
    105.             }
    106.           },
    107.           "plot": {
    108.             "line-color": "#D31E1E",
    109.             "marker": {
    110.               "size": 3,
    111.               "background-color": "#D31E1E"
    112.             },
    113.             "background-color": "#D31E1E"
    114.           },
    115.           "plotarea": {
    116.             "margin-left": "dynamic",
    117.             "margin-right": "15%",
    118.             "margin-top": "dynamic",
    119.             "margin-bottom": "dynamic"
    120.           },
    121.           "labels": [{
    122.             "text": "Area<br>Chart",
    123.             "font-family": "Georgia",
    124.             "font-color": "white",
    125.             "x": "90%",
    126.             "y": "35%",
    127.             "height": "30%",
    128.             "width": "7%",
    129.             "background-color": "#D31E1E",
    130.             "border-radius": "3px"
    131.           }],
    132.           "series": [{
    133.             "values": [
    134.               138.2, 196.3, 153.6, 127.4, 114.1, 181.4, 131.1, 170.9, 154.4, 105.2,
    135.               136.3, 180.4, 150.5, 135.3, 130.5, 164.3, 110.5, 127.2, 183.9, 191.3,
    136.               184.8, 165.7, 102.4, 196.2, 179.1, 116.8, 175.2, 137.8, 100.9, 177.3,
    137.               122.5, 123.1, 131.7, 109.4, 167.2, 142.7, 140.7, 165.5, 148.6, 181.2,
    138.               108.7, 132.9, 161.9, 192.1, 134.5, 149.4, 183.9, 124.4, 114.4, 121.7,
    139.               249.6, 224.3, 199.3, 151.4, 112.4, 213.5, 265.3, 239.5, 294.6, 284.4,
    140.               279.2, 273.7, 233.7, 290.1, 228.2, 269.3, 208.4, 224.6, 235.1, 222.5,
    141.               225.7, 257.2, 238.1, 262.5, 229.6, 269.7, 283.9, 236.2, 260.8, 255.2,
    142.               258.1, 219.5, 292.4, 264.8, 251.7, 225.9, 206.5, 203.3, 258.2, 200.7,
    143.               237.2, 208.1, 262.7, 292.8, 249.2, 242.6, 284.4, 246.7, 275.9, 274.5,
    144.               234.2
    145.             ]
    146.           }]
    147.         },
    148.         {
    149.           "type": "heatmap",
    150.           "zoom": {
    151.             "shared": true,
    152.             "background-color": "#7CA82B",
    153.             "label": {
    154.               "visible": true,
    155.               "font-color": "#7CA82B",
    156.               "font-family": "Georgia",
    157.               "border-color": "#7CA82B",
    158.               "padding": "3%"
    159.             }
    160.           },
    161.           "scale-x": {
    162.             "zooming": true,
    163.             "max-items": 11,
    164.             "item": {
    165.               "font-size": 10
    166.             }
    167.           },
    168.           "scale-y": {
    169.             "values": "0:300:150",
    170.             "item": {
    171.               "font-size": 10
    172.             }
    173.           },
    174.           "plot": {
    175.             "line-color": "#7CA82B",
    176.             "background-color": "#7CA82B",
    177.             "marker": {
    178.               "background-color": "#7CA82B"
    179.             }
    180.           },
    181.           "plotarea": {
    182.             "margin-left": "dynamic",
    183.             "margin-right": "15%",
    184.             "margin-top": "dynamic",
    185.             "margin-bottom": "dynamic"
    186.           },
    187.           "labels": [{
    188.             "text": "Heat<br>Map",
    189.             "font-family": "Georgia",
    190.             "font-color": "white",
    191.             "x": "90%",
    192.             "y": "35%",
    193.             "height": "30%",
    194.             "width": "7%",
    195.             "background-color": "#7CA82B",
    196.             "border-radius": "3px"
    197.           }],
    198.           "series": [{
    199.               "values": [
    200.                 138.2, 196.3, 153.6, 127.4, 114.1, 181.4, 131.1, 170.9, 154.4, 105.2,
    201.                 136.3, 180.4, 150.5, 135.3, 130.5, 164.3, 110.5, 127.2, 183.9, 191.3,
    202.                 108.7, 132.9, 161.9, 192.1, 134.5, 149.4, 183.9, 124.4, 114.4, 121.7,
    203.                 249.6, 224.3, 199.3, 151.4, 112.4, 213.5, 265.3, 239.5, 294.6, 284.4,
    204.                 184.8, 165.7, 102.4, 196.2, 179.1, 116.8, 175.2, 137.8, 100.9, 177.3,
    205.                 122.5, 123.1, 131.7, 109.4, 167.2, 142.7, 140.7, 165.5, 148.6, 181.2,
    206.                 258.1, 219.5, 292.4, 264.8, 251.7, 225.9, 206.5, 203.3, 258.2, 200.7,
    207.                 279.2, 273.7, 233.7, 290.1, 228.2, 269.3, 208.4, 224.6, 235.1, 222.5,
    208.                 225.7, 257.2, 238.1, 262.5, 229.6, 269.7, 283.9, 236.2, 260.8, 255.2,
    209.                 237.2, 208.1, 262.7, 292.8, 249.2, 242.6, 284.4, 246.7, 275.9, 274.5,
    210.                 234.2
    211.               ]
    212.             },
    213.             {
    214.               "values": [
    215.                 136.3, 180.4, 150.5, 135.3, 130.5, 164.3, 110.5, 127.2, 183.9, 191.3,
    216.                 237.2, 208.1, 262.7, 292.8, 249.2, 242.6, 284.4, 246.7, 275.9, 274.5,
    217.                 249.6, 224.3, 199.3, 151.4, 112.4, 213.5, 265.3, 239.5, 294.6, 284.4,
    218.                 184.8, 165.7, 102.4, 196.2, 179.1, 116.8, 175.2, 137.8, 100.9, 177.3,
    219.                 258.1, 219.5, 292.4, 264.8, 251.7, 225.9, 206.5, 203.3, 258.2, 200.7,
    220.                 279.2, 273.7, 233.7, 290.1, 228.2, 269.3, 208.4, 224.6, 235.1, 222.5,
    221.                 225.7, 257.2, 238.1, 262.5, 229.6, 269.7, 283.9, 236.2, 260.8, 255.2,
    222.                 122.5, 123.1, 131.7, 109.4, 167.2, 142.7, 140.7, 165.5, 148.6, 181.2,
    223.                 108.7, 132.9, 161.9, 192.1, 134.5, 149.4, 183.9, 124.4, 114.4, 121.7,
    224.                 138.2, 196.3, 153.6, 127.4, 114.1, 181.4, 131.1, 170.9, 154.4, 105.2,
    225.                 234.2
    226.               ]
    227.             },
    228.             {
    229.               "values": [
    230.                 108.7, 132.9, 161.9, 192.1, 134.5, 149.4, 183.9, 124.4, 114.4, 121.7,
    231.                 249.6, 224.3, 199.3, 151.4, 112.4, 213.5, 265.3, 239.5, 294.6, 284.4,
    232.                 279.2, 273.7, 233.7, 290.1, 228.2, 269.3, 208.4, 224.6, 235.1, 222.5,
    233.                 225.7, 257.2, 238.1, 262.5, 229.6, 269.7, 283.9, 236.2, 260.8, 255.2,
    234.                 258.1, 219.5, 292.4, 264.8, 251.7, 225.9, 206.5, 203.3, 258.2, 200.7,
    235.                 237.2, 208.1, 262.7, 292.8, 249.2, 242.6, 284.4, 246.7, 275.9, 274.5,
    236.                 138.2, 196.3, 153.6, 127.4, 114.1, 181.4, 131.1, 170.9, 154.4, 105.2,
    237.                 136.3, 180.4, 150.5, 135.3, 130.5, 164.3, 110.5, 127.2, 183.9, 191.3,
    238.                 184.8, 165.7, 102.4, 196.2, 179.1, 116.8, 175.2, 137.8, 100.9, 177.3,
    239.                 122.5, 123.1, 131.7, 109.4, 167.2, 142.7, 140.7, 165.5, 148.6, 181.2,
    240.                 234.2
    241.               ]
    242.             }
    243.           ]
    244.         }
    245.       ]
    246.     };
    247.  
    248.     zingchart.render({
    249.       id: 'myChart',
    250.       data: myConfig,
    251.       height: 400,
    252.       width: "100%"
    253.     });
    254.   </script>
    255. </body>
    256.  
    257. </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": "3x1",
    3.   "graphset": [{
    4.       "type": "bar",
    5.       "zoom": {
    6.         "shared": true,
    7.         "background-color": "#29A2CC",
    8.         "label": {
    9.           "visible": true,
    10.           "font-color": "#29A2CC",
    11.           "font-family": "Georgia",
    12.           "border-color": "#29A2CC",
    13.           "padding": "3%"
    14.         }
    15.       },
    16.       "scale-x": {
    17.         "zooming": true,
    18.         "max-items": 11,
    19.         "item": {
    20.           "font-size": 10
    21.         }
    22.       },
    23.       "scale-y": {
    24.         "values": "0:300:150",
    25.         "item": {
    26.           "font-size": 10
    27.         }
    28.       },
    29.       "plot": {
    30.         "bar-width": "50%",
    31.         "background-color": "#29A2CC"
    32.       },
    33.       "plotarea": {
    34.         "margin-left": "dynamic",
    35.         "margin-right": "15%",
    36.         "margin-top": "dynamic",
    37.         "margin-bottom": "dynamic"
    38.       },
    39.       "labels": [{
    40.         "text": "Bar<br>Chart",
    41.         "font-family": "Georgia",
    42.         "font-color": "white",
    43.         "x": "90%",
    44.         "y": "35%",
    45.         "height": "30%",
    46.         "width": "7%",
    47.         "background-color": "#29A2CC",
    48.         "border-radius": "3px"
    49.       }],
    50.       "series": [{
    51.         "values": [
    52.           138.2, 196.3, 153.6, 127.4, 114.1, 181.4, 131.1, 170.9, 154.4, 105.2,
    53.           136.3, 180.4, 150.5, 135.3, 130.5, 164.3, 110.5, 127.2, 183.9, 191.3,
    54.           184.8, 165.7, 102.4, 196.2, 179.1, 116.8, 175.2, 137.8, 100.9, 177.3,
    55.           122.5, 123.1, 131.7, 109.4, 167.2, 142.7, 140.7, 165.5, 148.6, 181.2,
    56.           108.7, 132.9, 161.9, 192.1, 134.5, 149.4, 183.9, 124.4, 114.4, 121.7,
    57.           249.6, 224.3, 199.3, 151.4, 112.4, 213.5, 265.3, 239.5, 294.6, 284.4,
    58.           279.2, 273.7, 233.7, 290.1, 228.2, 269.3, 208.4, 224.6, 235.1, 222.5,
    59.           225.7, 257.2, 238.1, 262.5, 229.6, 269.7, 283.9, 236.2, 260.8, 255.2,
    60.           258.1, 219.5, 292.4, 264.8, 251.7, 225.9, 206.5, 203.3, 258.2, 200.7,
    61.           237.2, 208.1, 262.7, 292.8, 249.2, 242.6, 284.4, 246.7, 275.9, 274.5,
    62.           234.2
    63.         ]
    64.       }]
    65.     },
    66.     {
    67.       "type": "area",
    68.       "zoom": {
    69.         "shared": true,
    70.         "background-color": "#D31E1E",
    71.         "label": {
    72.           "visible": true,
    73.           "font-color": "#D31E1E",
    74.           "font-family": "Georgia",
    75.           "border-color": "#D31E1E",
    76.           "padding": "3%"
    77.         }
    78.       },
    79.       "scale-x": {
    80.         "zooming": true,
    81.         "max-items": 11,
    82.         "item": {
    83.           "font-size": 10
    84.         }
    85.       },
    86.       "scale-y": {
    87.         "values": "0:300:150",
    88.         "item": {
    89.           "font-size": 10
    90.         }
    91.       },
    92.       "plot": {
    93.         "line-color": "#D31E1E",
    94.         "marker": {
    95.           "size": 3,
    96.           "background-color": "#D31E1E"
    97.         },
    98.         "background-color": "#D31E1E"
    99.       },
    100.       "plotarea": {
    101.         "margin-left": "dynamic",
    102.         "margin-right": "15%",
    103.         "margin-top": "dynamic",
    104.         "margin-bottom": "dynamic"
    105.       },
    106.       "labels": [{
    107.         "text": "Area<br>Chart",
    108.         "font-family": "Georgia",
    109.         "font-color": "white",
    110.         "x": "90%",
    111.         "y": "35%",
    112.         "height": "30%",
    113.         "width": "7%",
    114.         "background-color": "#D31E1E",
    115.         "border-radius": "3px"
    116.       }],
    117.       "series": [{
    118.         "values": [
    119.           138.2, 196.3, 153.6, 127.4, 114.1, 181.4, 131.1, 170.9, 154.4, 105.2,
    120.           136.3, 180.4, 150.5, 135.3, 130.5, 164.3, 110.5, 127.2, 183.9, 191.3,
    121.           184.8, 165.7, 102.4, 196.2, 179.1, 116.8, 175.2, 137.8, 100.9, 177.3,
    122.           122.5, 123.1, 131.7, 109.4, 167.2, 142.7, 140.7, 165.5, 148.6, 181.2,
    123.           108.7, 132.9, 161.9, 192.1, 134.5, 149.4, 183.9, 124.4, 114.4, 121.7,
    124.           249.6, 224.3, 199.3, 151.4, 112.4, 213.5, 265.3, 239.5, 294.6, 284.4,
    125.           279.2, 273.7, 233.7, 290.1, 228.2, 269.3, 208.4, 224.6, 235.1, 222.5,
    126.           225.7, 257.2, 238.1, 262.5, 229.6, 269.7, 283.9, 236.2, 260.8, 255.2,
    127.           258.1, 219.5, 292.4, 264.8, 251.7, 225.9, 206.5, 203.3, 258.2, 200.7,
    128.           237.2, 208.1, 262.7, 292.8, 249.2, 242.6, 284.4, 246.7, 275.9, 274.5,
    129.           234.2
    130.         ]
    131.       }]
    132.     },
    133.     {
    134.       "type": "heatmap",
    135.       "zoom": {
    136.         "shared": true,
    137.         "background-color": "#7CA82B",
    138.         "label": {
    139.           "visible": true,
    140.           "font-color": "#7CA82B",
    141.           "font-family": "Georgia",
    142.           "border-color": "#7CA82B",
    143.           "padding": "3%"
    144.         }
    145.       },
    146.       "scale-x": {
    147.         "zooming": true,
    148.         "max-items": 11,
    149.         "item": {
    150.           "font-size": 10
    151.         }
    152.       },
    153.       "scale-y": {
    154.         "values": "0:300:150",
    155.         "item": {
    156.           "font-size": 10
    157.         }
    158.       },
    159.       "plot": {
    160.         "line-color": "#7CA82B",
    161.         "background-color": "#7CA82B",
    162.         "marker": {
    163.           "background-color": "#7CA82B"
    164.         }
    165.       },
    166.       "plotarea": {
    167.         "margin-left": "dynamic",
    168.         "margin-right": "15%",
    169.         "margin-top": "dynamic",
    170.         "margin-bottom": "dynamic"
    171.       },
    172.       "labels": [{
    173.         "text": "Heat<br>Map",
    174.         "font-family": "Georgia",
    175.         "font-color": "white",
    176.         "x": "90%",
    177.         "y": "35%",
    178.         "height": "30%",
    179.         "width": "7%",
    180.         "background-color": "#7CA82B",
    181.         "border-radius": "3px"
    182.       }],
    183.       "series": [{
    184.           "values": [
    185.             138.2, 196.3, 153.6, 127.4, 114.1, 181.4, 131.1, 170.9, 154.4, 105.2,
    186.             136.3, 180.4, 150.5, 135.3, 130.5, 164.3, 110.5, 127.2, 183.9, 191.3,
    187.             108.7, 132.9, 161.9, 192.1, 134.5, 149.4, 183.9, 124.4, 114.4, 121.7,
    188.             249.6, 224.3, 199.3, 151.4, 112.4, 213.5, 265.3, 239.5, 294.6, 284.4,
    189.             184.8, 165.7, 102.4, 196.2, 179.1, 116.8, 175.2, 137.8, 100.9, 177.3,
    190.             122.5, 123.1, 131.7, 109.4, 167.2, 142.7, 140.7, 165.5, 148.6, 181.2,
    191.             258.1, 219.5, 292.4, 264.8, 251.7, 225.9, 206.5, 203.3, 258.2, 200.7,
    192.             279.2, 273.7, 233.7, 290.1, 228.2, 269.3, 208.4, 224.6, 235.1, 222.5,
    193.             225.7, 257.2, 238.1, 262.5, 229.6, 269.7, 283.9, 236.2, 260.8, 255.2,
    194.             237.2, 208.1, 262.7, 292.8, 249.2, 242.6, 284.4, 246.7, 275.9, 274.5,
    195.             234.2
    196.           ]
    197.         },
    198.         {
    199.           "values": [
    200.             136.3, 180.4, 150.5, 135.3, 130.5, 164.3, 110.5, 127.2, 183.9, 191.3,
    201.             237.2, 208.1, 262.7, 292.8, 249.2, 242.6, 284.4, 246.7, 275.9, 274.5,
    202.             249.6, 224.3, 199.3, 151.4, 112.4, 213.5, 265.3, 239.5, 294.6, 284.4,
    203.             184.8, 165.7, 102.4, 196.2, 179.1, 116.8, 175.2, 137.8, 100.9, 177.3,
    204.             258.1, 219.5, 292.4, 264.8, 251.7, 225.9, 206.5, 203.3, 258.2, 200.7,
    205.             279.2, 273.7, 233.7, 290.1, 228.2, 269.3, 208.4, 224.6, 235.1, 222.5,
    206.             225.7, 257.2, 238.1, 262.5, 229.6, 269.7, 283.9, 236.2, 260.8, 255.2,
    207.             122.5, 123.1, 131.7, 109.4, 167.2, 142.7, 140.7, 165.5, 148.6, 181.2,
    208.             108.7, 132.9, 161.9, 192.1, 134.5, 149.4, 183.9, 124.4, 114.4, 121.7,
    209.             138.2, 196.3, 153.6, 127.4, 114.1, 181.4, 131.1, 170.9, 154.4, 105.2,
    210.             234.2
    211.           ]
    212.         },
    213.         {
    214.           "values": [
    215.             108.7, 132.9, 161.9, 192.1, 134.5, 149.4, 183.9, 124.4, 114.4, 121.7,
    216.             249.6, 224.3, 199.3, 151.4, 112.4, 213.5, 265.3, 239.5, 294.6, 284.4,
    217.             279.2, 273.7, 233.7, 290.1, 228.2, 269.3, 208.4, 224.6, 235.1, 222.5,
    218.             225.7, 257.2, 238.1, 262.5, 229.6, 269.7, 283.9, 236.2, 260.8, 255.2,
    219.             258.1, 219.5, 292.4, 264.8, 251.7, 225.9, 206.5, 203.3, 258.2, 200.7,
    220.             237.2, 208.1, 262.7, 292.8, 249.2, 242.6, 284.4, 246.7, 275.9, 274.5,
    221.             138.2, 196.3, 153.6, 127.4, 114.1, 181.4, 131.1, 170.9, 154.4, 105.2,
    222.             136.3, 180.4, 150.5, 135.3, 130.5, 164.3, 110.5, 127.2, 183.9, 191.3,
    223.             184.8, 165.7, 102.4, 196.2, 179.1, 116.8, 175.2, 137.8, 100.9, 177.3,
    224.             122.5, 123.1, 131.7, 109.4, 167.2, 142.7, 140.7, 165.5, 148.6, 181.2,
    225.             234.2
    226.           ]
    227.         }
    228.       ]
    229.     }
    230.   ]
    231. };
    232.  
    233. zingchart.render({
    234.   id: 'myChart',
    235.   data: myConfig,
    236.   height: 400,
    237.   width: "100%"
    238. });