• Edit
  • Download
    1. <!DOCTYPE html>
    2. <html>
    3.  
    4. <head>
    5.   <meta charset="utf-8">
    6.   <title>ZingSoft Demo</title>
    7.   <script nonce="undefined" src="https://cdn.zingchart.com/zingchart.min.js"></script>
    8.   <style>
    9.     html,
    10.     body,
    11.     #myChart {
    12.       height: 800px;
    13.       width: 1000px;
    14.     }
    15.   </style>
    16. </head>
    17.  
    18. <body>
    19.   <button id="markers">Cycle markers</button>
    20.   <div id='myChart'></div>
    21.   <script>
    22.     ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"];
    23.     var zcRef = document.getElementById('myChart');
    24.     var cycleButton = document.getElementById('markers');
    25.  
    26.     var myConfig4 = {
    27.       "graphset": [{
    28.         "type": "bubble",
    29.         "series": [{
    30.             "values": [
    31.               [1, 9, 59],
    32.               [2, 15, 15],
    33.               [3, 21, 30],
    34.               [4, 30, 5],
    35.               [5, 40, 35],
    36.               [6, 59, 21],
    37.               [7, 60, 25],
    38.               [8, 75, 85],
    39.               [9, 81, 87],
    40.               [10, 99, 12]
    41.             ]
    42.           },
    43.           {
    44.             "values": [
    45.               [0.9, 3, 18],
    46.               [2.1, 13, 21],
    47.               [3.5, 25, 33],
    48.               [4.9, 35, 54],
    49.               [5.3, 41, 59],
    50.               [6.5, 57, 34],
    51.               [7.1, 61, 17],
    52.               [8.7, 70, 3],
    53.               [9.2, 82, 28],
    54.               [9.9, 95, 76]
    55.             ]
    56.           },
    57.           {
    58.             "values": [
    59.               [0.1, 9, 3],
    60.               [1.8, 21, 60],
    61.               [1.9, 29, 9],
    62.               [4.1, 33, 9],
    63.               [4.5, 39, 4],
    64.               [6.9, 51, 3],
    65.               [7.4, 64, 11],
    66.               [8.9, 70, 12],
    67.               [9, 75, 3],
    68.               [9.3, 93, 29]
    69.             ]
    70.           },
    71.           {
    72.             "values": [
    73.               [0.3, 11, 11],
    74.               [0.9, 15, 21],
    75.               [1.1, 24, 54],
    76.               [2.3, 29, 6],
    77.               [2.9, 30, 9],
    78.               [3.3, 35, 59],
    79.               [5.6, 67, 30],
    80.               [6.9, 70, 14],
    81.               [7.3, 71, 7],
    82.               [8.9, 90, 9]
    83.             ]
    84.           },
    85.           {
    86.             "values": [
    87.               [0.5, 5, 8],
    88.               [1.9, 5, 3],
    89.               [2.5, 10, 2],
    90.               [3.1, 30, 8],
    91.               [6.5, 45, 87],
    92.               [6.9, 74, 1],
    93.               [7.2, 50, 7],
    94.               [7.8, 56, 20],
    95.               [8, 61, 3],
    96.               [8.5, 71, 4]
    97.             ]
    98.           }
    99.         ]
    100.       }]
    101.     };
    102.  
    103.     zingchart.render({
    104.       id: 'myChart',
    105.       data: myConfig4,
    106.       height: "100%",
    107.       width: "100%"
    108.     });
    109.     var currentMarker = 0;
    110.     cycleButton.addEventListener('click', function() {
    111.       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"];
    112.       if (currentMarker >= markers.length) {
    113.         currentMarker = 0;
    114.       }
    115.       zingchart.exec('myChart', 'modify', {
    116.         "data": {
    117.           "plot": {
    118.             "marker": {
    119.               "type": markers[currentMarker]
    120.             }
    121.           },
    122.           "labels": [{
    123.             "text": "<span style='font-weight:bold;'>Current Marker: </span>" + markers[currentMarker],
    124.             "x": "5%",
    125.             "y": "8%"
    126.           }]
    127.         }
    128.       });
    129.       currentMarker++;
    130.     });
    131.   </script>
    132. </body>
    133.  
    134. </html>
    1. <!DOCTYPE html>
    2. <html>
    3.  
    4. <head>
    5.   <meta charset="utf-8">
    6.   <title>ZingSoft Demo</title>
    7.   <script src="https://cdn.zingchart.com/zingchart.min.js"></script>
    8. </head>
    9.  
    10. <body>
    11.   <button id="markers">Cycle markers</button>
    12.   <div id='myChart'></div>
    13. </body>
    14.  
    15. </html>
    1. html,
    2. body,
    3. #myChart {
    4.   height: 800px;
    5.   width: 1000px;
    6. }
    1. var zcRef = document.getElementById('myChart');
    2. var cycleButton = document.getElementById('markers');
    3.  
    4. var myConfig4 = {
    5.   "graphset": [{
    6.     "type": "bubble",
    7.     "series": [{
    8.         "values": [
    9.           [1, 9, 59],
    10.           [2, 15, 15],
    11.           [3, 21, 30],
    12.           [4, 30, 5],
    13.           [5, 40, 35],
    14.           [6, 59, 21],
    15.           [7, 60, 25],
    16.           [8, 75, 85],
    17.           [9, 81, 87],
    18.           [10, 99, 12]
    19.         ]
    20.       },
    21.       {
    22.         "values": [
    23.           [0.9, 3, 18],
    24.           [2.1, 13, 21],
    25.           [3.5, 25, 33],
    26.           [4.9, 35, 54],
    27.           [5.3, 41, 59],
    28.           [6.5, 57, 34],
    29.           [7.1, 61, 17],
    30.           [8.7, 70, 3],
    31.           [9.2, 82, 28],
    32.           [9.9, 95, 76]
    33.         ]
    34.       },
    35.       {
    36.         "values": [
    37.           [0.1, 9, 3],
    38.           [1.8, 21, 60],
    39.           [1.9, 29, 9],
    40.           [4.1, 33, 9],
    41.           [4.5, 39, 4],
    42.           [6.9, 51, 3],
    43.           [7.4, 64, 11],
    44.           [8.9, 70, 12],
    45.           [9, 75, 3],
    46.           [9.3, 93, 29]
    47.         ]
    48.       },
    49.       {
    50.         "values": [
    51.           [0.3, 11, 11],
    52.           [0.9, 15, 21],
    53.           [1.1, 24, 54],
    54.           [2.3, 29, 6],
    55.           [2.9, 30, 9],
    56.           [3.3, 35, 59],
    57.           [5.6, 67, 30],
    58.           [6.9, 70, 14],
    59.           [7.3, 71, 7],
    60.           [8.9, 90, 9]
    61.         ]
    62.       },
    63.       {
    64.         "values": [
    65.           [0.5, 5, 8],
    66.           [1.9, 5, 3],
    67.           [2.5, 10, 2],
    68.           [3.1, 30, 8],
    69.           [6.5, 45, 87],
    70.           [6.9, 74, 1],
    71.           [7.2, 50, 7],
    72.           [7.8, 56, 20],
    73.           [8, 61, 3],
    74.           [8.5, 71, 4]
    75.         ]
    76.       }
    77.     ]
    78.   }]
    79. };
    80.  
    81. zingchart.render({
    82.   id: 'myChart',
    83.   data: myConfig4,
    84.   height: "100%",
    85.   width: "100%"
    86. });
    87. var currentMarker = 0;
    88. cycleButton.addEventListener('click', function() {
    89.   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"];
    90.   if (currentMarker >= markers.length) {
    91.     currentMarker = 0;
    92.   }
    93.   zingchart.exec('myChart', 'modify', {
    94.     "data": {
    95.       "plot": {
    96.         "marker": {
    97.           "type": markers[currentMarker]
    98.         }
    99.       },
    100.       "labels": [{
    101.         "text": "<span style='font-weight:bold;'>Current Marker: </span>" + markers[currentMarker],
    102.         "x": "5%",
    103.         "y": "8%"
    104.       }]
    105.     }
    106.   });
    107.   currentMarker++;
    108. });