• 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 myConfig3 = {
    17.       "graphset": [{
    18.           "type": "scatter",
    19.           "height": "50%",
    20.           "width": "50%",
    21.           "x": "0%",
    22.           "y": "0%",
    23.           "scale-x": {
    24.             "offset-start": 5,
    25.             "offset-end": 5,
    26.             "values": "0:10:1"
    27.           },
    28.           "scale-y": {
    29.             "offset-start": 5,
    30.             "offset-end": 5,
    31.             "values": "0:100:50"
    32.           },
    33.           "series": [{
    34.             "values": [
    35.               [0.9, 3],
    36.               [2.1, 13],
    37.               [3.5, 25],
    38.               [4.9, 35],
    39.               [5.3, 41],
    40.               [6.5, 57],
    41.               [7.1, 61],
    42.               [8.7, 70],
    43.               [9.2, 82],
    44.               [9.9, 95]
    45.             ]
    46.           }]
    47.         },
    48.         {
    49.           "type": "scatter",
    50.           "height": "50%",
    51.           "width": "50%",
    52.           "x": "50%",
    53.           "y": "0%",
    54.           "scale-x": {
    55.             "offset-start": 5,
    56.             "offset-end": 5,
    57.             "values": "0:10:1"
    58.           },
    59.           "scale-y": {
    60.             "offset-start": 5,
    61.             "offset-end": 5,
    62.             "values": "0:100:50"
    63.           },
    64.           "series": [{
    65.             "values": [
    66.               [0.1, 9],
    67.               [1.8, 21],
    68.               [1.9, 29],
    69.               [4.1, 33],
    70.               [4.5, 39],
    71.               [6.9, 51],
    72.               [7.4, 64],
    73.               [8.9, 70],
    74.               [9, 75],
    75.               [9.3, 93]
    76.             ]
    77.           }]
    78.         },
    79.         {
    80.           "type": "scatter",
    81.           "height": "50%",
    82.           "width": "50%",
    83.           "x": "0%",
    84.           "y": "50%",
    85.           "scale-x": {
    86.             "offset-start": 5,
    87.             "offset-end": 5,
    88.             "values": "0:10:1"
    89.           },
    90.           "scale-y": {
    91.             "offset-start": 5,
    92.             "offset-end": 5,
    93.             "values": "0:100:50"
    94.           },
    95.           "series": [{
    96.             "values": [
    97.               [0.3, 11],
    98.               [0.9, 15],
    99.               [1.1, 24],
    100.               [2.3, 29],
    101.               [2.9, 30],
    102.               [3.3, 35],
    103.               [5.6, 67],
    104.               [6.9, 70],
    105.               [7.3, 71],
    106.               [8.9, 90]
    107.             ]
    108.           }]
    109.         },
    110.         {
    111.           "type": "scatter",
    112.           "height": "50%",
    113.           "width": "50%",
    114.           "x": "50%",
    115.           "y": "50%",
    116.           "scale-x": {
    117.             "offset-start": 5,
    118.             "offset-end": 5,
    119.             "values": "0:10:1"
    120.           },
    121.           "scale-y": {
    122.             "offset-start": 5,
    123.             "offset-end": 5,
    124.             "values": "0:100:50"
    125.           },
    126.           "series": [{
    127.             "values": [
    128.               [0.5, 5],
    129.               [1.9, 5],
    130.               [2.5, 10],
    131.               [3.1, 30],
    132.               [6.5, 45],
    133.               [6.9, 74],
    134.               [7.2, 50],
    135.               [7.8, 56],
    136.               [8, 61],
    137.               [8.5, 71]
    138.             ]
    139.           }]
    140.         }
    141.       ]
    142.     };
    143.  
    144.     zingchart.render({
    145.       id: 'myChart',
    146.       data: myConfig3,
    147.       height: 400,
    148.       width: "100%"
    149.     });
    150.   </script>
    151. </body>
    152.  
    153. </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 myConfig3 = {
    2.   "graphset": [{
    3.       "type": "scatter",
    4.       "height": "50%",
    5.       "width": "50%",
    6.       "x": "0%",
    7.       "y": "0%",
    8.       "scale-x": {
    9.         "offset-start": 5,
    10.         "offset-end": 5,
    11.         "values": "0:10:1"
    12.       },
    13.       "scale-y": {
    14.         "offset-start": 5,
    15.         "offset-end": 5,
    16.         "values": "0:100:50"
    17.       },
    18.       "series": [{
    19.         "values": [
    20.           [0.9, 3],
    21.           [2.1, 13],
    22.           [3.5, 25],
    23.           [4.9, 35],
    24.           [5.3, 41],
    25.           [6.5, 57],
    26.           [7.1, 61],
    27.           [8.7, 70],
    28.           [9.2, 82],
    29.           [9.9, 95]
    30.         ]
    31.       }]
    32.     },
    33.     {
    34.       "type": "scatter",
    35.       "height": "50%",
    36.       "width": "50%",
    37.       "x": "50%",
    38.       "y": "0%",
    39.       "scale-x": {
    40.         "offset-start": 5,
    41.         "offset-end": 5,
    42.         "values": "0:10:1"
    43.       },
    44.       "scale-y": {
    45.         "offset-start": 5,
    46.         "offset-end": 5,
    47.         "values": "0:100:50"
    48.       },
    49.       "series": [{
    50.         "values": [
    51.           [0.1, 9],
    52.           [1.8, 21],
    53.           [1.9, 29],
    54.           [4.1, 33],
    55.           [4.5, 39],
    56.           [6.9, 51],
    57.           [7.4, 64],
    58.           [8.9, 70],
    59.           [9, 75],
    60.           [9.3, 93]
    61.         ]
    62.       }]
    63.     },
    64.     {
    65.       "type": "scatter",
    66.       "height": "50%",
    67.       "width": "50%",
    68.       "x": "0%",
    69.       "y": "50%",
    70.       "scale-x": {
    71.         "offset-start": 5,
    72.         "offset-end": 5,
    73.         "values": "0:10:1"
    74.       },
    75.       "scale-y": {
    76.         "offset-start": 5,
    77.         "offset-end": 5,
    78.         "values": "0:100:50"
    79.       },
    80.       "series": [{
    81.         "values": [
    82.           [0.3, 11],
    83.           [0.9, 15],
    84.           [1.1, 24],
    85.           [2.3, 29],
    86.           [2.9, 30],
    87.           [3.3, 35],
    88.           [5.6, 67],
    89.           [6.9, 70],
    90.           [7.3, 71],
    91.           [8.9, 90]
    92.         ]
    93.       }]
    94.     },
    95.     {
    96.       "type": "scatter",
    97.       "height": "50%",
    98.       "width": "50%",
    99.       "x": "50%",
    100.       "y": "50%",
    101.       "scale-x": {
    102.         "offset-start": 5,
    103.         "offset-end": 5,
    104.         "values": "0:10:1"
    105.       },
    106.       "scale-y": {
    107.         "offset-start": 5,
    108.         "offset-end": 5,
    109.         "values": "0:100:50"
    110.       },
    111.       "series": [{
    112.         "values": [
    113.           [0.5, 5],
    114.           [1.9, 5],
    115.           [2.5, 10],
    116.           [3.1, 30],
    117.           [6.5, 45],
    118.           [6.9, 74],
    119.           [7.2, 50],
    120.           [7.8, 56],
    121.           [8, 61],
    122.           [8.5, 71]
    123.         ]
    124.       }]
    125.     }
    126.   ]
    127. };
    128.  
    129. zingchart.render({
    130.   id: 'myChart',
    131.   data: myConfig3,
    132.   height: 400,
    133.   width: "100%"
    134. });