• 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.  
    17.     #mask {
    18.       position: absolute;
    19.       top: 0;
    20.       bottom: 0;
    21.       left: 0;
    22.       right: 0;
    23.       background-color: #FFF;
    24.       z-index: 500;
    25.       opacity: .5;
    26.       visibility: hidden;
    27.     }
    28.  
    29.     form {
    30.       background-color: #E0E0E0;
    31.       height: 50px;
    32.       width: 300px;
    33.       position: fixed;
    34.       top: calc(50% - 25px);
    35.       left: calc(50% - 150px);
    36.       z-index: 1000;
    37.       padding: 10px;
    38.       border-radius: 5px;
    39.       opacity: 1;
    40.       visibility: hidden;
    41.     }
    42.   </style>
    43. </head>
    44.  
    45. <body>
    46.   <div id="mask"></div>
    47.  
    48.   <form>
    49.     <label>Marker text:</label>
    50.     <input type="text" id="marker-text">
    51.     <hr>
    52.     <button onclick="return drawMarker();">Submit</button>
    53.   </form>
    54.  
    55.   <div id='myChart'></div>
    56.   <script>
    57.     ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"];
    58.     var myConfig = {
    59.       type: "line",
    60.       title: {
    61.         text: 'Click on scale text (items)'
    62.       },
    63.       plot: {
    64.         tooltip: {
    65.           visible: false
    66.         }
    67.       },
    68.       crosshairX: {},
    69.       "scale-x": {
    70.         markers: [],
    71.         labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
    72.         item: {
    73.           flat: false,
    74.           cursor: 'hand'
    75.         },
    76.         label: {
    77.           text: "Click scale text numbers"
    78.         }
    79.       },
    80.       "scale-y": {
    81.         markers: [],
    82.         item: {
    83.           flat: false,
    84.           cursor: 'hand'
    85.         }
    86.       },
    87.       series: [{
    88.           values: [35, 42, 67, 89, 25, 34, 67]
    89.         },
    90.         {
    91.           values: [35, 42, 67, 89, 25, 34, 67].sort()
    92.         }
    93.       ]
    94.     };
    95.  
    96.     zingchart.render({
    97.       id: 'myChart',
    98.       data: myConfig,
    99.       height: '100%',
    100.       width: '100%'
    101.     });
    102.  
    103.     function Marker(index) {
    104.       return {
    105.         type: 'line',
    106.         lineColor: '#8BC34A',
    107.         lineWidth: 2,
    108.         range: [index],
    109.         label: {
    110.           text: "Default text",
    111.           angle: 0
    112.         }
    113.       }
    114.     }
    115.  
    116.     var activeMarkers = {};
    117.     var activeMarkerInfo = {
    118.       windowIsActive: false,
    119.       marker: null,
    120.       scale: null,
    121.       index: null
    122.     };
    123.     activeMarkers['scale-x'] = [];
    124.     activeMarkers['scale-y'] = [];
    125.  
    126.     zingchart.label_click = function(e) {
    127.  
    128.       // If user trys to trick us by adjusting CSS put a light clientside validation
    129.       if (!activeMarkerInfo.windowIsActive) {
    130.         console.log(e)
    131.         var scale = e.scale;
    132.         var nodeIndex = scale == 'scale-x' ? e.label.index : e.text;
    133.         var newMarker = new Marker(nodeIndex);
    134.         activeMarkerInfo.marker = newMarker;
    135.         activeMarkerInfo.scale = e.scale;
    136.         activeMarkerInfo.index = nodeIndex;
    137.  
    138.         // check to see if that marker already exists. If it does set the modal text
    139.         if (activeMarkers[scale][nodeIndex] && activeMarkers[scale][nodeIndex].type) {
    140.           document.getElementById('marker-text').value = activeMarkers[scale][nodeIndex].label.text;
    141.         }
    142.  
    143.         document.getElementById('mask').style.visibility = 'visible';
    144.         document.querySelector('form').style.visibility = 'visible';
    145.         activeMarkerInfo.windowIsActive = true;
    146.         document.querySelector('form #marker-text').focus();
    147.       }
    148.     }
    149.  
    150.     window.drawMarker = function() {
    151.       var formElem = document.querySelector('form');
    152.       var scale = activeMarkerInfo.scale;
    153.       var nodeIndex = activeMarkerInfo.index;
    154.       var newMarker = activeMarkerInfo.marker;
    155.       var markerText = null;
    156.       markerText = formElem.querySelector('#marker-text').value;
    157.  
    158.       if (markerText === "") {
    159.         markerText = "Default Text"
    160.       }
    161.  
    162.       // update marker
    163.       newMarker.label.text = markerText;
    164.       activeMarkers[scale][nodeIndex] = newMarker;
    165.  
    166.       // update chart
    167.       myConfig[scale].markers = activeMarkers[scale];
    168.       zingchart.exec('myChart', 'setdata', {
    169.         data: myConfig
    170.       });
    171.  
    172.       // hide and clear elements
    173.       document.getElementById('mask').style.visibility = 'hidden';
    174.       formElem.querySelector('#marker-text').value = '';
    175.       formElem.style.visibility = 'hidden';
    176.       activeMarkerInfo.windowIsActive = false;
    177.  
    178.       // make sure form doesn't execute! 
    179.       return false;
    180.     };
    181.   </script>
    182. </body>
    183.  
    184. </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="mask"></div>
    13.  
    14.   <form>
    15.     <label>Marker text:</label>
    16.     <input type="text" id="marker-text">
    17.     <hr>
    18.     <button onclick="return drawMarker();">Submit</button>
    19.   </form>
    20.  
    21.   <div id='myChart'></div>
    22. </body>
    23.  
    24. </html>
    1. html,
    2. body,
    3. #myChart {
    4.   height: 100%;
    5.   width: 100%;
    6. }
    7.  
    8. #mask {
    9.   position: absolute;
    10.   top: 0;
    11.   bottom: 0;
    12.   left: 0;
    13.   right: 0;
    14.   background-color: #FFF;
    15.   z-index: 500;
    16.   opacity: .5;
    17.   visibility: hidden;
    18. }
    19.  
    20. form {
    21.   background-color: #E0E0E0;
    22.   height: 50px;
    23.   width: 300px;
    24.   position: fixed;
    25.   top: calc(50% - 25px);
    26.   left: calc(50% - 150px);
    27.   z-index: 1000;
    28.   padding: 10px;
    29.   border-radius: 5px;
    30.   opacity: 1;
    31.   visibility: hidden;
    32. }
    1. var myConfig = {
    2.   type: "line",
    3.   title: {
    4.     text: 'Click on scale text (items)'
    5.   },
    6.   plot: {
    7.     tooltip: {
    8.       visible: false
    9.     }
    10.   },
    11.   crosshairX: {},
    12.   "scale-x": {
    13.     markers: [],
    14.     labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
    15.     item: {
    16.       flat: false,
    17.       cursor: 'hand'
    18.     },
    19.     label: {
    20.       text: "Click scale text numbers"
    21.     }
    22.   },
    23.   "scale-y": {
    24.     markers: [],
    25.     item: {
    26.       flat: false,
    27.       cursor: 'hand'
    28.     }
    29.   },
    30.   series: [{
    31.       values: [35, 42, 67, 89, 25, 34, 67]
    32.     },
    33.     {
    34.       values: [35, 42, 67, 89, 25, 34, 67].sort()
    35.     }
    36.   ]
    37. };
    38.  
    39. zingchart.render({
    40.   id: 'myChart',
    41.   data: myConfig,
    42.   height: '100%',
    43.   width: '100%'
    44. });
    45.  
    46. function Marker(index) {
    47.   return {
    48.     type: 'line',
    49.     lineColor: '#8BC34A',
    50.     lineWidth: 2,
    51.     range: [index],
    52.     label: {
    53.       text: "Default text",
    54.       angle: 0
    55.     }
    56.   }
    57. }
    58.  
    59. var activeMarkers = {};
    60. var activeMarkerInfo = {
    61.   windowIsActive: false,
    62.   marker: null,
    63.   scale: null,
    64.   index: null
    65. };
    66. activeMarkers['scale-x'] = [];
    67. activeMarkers['scale-y'] = [];
    68.  
    69. zingchart.label_click = function(e) {
    70.  
    71.   // If user trys to trick us by adjusting CSS put a light clientside validation
    72.   if (!activeMarkerInfo.windowIsActive) {
    73.     console.log(e)
    74.     var scale = e.scale;
    75.     var nodeIndex = scale == 'scale-x' ? e.label.index : e.text;
    76.     var newMarker = new Marker(nodeIndex);
    77.     activeMarkerInfo.marker = newMarker;
    78.     activeMarkerInfo.scale = e.scale;
    79.     activeMarkerInfo.index = nodeIndex;
    80.  
    81.     // check to see if that marker already exists. If it does set the modal text
    82.     if (activeMarkers[scale][nodeIndex] && activeMarkers[scale][nodeIndex].type) {
    83.       document.getElementById('marker-text').value = activeMarkers[scale][nodeIndex].label.text;
    84.     }
    85.  
    86.     document.getElementById('mask').style.visibility = 'visible';
    87.     document.querySelector('form').style.visibility = 'visible';
    88.     activeMarkerInfo.windowIsActive = true;
    89.     document.querySelector('form #marker-text').focus();
    90.   }
    91. }
    92.  
    93. window.drawMarker = function() {
    94.   var formElem = document.querySelector('form');
    95.   var scale = activeMarkerInfo.scale;
    96.   var nodeIndex = activeMarkerInfo.index;
    97.   var newMarker = activeMarkerInfo.marker;
    98.   var markerText = null;
    99.   markerText = formElem.querySelector('#marker-text').value;
    100.  
    101.   if (markerText === "") {
    102.     markerText = "Default Text"
    103.   }
    104.  
    105.   // update marker
    106.   newMarker.label.text = markerText;
    107.   activeMarkers[scale][nodeIndex] = newMarker;
    108.  
    109.   // update chart
    110.   myConfig[scale].markers = activeMarkers[scale];
    111.   zingchart.exec('myChart', 'setdata', {
    112.     data: myConfig
    113.   });
    114.  
    115.   // hide and clear elements
    116.   document.getElementById('mask').style.visibility = 'hidden';
    117.   formElem.querySelector('#marker-text').value = '';
    118.   formElem.style.visibility = 'hidden';
    119.   activeMarkerInfo.windowIsActive = false;
    120.  
    121.   // make sure form doesn't execute! 
    122.   return false;
    123. };