• 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>
    10.     html,
    11.     body,
    12.     #myChart {
    13.       height: 100%;
    14.       width: 100%;
    15.     }
    16.   </style>
    17. </head>
    18.  
    19. <body>
    20.   <div id='myChart'></div>
    21.   <script>
    22.     ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"];
    23.     var ogMarkerSelected = false;
    24.     var ogMarkerId = 'draggableMarker';
    25.  
    26.     var myConfig = {
    27.       type: "mixed",
    28.       title: {
    29.         text: "Click and Drag Marker"
    30.       },
    31.       scaleY: {
    32.         markers: [{
    33.           type: 'line',
    34.           lineWidth: 25,
    35.           lineColor: '#FFAB40',
    36.           range: [55]
    37.         }]
    38.       },
    39.       series: [{
    40.         type: 'scatter',
    41.         values: [35, 42, 67, 89, 25, 34, 67, 85]
    42.       }]
    43.     };
    44.  
    45.     zingchart.render({
    46.       id: 'myChart',
    47.       data: myConfig,
    48.       height: '100%',
    49.       width: '100%'
    50.     });
    51.  
    52.     /**
    53.      * Event listener for 'mousedown'. Get xyinfo from graph.
    54.      * Currently, scale.markers are shapes but they live in 
    55.      * a different svg group than other shapes so the events
    56.      * system does not work the same for them. This is so 
    57.      * we can layer and place them appropriately. So for this
    58.      * we must conduct a solution to create our own shape_mousedown
    59.      * event.
    60.      * 
    61.      * Once we register scale.marker_mousedown we can continue to draw it
    62.      */
    63.     zingchart.bind('myChart', 'mousedown', function(e) {
    64.       // hide the image map so we can grab the scale marker
    65.       var img = document.getElementById('myChart-img');
    66.       img.style.display = 'none';
    67.  
    68.       // this will now grab the scale marker
    69.       var target = document.elementFromPoint(e.x, e.y);
    70.  
    71.       // re display the image map
    72.       img.style.display = 'initial';
    73.  
    74.       // check to see
    75.       if (isScaleMarker(target.id)) {
    76.         ogMarkerSelected = true;
    77.         img.style.cursor = 'row-resize';
    78.       } else {
    79.         ogMarkerSelected = false;
    80.       }
    81.     });
    82.  
    83.     zingchart.bind('myChart', 'mousemove', function(e) {
    84.       if (ogMarkerSelected) {
    85.  
    86.         // Returns array of 3 * n plots
    87.         // index 0 is scale-x info
    88.         // index 1 is scale-y info
    89.         // index 2 is node/plot info
    90.         var ogXYInfo = zingchart.exec('myChart', 'getxyinfo', {
    91.           x: e.x,
    92.           y: e.y
    93.         });
    94.  
    95.         // Set new series values in graph
    96.         zingchart.exec('myChart', 'modify', {
    97.           data: {
    98.             'scale-y': {
    99.               markers: [{
    100.                 type: 'line',
    101.                 id: ogMarkerId,
    102.                 lineWidth: 25,
    103.                 lineColor: '#FFAB40',
    104.                 range: [ogXYInfo[1].scalevalue],
    105.                 pairScale: 'x'
    106.               }]
    107.             }
    108.           }
    109.         });
    110.       }
    111.     });
    112.  
    113.     /**
    114.      * Event listener for 'mouseup'. Get xyinfo from graph
    115.      */
    116.     zingchart.bind('myChart', 'mouseup', function(e) {
    117.       var img = document.getElementById('myChart-img');
    118.       img.style.cursor = 'default';
    119.       ogMarkerSelected = false;
    120.     });
    121.  
    122.     /*
    123.      * Will parse the svg path id which will look something like:
    124.      * myChart-graph-id0-scale-y-marker-0-path
    125.      *
    126.      * It will return true if we are targeting a scale marker
    127.      */
    128.     function isScaleMarker(targetId) {
    129.       var targetPath = targetId.split('-');
    130.       var bIsScaleMarker = false;
    131.  
    132.       for (var i = 0; i < targetPath.length; i++) {
    133.         if (targetPath[i] === 'marker')
    134.           bIsScaleMarker = true;
    135.       }
    136.  
    137.       return bIsScaleMarker;
    138.  
    139.     }
    140.   </script>
    141. </body>
    142.  
    143. </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. html,
    2. body,
    3. #myChart {
    4.   height: 100%;
    5.   width: 100%;
    6. }
    1. var ogMarkerSelected = false;
    2. var ogMarkerId = 'draggableMarker';
    3.  
    4. var myConfig = {
    5.   type: "mixed",
    6.   title: {
    7.     text: "Click and Drag Marker"
    8.   },
    9.   scaleY: {
    10.     markers: [{
    11.       type: 'line',
    12.       lineWidth: 25,
    13.       lineColor: '#FFAB40',
    14.       range: [55]
    15.     }]
    16.   },
    17.   series: [{
    18.     type: 'scatter',
    19.     values: [35, 42, 67, 89, 25, 34, 67, 85]
    20.   }]
    21. };
    22.  
    23. zingchart.render({
    24.   id: 'myChart',
    25.   data: myConfig,
    26.   height: '100%',
    27.   width: '100%'
    28. });
    29.  
    30. /**
    31.  * Event listener for 'mousedown'. Get xyinfo from graph.
    32.  * Currently, scale.markers are shapes but they live in 
    33.  * a different svg group than other shapes so the events
    34.  * system does not work the same for them. This is so 
    35.  * we can layer and place them appropriately. So for this
    36.  * we must conduct a solution to create our own shape_mousedown
    37.  * event.
    38.  * 
    39.  * Once we register scale.marker_mousedown we can continue to draw it
    40.  */
    41. zingchart.bind('myChart', 'mousedown', function(e) {
    42.   // hide the image map so we can grab the scale marker
    43.   var img = document.getElementById('myChart-img');
    44.   img.style.display = 'none';
    45.  
    46.   // this will now grab the scale marker
    47.   var target = document.elementFromPoint(e.x, e.y);
    48.  
    49.   // re display the image map
    50.   img.style.display = 'initial';
    51.  
    52.   // check to see
    53.   if (isScaleMarker(target.id)) {
    54.     ogMarkerSelected = true;
    55.     img.style.cursor = 'row-resize';
    56.   } else {
    57.     ogMarkerSelected = false;
    58.   }
    59. });
    60.  
    61. zingchart.bind('myChart', 'mousemove', function(e) {
    62.   if (ogMarkerSelected) {
    63.  
    64.     // Returns array of 3 * n plots
    65.     // index 0 is scale-x info
    66.     // index 1 is scale-y info
    67.     // index 2 is node/plot info
    68.     var ogXYInfo = zingchart.exec('myChart', 'getxyinfo', {
    69.       x: e.x,
    70.       y: e.y
    71.     });
    72.  
    73.     // Set new series values in graph
    74.     zingchart.exec('myChart', 'modify', {
    75.       data: {
    76.         'scale-y': {
    77.           markers: [{
    78.             type: 'line',
    79.             id: ogMarkerId,
    80.             lineWidth: 25,
    81.             lineColor: '#FFAB40',
    82.             range: [ogXYInfo[1].scalevalue],
    83.             pairScale: 'x'
    84.           }]
    85.         }
    86.       }
    87.     });
    88.   }
    89. });
    90.  
    91. /**
    92.  * Event listener for 'mouseup'. Get xyinfo from graph
    93.  */
    94. zingchart.bind('myChart', 'mouseup', function(e) {
    95.   var img = document.getElementById('myChart-img');
    96.   img.style.cursor = 'default';
    97.   ogMarkerSelected = false;
    98. });
    99.  
    100. /*
    101.  * Will parse the svg path id which will look something like:
    102.  * myChart-graph-id0-scale-y-marker-0-path
    103.  *
    104.  * It will return true if we are targeting a scale marker
    105.  */
    106. function isScaleMarker(targetId) {
    107.   var targetPath = targetId.split('-');
    108.   var bIsScaleMarker = false;
    109.  
    110.   for (var i = 0; i < targetPath.length; i++) {
    111.     if (targetPath[i] === 'marker')
    112.       bIsScaleMarker = true;
    113.   }
    114.  
    115.   return bIsScaleMarker;
    116.  
    117. }