• 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 myConfig10 = {
    17.       "type": "scatter",
    18.       "plot": {
    19.         "marker": { //Apply marker styling globally.
    20.           "background-color": "#00FFFF",
    21.           "size": 7,
    22.           "border-color": "#009999",
    23.           "border-width": 2,
    24.           "line-color": "#009999",
    25.           "line-width": 2,
    26.         }
    27.       },
    28.       "series": [{
    29.           "values": [
    30.             [1, 9],
    31.             [2, 15],
    32.             [3, 21],
    33.             [4, 30],
    34.             [5, 40],
    35.             [6, 59],
    36.             [7, 60],
    37.             [8, 75],
    38.             [9, 81],
    39.             [10, 99]
    40.           ],
    41.           "marker": { //Apply marker styling locally.
    42.             "type": "diamond",
    43.             "background-color": "#FF0066",
    44.             /* hexadecimal or RGB value */
    45.             "size": 15,
    46.             /* in pixels */
    47.             "border-color": "#FFFF66",
    48.             /* hexadecimal or RBG value */
    49.             "border-width": 3 /* in pixels */
    50.           }
    51.         },
    52.         {
    53.           "values": [
    54.             [0.9, 3],
    55.             [2.1, 13],
    56.             [3.5, 25],
    57.             [4.9, 35],
    58.             [5.3, 41],
    59.             [6.5, 57],
    60.             [7.1, 61],
    61.             [8.7, 70],
    62.             [9.2, 82],
    63.             [9.9, 95]
    64.           ],
    65.           "marker": {
    66.             "type": "trapezoid"
    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.           "marker": {
    83.             "type": "cross"
    84.           }
    85.         },
    86.         {
    87.           "values": [
    88.             [0.3, 11],
    89.             [0.9, 15],
    90.             [1.1, 24],
    91.             [2.3, 29],
    92.             [2.9, 30],
    93.             [3.3, 35],
    94.             [5.6, 67],
    95.             [6.9, 70],
    96.             [7.3, 71],
    97.             [8.9, 90]
    98.           ],
    99.           "marker": {
    100.             "type": "star3"
    101.           }
    102.         },
    103.         {
    104.           "values": [
    105.             [0.5, 5],
    106.             [1.9, 5],
    107.             [2.5, 10],
    108.             [3.1, 30],
    109.             [6.5, 45],
    110.             [6.9, 74],
    111.             [7.2, 50],
    112.             [7.8, 56],
    113.             [8, 61],
    114.             [8.5, 71]
    115.           ],
    116.           "marker": {
    117.             "type": "gear5"
    118.           }
    119.         },
    120.       ]
    121.     };
    122.     zingchart.render({
    123.       id: 'myChart',
    124.       data: myConfig10,
    125.       height: 400,
    126.       width: "100%"
    127.     });
    128.   </script>
    129. </body>
    130.  
    131. </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 myConfig10 = {
    2.   "type": "scatter",
    3.   "plot": {
    4.     "marker": { //Apply marker styling globally.
    5.       "background-color": "#00FFFF",
    6.       "size": 7,
    7.       "border-color": "#009999",
    8.       "border-width": 2,
    9.       "line-color": "#009999",
    10.       "line-width": 2,
    11.     }
    12.   },
    13.   "series": [{
    14.       "values": [
    15.         [1, 9],
    16.         [2, 15],
    17.         [3, 21],
    18.         [4, 30],
    19.         [5, 40],
    20.         [6, 59],
    21.         [7, 60],
    22.         [8, 75],
    23.         [9, 81],
    24.         [10, 99]
    25.       ],
    26.       "marker": { //Apply marker styling locally.
    27.         "type": "diamond",
    28.         "background-color": "#FF0066",
    29.         /* hexadecimal or RGB value */
    30.         "size": 15,
    31.         /* in pixels */
    32.         "border-color": "#FFFF66",
    33.         /* hexadecimal or RBG value */
    34.         "border-width": 3 /* in pixels */
    35.       }
    36.     },
    37.     {
    38.       "values": [
    39.         [0.9, 3],
    40.         [2.1, 13],
    41.         [3.5, 25],
    42.         [4.9, 35],
    43.         [5.3, 41],
    44.         [6.5, 57],
    45.         [7.1, 61],
    46.         [8.7, 70],
    47.         [9.2, 82],
    48.         [9.9, 95]
    49.       ],
    50.       "marker": {
    51.         "type": "trapezoid"
    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.       "marker": {
    68.         "type": "cross"
    69.       }
    70.     },
    71.     {
    72.       "values": [
    73.         [0.3, 11],
    74.         [0.9, 15],
    75.         [1.1, 24],
    76.         [2.3, 29],
    77.         [2.9, 30],
    78.         [3.3, 35],
    79.         [5.6, 67],
    80.         [6.9, 70],
    81.         [7.3, 71],
    82.         [8.9, 90]
    83.       ],
    84.       "marker": {
    85.         "type": "star3"
    86.       }
    87.     },
    88.     {
    89.       "values": [
    90.         [0.5, 5],
    91.         [1.9, 5],
    92.         [2.5, 10],
    93.         [3.1, 30],
    94.         [6.5, 45],
    95.         [6.9, 74],
    96.         [7.2, 50],
    97.         [7.8, 56],
    98.         [8, 61],
    99.         [8.5, 71]
    100.       ],
    101.       "marker": {
    102.         "type": "gear5"
    103.       }
    104.     },
    105.   ]
    106. };
    107. zingchart.render({
    108.   id: 'myChart',
    109.   data: myConfig10,
    110.   height: 400,
    111.   width: "100%"
    112. });