• 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.   <script>
    15.     ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"];
    16.     var myConfig = {
    17.       type: "bar",
    18.       backgroundColor: '#F7F7F7',
    19.       title: {
    20.         text: 'You can have multiple selections'
    21.       },
    22.       subtitle: {
    23.         text: 'Click away to deselect bars'
    24.       },
    25.       plot: {
    26.         'data-append-selection': true,
    27.         _maxTrackers: 0,
    28.         selectionMode: "none", // turn off normal selection   
    29.         selectedState: {
    30.           backgroundColor: 'red',
    31.           borderWidth: 1,
    32.           borderColor: '#000',
    33.         },
    34.         hoverMarker: {
    35.           size: 7
    36.         },
    37.         tooltip: {
    38.           backgroundColor: '#FFF',
    39.           fontColor: '#000',
    40.           fontSize: 14,
    41.           borderRadius: 4,
    42.           borderWidth: 1,
    43.           borderColor: '#000',
    44.           text: '%t: %v',
    45.           selectedState: {
    46.             borderWidth: 2,
    47.             fontSize: 16
    48.           }
    49.         }
    50.       },
    51.       plotarea: {
    52.  
    53.       },
    54.       scaleX: {
    55.         visible: false,
    56.         zooming: true
    57.       },
    58.       scaleY: {
    59.         minValue: -2,
    60.         maxValue: 2,
    61.         step: 1,
    62.         guide: {
    63.           visible: false
    64.         },
    65.         lineColor: '#90CAF9',
    66.         lineWidth: 2,
    67.         refLine: {
    68.           lineColor: '#90CAF9',
    69.           lineWidth: 2
    70.         },
    71.         item: {
    72.           fontColor: '#90CAF9',
    73.           fontSize: 14
    74.         },
    75.         tick: {
    76.           lineColor: '#90CAF9'
    77.         }
    78.       },
    79.       selectionTool: {
    80.         mask: {
    81.           borderWidth: 2,
    82.           borderColor: "red",
    83.           backgroundColor: "yellow",
    84.           alpha: 0.5
    85.         }
    86.       },
    87.       scrollX: {},
    88.       preview: {
    89.         adjustLayout: true
    90.       },
    91.       zoom: {
    92.         active: false,
    93.       },
    94.       series: [{
    95.           values: (function() {
    96.             var aV = [];
    97.             var len = 25;
    98.             var x = 0;
    99.             while (len--) {
    100.               x = (Math.random() * 10).toFixed(3) - 0;
    101.               aV.push(
    102.                 (Math.sin(x) - x * (len % 2 ? 0.1 : -0.1) * Math.random()).toFixed(3) - 0
    103.               );
    104.             }
    105.             return aV;
    106.           })(),
    107.           dataGlobalValue: 'bla bla',
    108.           dataTest: ['test text', 'test text', 'test text', 'test text', 'test text', 'test text', 'test text', 'test text', 'test text', 'test text', 'test text', 'test text', 'test text', 'test text', 'test text', 'test text', 'test text', 'test text', 'test text', 'test text', 'test text', 'test text', 'test text', 'test text', 'test text', 'test text'],
    109.           backgroundColor: '#F48FB1',
    110.           text: 'Sin Wave One',
    111.           marker: {
    112.             size: 5,
    113.             alpha: .85,
    114.             backgroundColor: '#F48FB1'
    115.           }
    116.         },
    117.         {
    118.           values: (function() {
    119.             var aV = [];
    120.             var len = 25;
    121.             var x = 0;
    122.             while (len--) {
    123.               x = (Math.random() * 10).toFixed(3) - 0;
    124.               aV.push(
    125.                 (Math.cos(x) - x * (len % 2 ? 0.1 : -0.1) * Math.random()).toFixed(3) - 0
    126.               );
    127.             }
    128.             return aV;
    129.           })(),
    130.           dataGlobalValue: 'moo moo',
    131.           dataTest: ['test text', 'test text', 'test text', 'test text', 'test text', 'test text', 'test text', 'test text', 'test text', 'test text', 'test text', 'test text', 'test text', 'test text', 'test text', 'test text', 'test text', 'test text', 'test text', 'test text', 'test text', 'test text', 'test text', 'test text', 'test text', 'test text'],
    132.           backgroundColor: '#F48FB1',
    133.           text: 'Sin Wave Two',
    134.           marker: {
    135.             size: 5,
    136.             alpha: .85,
    137.             backgroundColor: '#CE93D8'
    138.           }
    139.         }
    140.       ]
    141.     };
    142.  
    143.     zingchart.bind('myChart', 'click', function() {
    144.       zingchart.exec('myChart', 'clearselection');
    145.     });
    146.  
    147.     zingchart.bind('myChart', 'zingchart.plugins.selection-tool.selection', function(e) {
    148.       console.log(e)
    149.     });
    150.  
    151.     // Load the selection-tool and render the chart once its loaded
    152.     zingchart.loadModules('selection-tool', function() {
    153.       zingchart.render({
    154.         id: 'myChart',
    155.         data: myConfig,
    156.         height: 400,
    157.         width: '100%',
    158.         modules: 'selection-tool'
    159.       });
    160.     });
    161.   </script>
    162. </body>
    163.  
    164. </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.  
    1. var myConfig = {
    2.   type: "bar",
    3.   backgroundColor: '#F7F7F7',
    4.   title: {
    5.     text: 'You can have multiple selections'
    6.   },
    7.   subtitle: {
    8.     text: 'Click away to deselect bars'
    9.   },
    10.   plot: {
    11.     'data-append-selection': true,
    12.     _maxTrackers: 0,
    13.     selectionMode: "none", // turn off normal selection   
    14.     selectedState: {
    15.       backgroundColor: 'red',
    16.       borderWidth: 1,
    17.       borderColor: '#000',
    18.     },
    19.     hoverMarker: {
    20.       size: 7
    21.     },
    22.     tooltip: {
    23.       backgroundColor: '#FFF',
    24.       fontColor: '#000',
    25.       fontSize: 14,
    26.       borderRadius: 4,
    27.       borderWidth: 1,
    28.       borderColor: '#000',
    29.       text: '%t: %v',
    30.       selectedState: {
    31.         borderWidth: 2,
    32.         fontSize: 16
    33.       }
    34.     }
    35.   },
    36.   plotarea: {
    37.  
    38.   },
    39.   scaleX: {
    40.     visible: false,
    41.     zooming: true
    42.   },
    43.   scaleY: {
    44.     minValue: -2,
    45.     maxValue: 2,
    46.     step: 1,
    47.     guide: {
    48.       visible: false
    49.     },
    50.     lineColor: '#90CAF9',
    51.     lineWidth: 2,
    52.     refLine: {
    53.       lineColor: '#90CAF9',
    54.       lineWidth: 2
    55.     },
    56.     item: {
    57.       fontColor: '#90CAF9',
    58.       fontSize: 14
    59.     },
    60.     tick: {
    61.       lineColor: '#90CAF9'
    62.     }
    63.   },
    64.   selectionTool: {
    65.     mask: {
    66.       borderWidth: 2,
    67.       borderColor: "red",
    68.       backgroundColor: "yellow",
    69.       alpha: 0.5
    70.     }
    71.   },
    72.   scrollX: {},
    73.   preview: {
    74.     adjustLayout: true
    75.   },
    76.   zoom: {
    77.     active: false,
    78.   },
    79.   series: [{
    80.       values: (function() {
    81.         var aV = [];
    82.         var len = 25;
    83.         var x = 0;
    84.         while (len--) {
    85.           x = (Math.random() * 10).toFixed(3) - 0;
    86.           aV.push(
    87.             (Math.sin(x) - x * (len % 2 ? 0.1 : -0.1) * Math.random()).toFixed(3) - 0
    88.           );
    89.         }
    90.         return aV;
    91.       })(),
    92.       dataGlobalValue: 'bla bla',
    93.       dataTest: ['test text', 'test text', 'test text', 'test text', 'test text', 'test text', 'test text', 'test text', 'test text', 'test text', 'test text', 'test text', 'test text', 'test text', 'test text', 'test text', 'test text', 'test text', 'test text', 'test text', 'test text', 'test text', 'test text', 'test text', 'test text', 'test text'],
    94.       backgroundColor: '#F48FB1',
    95.       text: 'Sin Wave One',
    96.       marker: {
    97.         size: 5,
    98.         alpha: .85,
    99.         backgroundColor: '#F48FB1'
    100.       }
    101.     },
    102.     {
    103.       values: (function() {
    104.         var aV = [];
    105.         var len = 25;
    106.         var x = 0;
    107.         while (len--) {
    108.           x = (Math.random() * 10).toFixed(3) - 0;
    109.           aV.push(
    110.             (Math.cos(x) - x * (len % 2 ? 0.1 : -0.1) * Math.random()).toFixed(3) - 0
    111.           );
    112.         }
    113.         return aV;
    114.       })(),
    115.       dataGlobalValue: 'moo moo',
    116.       dataTest: ['test text', 'test text', 'test text', 'test text', 'test text', 'test text', 'test text', 'test text', 'test text', 'test text', 'test text', 'test text', 'test text', 'test text', 'test text', 'test text', 'test text', 'test text', 'test text', 'test text', 'test text', 'test text', 'test text', 'test text', 'test text', 'test text'],
    117.       backgroundColor: '#F48FB1',
    118.       text: 'Sin Wave Two',
    119.       marker: {
    120.         size: 5,
    121.         alpha: .85,
    122.         backgroundColor: '#CE93D8'
    123.       }
    124.     }
    125.   ]
    126. };
    127.  
    128. zingchart.bind('myChart', 'click', function() {
    129.   zingchart.exec('myChart', 'clearselection');
    130. });
    131.  
    132. zingchart.bind('myChart', 'zingchart.plugins.selection-tool.selection', function(e) {
    133.   console.log(e)
    134. });
    135.  
    136. // Load the selection-tool and render the chart once its loaded
    137. zingchart.loadModules('selection-tool', function() {
    138.   zingchart.render({
    139.     id: 'myChart',
    140.     data: myConfig,
    141.     height: 400,
    142.     width: '100%',
    143.     modules: 'selection-tool'
    144.   });
    145. });