• Edit
  • Download
    1. <!DOCTYPE html>
    2. <html>
    3.  
    4. <head>
    5.   <meta charset="utf-8">
    6.   <title>ZingSoft Demo</title>
    7.   <!-- bootstrap for grid -->
    8.   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css" integrity="sha384-AysaV+vQoT3kOAXZkl02PThvDr8HYKPZhNT5h/CXfBThSRXQ6jW5DO2ekP5ViFdi" crossorigin="anonymous">
    9.  
    10.   <script nonce="undefined" src="https://cdn.zingchart.com/2.6.1/zingchart.min.js"></script>
    11.   <style>
    12.     .chart {
    13.       width: 100%;
    14.       display: inline-block;
    15.       background-color: #F7F7F7;
    16.     }
    17.   </style>
    18. </head>
    19.  
    20. <body>
    21.   <div id="myChart" class="chart"></div>
    22.   <table id="dataTable" class="table">
    23.   </table>
    24.   <script>
    25.     var SCALEY = {
    26.       minValue: -2,
    27.       maxValue: 2,
    28.       step: 1,
    29.       guide: {
    30.         visible: false
    31.       },
    32.       lineColor: '#90CAF9',
    33.       lineWidth: 2,
    34.       refLine: {
    35.         lineColor: '#90CAF9',
    36.         lineWidth: 2
    37.       },
    38.       item: {
    39.         fontColor: '#90CAF9',
    40.         fontSize: 14
    41.       },
    42.       tick: {
    43.         lineColor: '#90CAF9'
    44.       }
    45.     };
    46.  
    47.     var myConfig = {
    48.       type: "scatter",
    49.       backgroundColor: '#F7F7F7',
    50.       title: {
    51.         text: 'Points Along A Sin Wave'
    52.       },
    53.       plot: {
    54.         selectionMode: "none", // turn off normal selection   
    55.         marker: {
    56.           borderWidth: 0
    57.         },
    58.         selectedMarker: {
    59.           size: 8,
    60.           borderWidth: 1,
    61.           borderColor: '#000',
    62.         },
    63.         hoverMarker: {
    64.           size: 7
    65.         },
    66.         tooltip: {
    67.           backgroundColor: '#FFF',
    68.           fontColor: '#000',
    69.           fontSize: 14,
    70.           borderRadius: 4,
    71.           borderWidth: 1,
    72.           borderColor: '#000',
    73.           text: '%t: %v'
    74.         }
    75.       },
    76.       plotarea: {
    77.         margin: 'dynamic'
    78.       },
    79.       scaleX: {
    80.         visible: false
    81.       },
    82.       scaleY: SCALEY,
    83.       selectionTool: {
    84.         mask: {
    85.           borderWidth: 2,
    86.           borderColor: "red",
    87.           backgroundColor: "yellow",
    88.           alpha: 0.5
    89.         }
    90.       },
    91.       series: [{
    92.           values: (function() {
    93.             var aV = [];
    94.             var len = 100;
    95.             var x = 0;
    96.             while (len--) {
    97.               x = (Math.random() * 10).toFixed(3) - 0;
    98.               aV.push([
    99.                 x,
    100.                 (Math.sin(x) - x * (len % 2 ? 0.1 : -0.1) * Math.random()).toFixed(3) - 0
    101.               ]);
    102.             }
    103.             return aV;
    104.           })(),
    105.           backgroundColor: '#F48FB1',
    106.           text: 'Sin Wave One',
    107.           marker: {
    108.             size: 5,
    109.             alpha: .85,
    110.             backgroundColor: '#F48FB1'
    111.           }
    112.         },
    113.         {
    114.           values: (function() {
    115.             var aV = [];
    116.             var len = 100;
    117.             var x = 0;
    118.             while (len--) {
    119.               x = (Math.random() * 10).toFixed(3) - 0;
    120.               aV.push([
    121.                 x,
    122.                 (Math.cos(x) - x * (len % 2 ? 0.1 : -0.1) * Math.random()).toFixed(3) - 0
    123.               ]);
    124.             }
    125.             return aV;
    126.           })(),
    127.           backgroundColor: '#F48FB1',
    128.           text: 'Sin Wave Two',
    129.           marker: {
    130.             size: 5,
    131.             alpha: .85,
    132.             backgroundColor: '#CE93D8'
    133.           }
    134.         }
    135.       ]
    136.     };
    137.  
    138.     /*
    139.      * example outline used from bootstrap grid example 1
    140.      * http://v4-alpha.getbootstrap.com/content/tables/
    141.      */
    142.     var TABLE_OUTLINE = "<thead><tr><th>#</th><th>Pink Dots</th><th>Purple Dots</th></tr></thead>";
    143.  
    144.     // api event
    145.     zingchart.bind('myChart', 'zingchart.plugins.selection-tool.selection', function(e) {
    146.       var dataTable = document.getElementById('dataTable');
    147.       var a = {};
    148.       var values1 = [];
    149.       var values2 = [];
    150.       var tableLength = 0;
    151.       var tableString = TABLE_OUTLINE + "<tbody>";
    152.       var tableRowString = "";
    153.       // Calculate Sum of selection into an array
    154.       for (var i = 0; i < e.nodes.length; i++) {
    155.         a = e.nodes[i];
    156.  
    157.         if (a.plotindex === 0)
    158.           values1.push(a.value);
    159.         else
    160.           values2.push(a.value);
    161.       }
    162.  
    163.       // make length of table the longer of values found
    164.       tableLength = values1.length > values2.length ? values1.length : values2.length;
    165.       for (var i = 0; i < tableLength; i++) {
    166.         tableRowString = "<tr><th scope=\"row\">" + (i + 1) + "</th>";
    167.  
    168.         if (values1[i])
    169.           tableRowString += "<td>" + values1[i] + "</td>";
    170.         else
    171.           tableRowString += "<td>&nbsp;</td>";
    172.  
    173.         if (values2[i])
    174.           tableRowString += "<td>" + values2[i] + "</td>";
    175.         else
    176.           tableRowString += "<td>&nbsp;</td>";
    177.  
    178.         // close row
    179.         tableRowString += "</tr>";
    180.  
    181.         // assign row to table
    182.         tableString += tableRowString;
    183.       }
    184.  
    185.       // close table and render
    186.       tableString += "</table>";
    187.       dataTable.innerHTML = tableString;
    188.  
    189.     });
    190.  
    191.     // Load the selection-tool and render the charts once its loaded
    192.     zingchart.loadModules('selection-tool', function() {
    193.       zingchart.render({
    194.         id: 'myChart',
    195.         data: myConfig,
    196.         height: 400,
    197.         width: '100%',
    198.         modules: 'selection-tool'
    199.       });
    200.     });
    201.   </script>
    202. </body>
    203.  
    204. </html>
    1. <!DOCTYPE html>
    2. <html>
    3.  
    4. <head>
    5.   <meta charset="utf-8">
    6.   <title>ZingSoft Demo</title>
    7.   <!-- bootstrap for grid -->
    8.   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css" integrity="sha384-AysaV+vQoT3kOAXZkl02PThvDr8HYKPZhNT5h/CXfBThSRXQ6jW5DO2ekP5ViFdi" crossorigin="anonymous">
    9.  
    10.   <script src="https://cdn.zingchart.com/2.6.1/zingchart.min.js"></script>
    11. </head>
    12.  
    13. <body>
    14.   <div id="myChart" class="chart"></div>
    15.   <table id="dataTable" class="table">
    16.   </table>
    17. </body>
    18.  
    19. </html>
    1. .chart {
    2.   width: 100%;
    3.   display: inline-block;
    4.   background-color: #F7F7F7;
    5. }
    1. var SCALEY = {
    2.   minValue: -2,
    3.   maxValue: 2,
    4.   step: 1,
    5.   guide: {
    6.     visible: false
    7.   },
    8.   lineColor: '#90CAF9',
    9.   lineWidth: 2,
    10.   refLine: {
    11.     lineColor: '#90CAF9',
    12.     lineWidth: 2
    13.   },
    14.   item: {
    15.     fontColor: '#90CAF9',
    16.     fontSize: 14
    17.   },
    18.   tick: {
    19.     lineColor: '#90CAF9'
    20.   }
    21. };
    22.  
    23. var myConfig = {
    24.   type: "scatter",
    25.   backgroundColor: '#F7F7F7',
    26.   title: {
    27.     text: 'Points Along A Sin Wave'
    28.   },
    29.   plot: {
    30.     selectionMode: "none", // turn off normal selection   
    31.     marker: {
    32.       borderWidth: 0
    33.     },
    34.     selectedMarker: {
    35.       size: 8,
    36.       borderWidth: 1,
    37.       borderColor: '#000',
    38.     },
    39.     hoverMarker: {
    40.       size: 7
    41.     },
    42.     tooltip: {
    43.       backgroundColor: '#FFF',
    44.       fontColor: '#000',
    45.       fontSize: 14,
    46.       borderRadius: 4,
    47.       borderWidth: 1,
    48.       borderColor: '#000',
    49.       text: '%t: %v'
    50.     }
    51.   },
    52.   plotarea: {
    53.     margin: 'dynamic'
    54.   },
    55.   scaleX: {
    56.     visible: false
    57.   },
    58.   scaleY: SCALEY,
    59.   selectionTool: {
    60.     mask: {
    61.       borderWidth: 2,
    62.       borderColor: "red",
    63.       backgroundColor: "yellow",
    64.       alpha: 0.5
    65.     }
    66.   },
    67.   series: [{
    68.       values: (function() {
    69.         var aV = [];
    70.         var len = 100;
    71.         var x = 0;
    72.         while (len--) {
    73.           x = (Math.random() * 10).toFixed(3) - 0;
    74.           aV.push([
    75.             x,
    76.             (Math.sin(x) - x * (len % 2 ? 0.1 : -0.1) * Math.random()).toFixed(3) - 0
    77.           ]);
    78.         }
    79.         return aV;
    80.       })(),
    81.       backgroundColor: '#F48FB1',
    82.       text: 'Sin Wave One',
    83.       marker: {
    84.         size: 5,
    85.         alpha: .85,
    86.         backgroundColor: '#F48FB1'
    87.       }
    88.     },
    89.     {
    90.       values: (function() {
    91.         var aV = [];
    92.         var len = 100;
    93.         var x = 0;
    94.         while (len--) {
    95.           x = (Math.random() * 10).toFixed(3) - 0;
    96.           aV.push([
    97.             x,
    98.             (Math.cos(x) - x * (len % 2 ? 0.1 : -0.1) * Math.random()).toFixed(3) - 0
    99.           ]);
    100.         }
    101.         return aV;
    102.       })(),
    103.       backgroundColor: '#F48FB1',
    104.       text: 'Sin Wave Two',
    105.       marker: {
    106.         size: 5,
    107.         alpha: .85,
    108.         backgroundColor: '#CE93D8'
    109.       }
    110.     }
    111.   ]
    112. };
    113.  
    114. /*
    115.  * example outline used from bootstrap grid example 1
    116.  * http://v4-alpha.getbootstrap.com/content/tables/
    117.  */
    118. var TABLE_OUTLINE = "<thead><tr><th>#</th><th>Pink Dots</th><th>Purple Dots</th></tr></thead>";
    119.  
    120. // api event
    121. zingchart.bind('myChart', 'zingchart.plugins.selection-tool.selection', function(e) {
    122.   var dataTable = document.getElementById('dataTable');
    123.   var a = {};
    124.   var values1 = [];
    125.   var values2 = [];
    126.   var tableLength = 0;
    127.   var tableString = TABLE_OUTLINE + "<tbody>";
    128.   var tableRowString = "";
    129.   // Calculate Sum of selection into an array
    130.   for (var i = 0; i < e.nodes.length; i++) {
    131.     a = e.nodes[i];
    132.  
    133.     if (a.plotindex === 0)
    134.       values1.push(a.value);
    135.     else
    136.       values2.push(a.value);
    137.   }
    138.  
    139.   // make length of table the longer of values found
    140.   tableLength = values1.length > values2.length ? values1.length : values2.length;
    141.   for (var i = 0; i < tableLength; i++) {
    142.     tableRowString = "<tr><th scope=\"row\">" + (i + 1) + "</th>";
    143.  
    144.     if (values1[i])
    145.       tableRowString += "<td>" + values1[i] + "</td>";
    146.     else
    147.       tableRowString += "<td>&nbsp;</td>";
    148.  
    149.     if (values2[i])
    150.       tableRowString += "<td>" + values2[i] + "</td>";
    151.     else
    152.       tableRowString += "<td>&nbsp;</td>";
    153.  
    154.     // close row
    155.     tableRowString += "</tr>";
    156.  
    157.     // assign row to table
    158.     tableString += tableRowString;
    159.   }
    160.  
    161.   // close table and render
    162.   tableString += "</table>";
    163.   dataTable.innerHTML = tableString;
    164.  
    165. });
    166.  
    167. // Load the selection-tool and render the charts once its loaded
    168. zingchart.loadModules('selection-tool', function() {
    169.   zingchart.render({
    170.     id: 'myChart',
    171.     data: myConfig,
    172.     height: 400,
    173.     width: '100%',
    174.     modules: 'selection-tool'
    175.   });
    176. });