• 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.   <button id="markers">Cycle markers</button>
    15.   <script>
    16.     ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"];
    17.     var myConfig = {
    18.       "type": "scatter",
    19.       "plot": {
    20.         "marker": {
    21.           "border-color": "inherit",
    22.           "height": 10,
    23.           "width": 20,
    24.           "size": 10
    25.         }
    26.       },
    27.       "series": [{
    28.           "values": [
    29.             [1, 9],
    30.             [2, 15],
    31.             [3, 21],
    32.             [4, 30],
    33.             [5, 40],
    34.             [6, 59],
    35.             [7, 60],
    36.             [8, 75],
    37.             [9, 81],
    38.             [10, 99]
    39.           ]
    40.         },
    41.         {
    42.           "values": [
    43.             [0.9, 3],
    44.             [2.1, 13],
    45.             [3.5, 25],
    46.             [4.9, 35],
    47.             [5.3, 41],
    48.             [6.5, 57],
    49.             [7.1, 61],
    50.             [8.7, 70],
    51.             [9.2, 82],
    52.             [9.9, 95]
    53.           ]
    54.         },
    55.         {
    56.           "values": [
    57.             [0.1, 9],
    58.             [1.8, 21],
    59.             [1.9, 29],
    60.             [4.1, 33],
    61.             [4.5, 39],
    62.             [6.9, 51],
    63.             [7.4, 64],
    64.             [8.9, 70],
    65.             [9, 75],
    66.             [9.3, 93]
    67.           ]
    68.         }
    69.       ]
    70.     };
    71.  
    72.     zingchart.render({
    73.       id: 'myChart',
    74.       data: myConfig,
    75.       height: 350,
    76.       width: "100%"
    77.     });
    78.  
    79.     var currentMarker = 0;
    80.  
    81.     document.getElementById('markers').addEventListener('click', function() {
    82.  
    83.       var markers = ["triangle", "square", "diamond", "circle", "trapezoid", "rectangle", "parallelogram", "plus", "cross", "star3", "star4", "star5", "star6", "star7", "star8", "star9", "rpoly3", "rpoly4", "rpoly5", "rpoly6", "rpoly7", "rpoly8", "rpoly9", "gear3", "gear4", "gear5", "gear6", "gear7", "gear8", "gear9", "ellipse"];
    84.  
    85.       if (currentMarker >= markers.length) {
    86.         currentMarker = 0;
    87.       }
    88.  
    89.       zingchart.exec('myChart', 'modify', {
    90.         "data": {
    91.           "plot": {
    92.             "marker": {
    93.               "type": markers[currentMarker]
    94.             }
    95.           },
    96.           "labels": [{
    97.             "text": "<span style='font-weight:bold;'>Current Marker: </span>" + markers[currentMarker],
    98.             "x": "8%",
    99.             "y": "5%"
    100.           }]
    101.         }
    102.       });
    103.       currentMarker++;
    104.     });
    105.   </script>
    106. </body>
    107.  
    108. </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.   <button id="markers">Cycle markers</button>
    14. </body>
    15.  
    16. </html>
    1.  
    1. var myConfig = {
    2.   "type": "scatter",
    3.   "plot": {
    4.     "marker": {
    5.       "border-color": "inherit",
    6.       "height": 10,
    7.       "width": 20,
    8.       "size": 10
    9.     }
    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.     },
    25.     {
    26.       "values": [
    27.         [0.9, 3],
    28.         [2.1, 13],
    29.         [3.5, 25],
    30.         [4.9, 35],
    31.         [5.3, 41],
    32.         [6.5, 57],
    33.         [7.1, 61],
    34.         [8.7, 70],
    35.         [9.2, 82],
    36.         [9.9, 95]
    37.       ]
    38.     },
    39.     {
    40.       "values": [
    41.         [0.1, 9],
    42.         [1.8, 21],
    43.         [1.9, 29],
    44.         [4.1, 33],
    45.         [4.5, 39],
    46.         [6.9, 51],
    47.         [7.4, 64],
    48.         [8.9, 70],
    49.         [9, 75],
    50.         [9.3, 93]
    51.       ]
    52.     }
    53.   ]
    54. };
    55.  
    56. zingchart.render({
    57.   id: 'myChart',
    58.   data: myConfig,
    59.   height: 350,
    60.   width: "100%"
    61. });
    62.  
    63. var currentMarker = 0;
    64.  
    65. document.getElementById('markers').addEventListener('click', function() {
    66.  
    67.   var markers = ["triangle", "square", "diamond", "circle", "trapezoid", "rectangle", "parallelogram", "plus", "cross", "star3", "star4", "star5", "star6", "star7", "star8", "star9", "rpoly3", "rpoly4", "rpoly5", "rpoly6", "rpoly7", "rpoly8", "rpoly9", "gear3", "gear4", "gear5", "gear6", "gear7", "gear8", "gear9", "ellipse"];
    68.  
    69.   if (currentMarker >= markers.length) {
    70.     currentMarker = 0;
    71.   }
    72.  
    73.   zingchart.exec('myChart', 'modify', {
    74.     "data": {
    75.       "plot": {
    76.         "marker": {
    77.           "type": markers[currentMarker]
    78.         }
    79.       },
    80.       "labels": [{
    81.         "text": "<span style='font-weight:bold;'>Current Marker: </span>" + markers[currentMarker],
    82.         "x": "8%",
    83.         "y": "5%"
    84.       }]
    85.     }
    86.   });
    87.   currentMarker++;
    88. });