• 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 myConfig13 = {
    17.       "type": "scatter",
    18.       "legend": {
    19.         "layout": "5x1",
    20.         "position": "97% 73%",
    21.         "item": {
    22.           "font-color": "brown",
    23.           "font-family": "Georgia"
    24.         },
    25.         "background-color": "white",
    26.         "alpha": 0.5,
    27.         "border-color": "none",
    28.         "shadow": false,
    29.         "marker": {
    30.           "type": "inherit",
    31.         },
    32.       },
    33.       "series": [{
    34.           "values": [
    35.             [1, 9],
    36.             [2, 15],
    37.             [3, 21],
    38.             [4, 30],
    39.             [5, 40],
    40.             [6, 59],
    41.             [7, 60],
    42.             [8, 75],
    43.             [9, 81],
    44.             [10, 99]
    45.           ],
    46.           "text": "Kale",
    47.           "marker": {
    48.             "type": "square"
    49.           }
    50.         },
    51.         {
    52.           "values": [
    53.             [0.9, 3],
    54.             [2.1, 13],
    55.             [3.5, 25],
    56.             [4.9, 35],
    57.             [5.3, 41],
    58.             [6.5, 57],
    59.             [7.1, 61],
    60.             [8.7, 70],
    61.             [9.2, 82],
    62.             [9.9, 95]
    63.           ],
    64.           "text": "Blueberries",
    65.           "marker": {
    66.             "type": "circle"
    67.           }
    68.         },
    69.         {
    70.           "values": [
    71.             [0.1, 9],
    72.             [1.8, 21],
    73.             [1.9, 29],
    74.             [4.1, 33],
    75.             [4.5, 39],
    76.             [6.9, 51],
    77.             [7.4, 64],
    78.             [8.9, 70],
    79.             [9, 75],
    80.             [9.3, 93]
    81.           ],
    82.           "text": "Tomatoes",
    83.           "marker": {
    84.             "type": "triangle"
    85.           }
    86.         },
    87.         {
    88.           "values": [
    89.             [0.3, 11],
    90.             [0.9, 15],
    91.             [1.1, 24],
    92.             [2.3, 29],
    93.             [2.9, 30],
    94.             [3.3, 35],
    95.             [5.6, 67],
    96.             [6.9, 70],
    97.             [7.3, 71],
    98.             [8.9, 90]
    99.           ],
    100.           "text": "Pineapples",
    101.           "marker": {
    102.             "type": "diamond"
    103.           }
    104.         },
    105.         {
    106.           "values": [
    107.             [0.5, 5],
    108.             [1.9, 5],
    109.             [2.5, 10],
    110.             [3.1, 30],
    111.             [6.5, 45],
    112.             [6.9, 74],
    113.             [7.2, 50],
    114.             [7.8, 56],
    115.             [8, 61],
    116.             [8.5, 71]
    117.           ],
    118.           "text": "Mushrooms",
    119.           "marker": {
    120.             "type": "gear5"
    121.           }
    122.         },
    123.       ]
    124.     };
    125.  
    126.     zingchart.render({
    127.       id: 'myChart',
    128.       data: myConfig13,
    129.       height: 400,
    130.       width: "100%"
    131.     });
    132.   </script>
    133. </body>
    134.  
    135. </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 myConfig13 = {
    2.   "type": "scatter",
    3.   "legend": {
    4.     "layout": "5x1",
    5.     "position": "97% 73%",
    6.     "item": {
    7.       "font-color": "brown",
    8.       "font-family": "Georgia"
    9.     },
    10.     "background-color": "white",
    11.     "alpha": 0.5,
    12.     "border-color": "none",
    13.     "shadow": false,
    14.     "marker": {
    15.       "type": "inherit",
    16.     },
    17.   },
    18.   "series": [{
    19.       "values": [
    20.         [1, 9],
    21.         [2, 15],
    22.         [3, 21],
    23.         [4, 30],
    24.         [5, 40],
    25.         [6, 59],
    26.         [7, 60],
    27.         [8, 75],
    28.         [9, 81],
    29.         [10, 99]
    30.       ],
    31.       "text": "Kale",
    32.       "marker": {
    33.         "type": "square"
    34.       }
    35.     },
    36.     {
    37.       "values": [
    38.         [0.9, 3],
    39.         [2.1, 13],
    40.         [3.5, 25],
    41.         [4.9, 35],
    42.         [5.3, 41],
    43.         [6.5, 57],
    44.         [7.1, 61],
    45.         [8.7, 70],
    46.         [9.2, 82],
    47.         [9.9, 95]
    48.       ],
    49.       "text": "Blueberries",
    50.       "marker": {
    51.         "type": "circle"
    52.       }
    53.     },
    54.     {
    55.       "values": [
    56.         [0.1, 9],
    57.         [1.8, 21],
    58.         [1.9, 29],
    59.         [4.1, 33],
    60.         [4.5, 39],
    61.         [6.9, 51],
    62.         [7.4, 64],
    63.         [8.9, 70],
    64.         [9, 75],
    65.         [9.3, 93]
    66.       ],
    67.       "text": "Tomatoes",
    68.       "marker": {
    69.         "type": "triangle"
    70.       }
    71.     },
    72.     {
    73.       "values": [
    74.         [0.3, 11],
    75.         [0.9, 15],
    76.         [1.1, 24],
    77.         [2.3, 29],
    78.         [2.9, 30],
    79.         [3.3, 35],
    80.         [5.6, 67],
    81.         [6.9, 70],
    82.         [7.3, 71],
    83.         [8.9, 90]
    84.       ],
    85.       "text": "Pineapples",
    86.       "marker": {
    87.         "type": "diamond"
    88.       }
    89.     },
    90.     {
    91.       "values": [
    92.         [0.5, 5],
    93.         [1.9, 5],
    94.         [2.5, 10],
    95.         [3.1, 30],
    96.         [6.5, 45],
    97.         [6.9, 74],
    98.         [7.2, 50],
    99.         [7.8, 56],
    100.         [8, 61],
    101.         [8.5, 71]
    102.       ],
    103.       "text": "Mushrooms",
    104.       "marker": {
    105.         "type": "gear5"
    106.       }
    107.     },
    108.   ]
    109. };
    110.  
    111. zingchart.render({
    112.   id: 'myChart',
    113.   data: myConfig13,
    114.   height: 400,
    115.   width: "100%"
    116. });