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