• 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/2.6.1/zingchart.min.js"></script>
    9.   <style>
    10.     html,
    11.     body {
    12.       background-color: #F7F7F7;
    13.     }
    14.  
    15.     .chart {
    16.       width: 49%;
    17.       display: inline-block;
    18.       background-color: #F7F7F7;
    19.     }
    20.   </style>
    21. </head>
    22.  
    23. <body>
    24.   <div id='myChart' class="chart"></div>
    25.   <div id='selectionChart' class="chart"></div>
    26.   <script>
    27.     var SCALEY = {
    28.       minValue: -2,
    29.       maxValue: 2,
    30.       step: 1,
    31.       guide: {
    32.         visible: false
    33.       },
    34.       lineColor: '#90CAF9',
    35.       lineWidth: 2,
    36.       refLine: {
    37.         lineColor: '#90CAF9',
    38.         lineWidth: 2
    39.       },
    40.       item: {
    41.         fontColor: '#90CAF9',
    42.         fontSize: 14
    43.       },
    44.       tick: {
    45.         lineColor: '#90CAF9'
    46.       }
    47.     };
    48.  
    49.     var myConfig = {
    50.       type: "scatter",
    51.       backgroundColor: '#F7F7F7',
    52.       title: {
    53.         text: 'Points Along A Sin Wave'
    54.       },
    55.       plot: {
    56.         selectionMode: "none", // turn off normal selection   
    57.         marker: {
    58.           borderWidth: 0
    59.         },
    60.         selectedMarker: {
    61.           size: 8,
    62.           borderWidth: 1,
    63.           borderColor: '#000',
    64.         },
    65.         hoverMarker: {
    66.           size: 7
    67.         },
    68.         tooltip: {
    69.           backgroundColor: '#FFF',
    70.           fontColor: '#000',
    71.           fontSize: 14,
    72.           borderRadius: 4,
    73.           borderWidth: 1,
    74.           borderColor: '#000',
    75.           text: '%t: %v',
    76.         }
    77.       },
    78.       plotarea: {
    79.         margin: 'dynamic'
    80.       },
    81.       scaleX: {
    82.         visible: false
    83.       },
    84.       scaleY: SCALEY,
    85.       selectionTool: {
    86.         mask: {
    87.           borderWidth: 2,
    88.           borderColor: "red",
    89.           backgroundColor: "yellow",
    90.           alpha: 0.5
    91.         }
    92.       },
    93.       series: [{
    94.           values: (function() {
    95.             var aV = [];
    96.             var len = 100;
    97.             var x = 0;
    98.             while (len--) {
    99.               x = (Math.random() * 10).toFixed(3) - 0;
    100.               aV.push([
    101.                 x,
    102.                 (Math.sin(x) - x * (len % 2 ? 0.1 : -0.1) * Math.random()).toFixed(3) - 0
    103.               ]);
    104.             }
    105.             return aV;
    106.           })(),
    107.           backgroundColor: '#F48FB1',
    108.           text: 'Sin Wave One',
    109.           marker: {
    110.             size: 5,
    111.             alpha: .85,
    112.             backgroundColor: '#F48FB1'
    113.           }
    114.         },
    115.         {
    116.           values: (function() {
    117.             var aV = [];
    118.             var len = 100;
    119.             var x = 0;
    120.             while (len--) {
    121.               x = (Math.random() * 10).toFixed(3) - 0;
    122.               aV.push([
    123.                 x,
    124.                 (Math.cos(x) - x * (len % 2 ? 0.1 : -0.1) * Math.random()).toFixed(3) - 0
    125.               ]);
    126.             }
    127.             return aV;
    128.           })(),
    129.           backgroundColor: '#F48FB1',
    130.           text: 'Sin Wave Two',
    131.           marker: {
    132.             size: 5,
    133.             alpha: .85,
    134.             backgroundColor: '#CE93D8'
    135.           }
    136.         }
    137.       ]
    138.     };
    139.  
    140.     // config for second chart
    141.     var selectionConfig = {
    142.       type: 'bar',
    143.       backgroundColor: '#F7F7F7',
    144.       legend: {
    145.         layout: 'h',
    146.         borderWidth: 0,
    147.         align: 'center',
    148.         adjustLayout: false,
    149.         marginTop: 32,
    150.         backgroundColor: 'transparent',
    151.         toggleAction: 'remove',
    152.         item: {
    153.           cursor: 'pointer'
    154.         },
    155.         marker: {
    156.           cursor: 'pointer'
    157.         }
    158.       },
    159.       title: {
    160.         text: 'Selected Values'
    161.       },
    162.       plot: {
    163.         maxTrackers: 250
    164.       },
    165.       scaleX: {
    166.         lineColor: '#90CAF9',
    167.         lineWidth: 2,
    168.         refLine: {
    169.           lineColor: '#90CAF9',
    170.           lineWidth: 2
    171.         },
    172.         item: {
    173.           fontColor: '#90CAF9',
    174.           fontSize: 14
    175.         },
    176.         tick: {
    177.           lineColor: '#90CAF9'
    178.         }
    179.       },
    180.       scaleY: SCALEY,
    181.       series: []
    182.     };
    183.  
    184.     // api event
    185.     zingchart.bind('myChart', 'zingchart.plugins.selection-tool.selection', function(e) {
    186.       var a = {};
    187.       var newSeriesData = [];
    188.       var values1 = [];
    189.       var values2 = [];
    190.       // Calculate Sum of selection into an array
    191.       for (var i = 0; i < e.nodes.length; i++) {
    192.         a = e.nodes[i];
    193.  
    194.         if (a.plotindex === 0)
    195.           values1.push(a.value);
    196.         else
    197.           values2.push(a.value);
    198.       }
    199.  
    200.       // add to array of objects
    201.       newSeriesData.push({
    202.         values: values1,
    203.         backgroundColor: '#F48FB1',
    204.         text: 'Pink Data',
    205.       });
    206.  
    207.       newSeriesData.push({
    208.         values: values2,
    209.         backgroundColor: '#CE93D8',
    210.         text: 'Purple Data'
    211.       });
    212.  
    213.       // update the second chart
    214.       zingchart.exec('selectionChart', 'setseriesdata', {
    215.         data: newSeriesData
    216.       });
    217.  
    218.     });
    219.  
    220.     // Load the selection-tool and render the charts once its loaded
    221.     zingchart.loadModules('selection-tool', function() {
    222.       zingchart.render({
    223.         id: 'myChart',
    224.         data: myConfig,
    225.         height: 400,
    226.         width: '100%',
    227.         modules: 'selection-tool'
    228.       });
    229.       zingchart.render({
    230.         id: 'selectionChart',
    231.         data: selectionConfig,
    232.         height: 400,
    233.         width: '100%'
    234.       });
    235.     });
    236.   </script>
    237. </body>
    238.  
    239. </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/2.6.1/zingchart.min.js"></script>
    9. </head>
    10.  
    11. <body>
    12.   <div id='myChart' class="chart"></div>
    13.   <div id='selectionChart' class="chart"></div>
    14. </body>
    15.  
    16. </html>
    1. html,
    2. body {
    3.   background-color: #F7F7F7;
    4. }
    5.  
    6. .chart {
    7.   width: 49%;
    8.   display: inline-block;
    9.   background-color: #F7F7F7;
    10. }
    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. // config for second chart
    115. var selectionConfig = {
    116.   type: 'bar',
    117.   backgroundColor: '#F7F7F7',
    118.   legend: {
    119.     layout: 'h',
    120.     borderWidth: 0,
    121.     align: 'center',
    122.     adjustLayout: false,
    123.     marginTop: 32,
    124.     backgroundColor: 'transparent',
    125.     toggleAction: 'remove',
    126.     item: {
    127.       cursor: 'pointer'
    128.     },
    129.     marker: {
    130.       cursor: 'pointer'
    131.     }
    132.   },
    133.   title: {
    134.     text: 'Selected Values'
    135.   },
    136.   plot: {
    137.     maxTrackers: 250
    138.   },
    139.   scaleX: {
    140.     lineColor: '#90CAF9',
    141.     lineWidth: 2,
    142.     refLine: {
    143.       lineColor: '#90CAF9',
    144.       lineWidth: 2
    145.     },
    146.     item: {
    147.       fontColor: '#90CAF9',
    148.       fontSize: 14
    149.     },
    150.     tick: {
    151.       lineColor: '#90CAF9'
    152.     }
    153.   },
    154.   scaleY: SCALEY,
    155.   series: []
    156. };
    157.  
    158. // api event
    159. zingchart.bind('myChart', 'zingchart.plugins.selection-tool.selection', function(e) {
    160.   var a = {};
    161.   var newSeriesData = [];
    162.   var values1 = [];
    163.   var values2 = [];
    164.   // Calculate Sum of selection into an array
    165.   for (var i = 0; i < e.nodes.length; i++) {
    166.     a = e.nodes[i];
    167.  
    168.     if (a.plotindex === 0)
    169.       values1.push(a.value);
    170.     else
    171.       values2.push(a.value);
    172.   }
    173.  
    174.   // add to array of objects
    175.   newSeriesData.push({
    176.     values: values1,
    177.     backgroundColor: '#F48FB1',
    178.     text: 'Pink Data',
    179.   });
    180.  
    181.   newSeriesData.push({
    182.     values: values2,
    183.     backgroundColor: '#CE93D8',
    184.     text: 'Purple Data'
    185.   });
    186.  
    187.   // update the second chart
    188.   zingchart.exec('selectionChart', 'setseriesdata', {
    189.     data: newSeriesData
    190.   });
    191.  
    192. });
    193.  
    194. // Load the selection-tool and render the charts once its loaded
    195. zingchart.loadModules('selection-tool', function() {
    196.   zingchart.render({
    197.     id: 'myChart',
    198.     data: myConfig,
    199.     height: 400,
    200.     width: '100%',
    201.     modules: 'selection-tool'
    202.   });
    203.   zingchart.render({
    204.     id: 'selectionChart',
    205.     data: selectionConfig,
    206.     height: 400,
    207.     width: '100%'
    208.   });
    209. });