• 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 myConfig4 = {
    18.       "type": "scatter",
    19.       plot: {
    20.         marker: {
    21.           borderColor: "#333"
    22.         }
    23.       },
    24.       "series": [{
    25.           "values": [
    26.             [1, 9],
    27.             [2, 15],
    28.             [3, 21],
    29.             [4, 30],
    30.             [5, 40],
    31.             [6, 59],
    32.             [7, 60],
    33.             [8, 75],
    34.             [9, 81],
    35.             [10, 99]
    36.           ]
    37.         },
    38.         {
    39.           "values": [
    40.             [0.9, 3],
    41.             [2.1, 13],
    42.             [3.5, 25],
    43.             [4.9, 35],
    44.             [5.3, 41],
    45.             [6.5, 57],
    46.             [7.1, 61],
    47.             [8.7, 70],
    48.             [9.2, 82],
    49.             [9.9, 95]
    50.           ]
    51.         },
    52.         {
    53.           "values": [
    54.             [0.1, 9],
    55.             [1.8, 21],
    56.             [1.9, 29],
    57.             [4.1, 33],
    58.             [4.5, 39],
    59.             [6.9, 51],
    60.             [7.4, 64],
    61.             [8.9, 70],
    62.             [9, 75],
    63.             [9.3, 93]
    64.           ]
    65.         },
    66.         {
    67.           "values": [
    68.             [0.3, 11],
    69.             [0.9, 15],
    70.             [1.1, 24],
    71.             [2.3, 29],
    72.             [2.9, 30],
    73.             [3.3, 35],
    74.             [5.6, 67],
    75.             [6.9, 70],
    76.             [7.3, 71],
    77.             [8.9, 90]
    78.           ]
    79.         },
    80.         {
    81.           "values": [
    82.             [0.5, 5],
    83.             [1.9, 5],
    84.             [2.5, 10],
    85.             [3.1, 30],
    86.             [6.5, 45],
    87.             [6.9, 74],
    88.             [7.2, 50],
    89.             [7.8, 56],
    90.             [8, 61],
    91.             [8.5, 71]
    92.           ]
    93.         }
    94.       ]
    95.     };
    96.  
    97.     zingchart.render({
    98.       id: 'myChart',
    99.       data: myConfig4,
    100.       height: 400,
    101.       width: "100%"
    102.     });
    103.  
    104.     var currentMarker = 0;
    105.  
    106.     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"];
    107.  
    108.     var updateMarkers = function() {
    109.       if (currentMarker >= markers.length) {
    110.         currentMarker = 0;
    111.       }
    112.  
    113.       console.log(markers[currentMarker]);
    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.  
    130.       currentMarker++;
    131.     };
    132.  
    133.     document.querySelector('#markers').addEventListener('click', updateMarkers);
    134.   </script>
    135. </body>
    136.  
    137. </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 myConfig4 = {
    2.   "type": "scatter",
    3.   plot: {
    4.     marker: {
    5.       borderColor: "#333"
    6.     }
    7.   },
    8.   "series": [{
    9.       "values": [
    10.         [1, 9],
    11.         [2, 15],
    12.         [3, 21],
    13.         [4, 30],
    14.         [5, 40],
    15.         [6, 59],
    16.         [7, 60],
    17.         [8, 75],
    18.         [9, 81],
    19.         [10, 99]
    20.       ]
    21.     },
    22.     {
    23.       "values": [
    24.         [0.9, 3],
    25.         [2.1, 13],
    26.         [3.5, 25],
    27.         [4.9, 35],
    28.         [5.3, 41],
    29.         [6.5, 57],
    30.         [7.1, 61],
    31.         [8.7, 70],
    32.         [9.2, 82],
    33.         [9.9, 95]
    34.       ]
    35.     },
    36.     {
    37.       "values": [
    38.         [0.1, 9],
    39.         [1.8, 21],
    40.         [1.9, 29],
    41.         [4.1, 33],
    42.         [4.5, 39],
    43.         [6.9, 51],
    44.         [7.4, 64],
    45.         [8.9, 70],
    46.         [9, 75],
    47.         [9.3, 93]
    48.       ]
    49.     },
    50.     {
    51.       "values": [
    52.         [0.3, 11],
    53.         [0.9, 15],
    54.         [1.1, 24],
    55.         [2.3, 29],
    56.         [2.9, 30],
    57.         [3.3, 35],
    58.         [5.6, 67],
    59.         [6.9, 70],
    60.         [7.3, 71],
    61.         [8.9, 90]
    62.       ]
    63.     },
    64.     {
    65.       "values": [
    66.         [0.5, 5],
    67.         [1.9, 5],
    68.         [2.5, 10],
    69.         [3.1, 30],
    70.         [6.5, 45],
    71.         [6.9, 74],
    72.         [7.2, 50],
    73.         [7.8, 56],
    74.         [8, 61],
    75.         [8.5, 71]
    76.       ]
    77.     }
    78.   ]
    79. };
    80.  
    81. zingchart.render({
    82.   id: 'myChart',
    83.   data: myConfig4,
    84.   height: 400,
    85.   width: "100%"
    86. });
    87.  
    88. var currentMarker = 0;
    89.  
    90. 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"];
    91.  
    92. var updateMarkers = function() {
    93.   if (currentMarker >= markers.length) {
    94.     currentMarker = 0;
    95.   }
    96.  
    97.   console.log(markers[currentMarker]);
    98.  
    99.   zingchart.exec('myChart', 'modify', {
    100.     data: {
    101.       plot: {
    102.         marker: {
    103.           type: markers[currentMarker]
    104.         }
    105.       },
    106.       labels: [{
    107.         text: "<span style='font-weight:bold;'>Current Marker: </span>" + markers[currentMarker],
    108.         x: "5%",
    109.         y: "8%"
    110.       }]
    111.     }
    112.   });
    113.  
    114.   currentMarker++;
    115. };
    116.  
    117. document.querySelector('#markers').addEventListener('click', updateMarkers);