• 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": "line",
    20.           "zoom": {
    21.             "shared": true,
    22.             "background-color": "#3399ff"
    23.           },
    24.           "scale-x": {
    25.             "zooming": true,
    26.             "max-items": 11,
    27.             "item": {
    28.               "font-size": 10
    29.             }
    30.           },
    31.           "scale-y": {
    32.             "values": "0:300:150",
    33.             "item": {
    34.               "font-size": 10
    35.             }
    36.           },
    37.           "plot": {
    38.             "line-color": "#3399ff",
    39.             "marker": {
    40.               "background-color": "#3399ff"
    41.             }
    42.           },
    43.           "plotarea": {
    44.             "margin": "dynamic"
    45.           },
    46.           "series": [{
    47.             "values": [
    48.               138.2, 196.3, 153.6, 127.4, 114.1, 181.4, 131.1, 170.9, 154.4, 105.2,
    49.               136.3, 180.4, 150.5, 135.3, 130.5, 164.3, 110.5, 127.2, 183.9, 191.3,
    50.               184.8, 165.7, 102.4, 196.2, 179.1, 116.8, 175.2, 137.8, 100.9, 177.3,
    51.               122.5, 123.1, 131.7, 109.4, 167.2, 142.7, 140.7, 165.5, 148.6, 181.2,
    52.               108.7, 132.9, 161.9, 192.1, 134.5, 149.4, 183.9, 124.4, 114.4, 121.7,
    53.               249.6, 224.3, 199.3, 151.4, 112.4, 213.5, 265.3, 239.5, 294.6, 284.4,
    54.               279.2, 273.7, 233.7, 290.1, 228.2, 269.3, 208.4, 224.6, 235.1, 222.5,
    55.               225.7, 257.2, 238.1, 262.5, 229.6, 269.7, 283.9, 236.2, 260.8, 255.2,
    56.               258.1, 219.5, 292.4, 264.8, 251.7, 225.9, 206.5, 203.3, 258.2, 200.7,
    57.               237.2, 208.1, 262.7, 292.8, 249.2, 242.6, 284.4, 246.7, 275.9, 274.5,
    58.               234.2
    59.             ]
    60.           }]
    61.         },
    62.         {
    63.           "type": "bar",
    64.           "zoom": {
    65.             "shared": true,
    66.             "background-color": "#ff0080"
    67.           },
    68.           "scale-x": {
    69.             "zooming": true,
    70.             "max-items": 11,
    71.             "item": {
    72.               "font-size": 10
    73.             }
    74.           },
    75.           "scale-y": {
    76.             "values": "0:300:150",
    77.             "item": {
    78.               "font-size": 10
    79.             }
    80.           },
    81.           "plot": {
    82.             "background-color": "#ff0080",
    83.             "bar-width": "50%"
    84.           },
    85.           "plotarea": {
    86.             "margin": "dynamic"
    87.           },
    88.           "series": [{
    89.             "values": [
    90.               138.2, 196.3, 153.6, 127.4, 114.1, 181.4, 131.1, 170.9, 154.4, 105.2,
    91.               136.3, 180.4, 150.5, 135.3, 130.5, 164.3, 110.5, 127.2, 183.9, 191.3,
    92.               184.8, 165.7, 102.4, 196.2, 179.1, 116.8, 175.2, 137.8, 100.9, 177.3,
    93.               122.5, 123.1, 131.7, 109.4, 167.2, 142.7, 140.7, 165.5, 148.6, 181.2,
    94.               108.7, 132.9, 161.9, 192.1, 134.5, 149.4, 183.9, 124.4, 114.4, 121.7,
    95.               249.6, 224.3, 199.3, 151.4, 112.4, 213.5, 265.3, 239.5, 294.6, 284.4,
    96.               279.2, 273.7, 233.7, 290.1, 228.2, 269.3, 208.4, 224.6, 235.1, 222.5,
    97.               225.7, 257.2, 238.1, 262.5, 229.6, 269.7, 283.9, 236.2, 260.8, 255.2,
    98.               258.1, 219.5, 292.4, 264.8, 251.7, 225.9, 206.5, 203.3, 258.2, 200.7,
    99.               237.2, 208.1, 262.7, 292.8, 249.2, 242.6, 284.4, 246.7, 275.9, 274.5,
    100.               234.2
    101.             ]
    102.           }]
    103.         },
    104.         {
    105.           "type": "area",
    106.           "zoom": {
    107.             "shared": true,
    108.             "background-color": "#4d9900"
    109.           },
    110.           "scale-x": {
    111.             "zooming": true,
    112.             "max-items": 11,
    113.             "item": {
    114.               "font-size": 10
    115.             }
    116.           },
    117.           "scale-y": {
    118.             "values": "0:300:150",
    119.             "item": {
    120.               "font-size": 10
    121.             }
    122.           },
    123.           "plot": {
    124.             "line-color": "#4d9900",
    125.             "background-color": "#4d9900",
    126.             "marker": {
    127.               "background-color": "#4d9900"
    128.             }
    129.           },
    130.           "plotarea": {
    131.             "margin": "dynamic"
    132.           },
    133.           "series": [{
    134.             "values": [
    135.               138.2, 196.3, 153.6, 127.4, 114.1, 181.4, 131.1, 170.9, 154.4, 105.2,
    136.               136.3, 180.4, 150.5, 135.3, 130.5, 164.3, 110.5, 127.2, 183.9, 191.3,
    137.               184.8, 165.7, 102.4, 196.2, 179.1, 116.8, 175.2, 137.8, 100.9, 177.3,
    138.               122.5, 123.1, 131.7, 109.4, 167.2, 142.7, 140.7, 165.5, 148.6, 181.2,
    139.               108.7, 132.9, 161.9, 192.1, 134.5, 149.4, 183.9, 124.4, 114.4, 121.7,
    140.               249.6, 224.3, 199.3, 151.4, 112.4, 213.5, 265.3, 239.5, 294.6, 284.4,
    141.               279.2, 273.7, 233.7, 290.1, 228.2, 269.3, 208.4, 224.6, 235.1, 222.5,
    142.               225.7, 257.2, 238.1, 262.5, 229.6, 269.7, 283.9, 236.2, 260.8, 255.2,
    143.               258.1, 219.5, 292.4, 264.8, 251.7, 225.9, 206.5, 203.3, 258.2, 200.7,
    144.               237.2, 208.1, 262.7, 292.8, 249.2, 242.6, 284.4, 246.7, 275.9, 274.5,
    145.               234.2
    146.             ]
    147.           }]
    148.         }
    149.       ]
    150.     };
    151.  
    152.     zingchart.render({
    153.       id: 'myChart',
    154.       data: myConfig,
    155.       height: 400,
    156.       width: "100%"
    157.     });
    158.   </script>
    159. </body>
    160.  
    161. </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": "line",
    5.       "zoom": {
    6.         "shared": true,
    7.         "background-color": "#3399ff"
    8.       },
    9.       "scale-x": {
    10.         "zooming": true,
    11.         "max-items": 11,
    12.         "item": {
    13.           "font-size": 10
    14.         }
    15.       },
    16.       "scale-y": {
    17.         "values": "0:300:150",
    18.         "item": {
    19.           "font-size": 10
    20.         }
    21.       },
    22.       "plot": {
    23.         "line-color": "#3399ff",
    24.         "marker": {
    25.           "background-color": "#3399ff"
    26.         }
    27.       },
    28.       "plotarea": {
    29.         "margin": "dynamic"
    30.       },
    31.       "series": [{
    32.         "values": [
    33.           138.2, 196.3, 153.6, 127.4, 114.1, 181.4, 131.1, 170.9, 154.4, 105.2,
    34.           136.3, 180.4, 150.5, 135.3, 130.5, 164.3, 110.5, 127.2, 183.9, 191.3,
    35.           184.8, 165.7, 102.4, 196.2, 179.1, 116.8, 175.2, 137.8, 100.9, 177.3,
    36.           122.5, 123.1, 131.7, 109.4, 167.2, 142.7, 140.7, 165.5, 148.6, 181.2,
    37.           108.7, 132.9, 161.9, 192.1, 134.5, 149.4, 183.9, 124.4, 114.4, 121.7,
    38.           249.6, 224.3, 199.3, 151.4, 112.4, 213.5, 265.3, 239.5, 294.6, 284.4,
    39.           279.2, 273.7, 233.7, 290.1, 228.2, 269.3, 208.4, 224.6, 235.1, 222.5,
    40.           225.7, 257.2, 238.1, 262.5, 229.6, 269.7, 283.9, 236.2, 260.8, 255.2,
    41.           258.1, 219.5, 292.4, 264.8, 251.7, 225.9, 206.5, 203.3, 258.2, 200.7,
    42.           237.2, 208.1, 262.7, 292.8, 249.2, 242.6, 284.4, 246.7, 275.9, 274.5,
    43.           234.2
    44.         ]
    45.       }]
    46.     },
    47.     {
    48.       "type": "bar",
    49.       "zoom": {
    50.         "shared": true,
    51.         "background-color": "#ff0080"
    52.       },
    53.       "scale-x": {
    54.         "zooming": true,
    55.         "max-items": 11,
    56.         "item": {
    57.           "font-size": 10
    58.         }
    59.       },
    60.       "scale-y": {
    61.         "values": "0:300:150",
    62.         "item": {
    63.           "font-size": 10
    64.         }
    65.       },
    66.       "plot": {
    67.         "background-color": "#ff0080",
    68.         "bar-width": "50%"
    69.       },
    70.       "plotarea": {
    71.         "margin": "dynamic"
    72.       },
    73.       "series": [{
    74.         "values": [
    75.           138.2, 196.3, 153.6, 127.4, 114.1, 181.4, 131.1, 170.9, 154.4, 105.2,
    76.           136.3, 180.4, 150.5, 135.3, 130.5, 164.3, 110.5, 127.2, 183.9, 191.3,
    77.           184.8, 165.7, 102.4, 196.2, 179.1, 116.8, 175.2, 137.8, 100.9, 177.3,
    78.           122.5, 123.1, 131.7, 109.4, 167.2, 142.7, 140.7, 165.5, 148.6, 181.2,
    79.           108.7, 132.9, 161.9, 192.1, 134.5, 149.4, 183.9, 124.4, 114.4, 121.7,
    80.           249.6, 224.3, 199.3, 151.4, 112.4, 213.5, 265.3, 239.5, 294.6, 284.4,
    81.           279.2, 273.7, 233.7, 290.1, 228.2, 269.3, 208.4, 224.6, 235.1, 222.5,
    82.           225.7, 257.2, 238.1, 262.5, 229.6, 269.7, 283.9, 236.2, 260.8, 255.2,
    83.           258.1, 219.5, 292.4, 264.8, 251.7, 225.9, 206.5, 203.3, 258.2, 200.7,
    84.           237.2, 208.1, 262.7, 292.8, 249.2, 242.6, 284.4, 246.7, 275.9, 274.5,
    85.           234.2
    86.         ]
    87.       }]
    88.     },
    89.     {
    90.       "type": "area",
    91.       "zoom": {
    92.         "shared": true,
    93.         "background-color": "#4d9900"
    94.       },
    95.       "scale-x": {
    96.         "zooming": true,
    97.         "max-items": 11,
    98.         "item": {
    99.           "font-size": 10
    100.         }
    101.       },
    102.       "scale-y": {
    103.         "values": "0:300:150",
    104.         "item": {
    105.           "font-size": 10
    106.         }
    107.       },
    108.       "plot": {
    109.         "line-color": "#4d9900",
    110.         "background-color": "#4d9900",
    111.         "marker": {
    112.           "background-color": "#4d9900"
    113.         }
    114.       },
    115.       "plotarea": {
    116.         "margin": "dynamic"
    117.       },
    118.       "series": [{
    119.         "values": [
    120.           138.2, 196.3, 153.6, 127.4, 114.1, 181.4, 131.1, 170.9, 154.4, 105.2,
    121.           136.3, 180.4, 150.5, 135.3, 130.5, 164.3, 110.5, 127.2, 183.9, 191.3,
    122.           184.8, 165.7, 102.4, 196.2, 179.1, 116.8, 175.2, 137.8, 100.9, 177.3,
    123.           122.5, 123.1, 131.7, 109.4, 167.2, 142.7, 140.7, 165.5, 148.6, 181.2,
    124.           108.7, 132.9, 161.9, 192.1, 134.5, 149.4, 183.9, 124.4, 114.4, 121.7,
    125.           249.6, 224.3, 199.3, 151.4, 112.4, 213.5, 265.3, 239.5, 294.6, 284.4,
    126.           279.2, 273.7, 233.7, 290.1, 228.2, 269.3, 208.4, 224.6, 235.1, 222.5,
    127.           225.7, 257.2, 238.1, 262.5, 229.6, 269.7, 283.9, 236.2, 260.8, 255.2,
    128.           258.1, 219.5, 292.4, 264.8, 251.7, 225.9, 206.5, 203.3, 258.2, 200.7,
    129.           237.2, 208.1, 262.7, 292.8, 249.2, 242.6, 284.4, 246.7, 275.9, 274.5,
    130.           234.2
    131.         ]
    132.       }]
    133.     }
    134.   ]
    135. };
    136.  
    137. zingchart.render({
    138.   id: 'myChart',
    139.   data: myConfig,
    140.   height: 400,
    141.   width: "100%"
    142. });