• Edit
  • Download
  • <!DOCTYPE html>
    <html>
    
    <head>
        <meta charset="utf-8">
        <title>ZingSoft Demo</title>
    
        <script src="https://cdn.zingchart.com/zingchart.min.js"></script>
        <style>
            zing-grid[loading] {
                height: 800px;
            }
        </style>
    </head>
    
    <body>
        <div id='myChart'></div>
        <script>
            ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"];
            var myConfig = {
                type: "bar",
                backgroundColor: '#F7F7F7',
                title: {
                    text: 'You can have multiple selections'
                },
                subtitle: {
                    text: 'Click away to deselect bars'
                },
                plot: {
                    'data-append-selection': true,
                    _maxTrackers: 0,
                    selectionMode: "none", // turn off normal selection   
                    selectedState: {
                        backgroundColor: 'red',
                        borderWidth: 1,
                        borderColor: '#000',
                    },
                    hoverMarker: {
                        size: 7
                    },
                    tooltip: {
                        backgroundColor: '#FFF',
                        fontColor: '#000',
                        fontSize: 14,
                        borderRadius: 4,
                        borderWidth: 1,
                        borderColor: '#000',
                        text: '%t: %v',
                        selectedState: {
                            borderWidth: 2,
                            fontSize: 16
                        }
                    }
                },
                plotarea: {
    
                },
                scaleX: {
                    visible: false,
                    zooming: true
                },
                scaleY: {
                    minValue: -2,
                    maxValue: 2,
                    step: 1,
                    guide: {
                        visible: false
                    },
                    lineColor: '#90CAF9',
                    lineWidth: 2,
                    refLine: {
                        lineColor: '#90CAF9',
                        lineWidth: 2
                    },
                    item: {
                        fontColor: '#90CAF9',
                        fontSize: 14
                    },
                    tick: {
                        lineColor: '#90CAF9'
                    }
                },
                selectionTool: {
                    mask: {
                        borderWidth: 2,
                        borderColor: "red",
                        backgroundColor: "yellow",
                        alpha: 0.5
                    }
                },
                scrollX: {},
                preview: {
                    adjustLayout: true
                },
                zoom: {
                    active: false,
                },
                series: [{
                        values: (function() {
                            var aV = [];
                            var len = 25;
                            var x = 0;
                            while (len--) {
                                x = (Math.random() * 10).toFixed(3) - 0;
                                aV.push(
                                    (Math.sin(x) - x * (len % 2 ? 0.1 : -0.1) * Math.random()).toFixed(3) - 0
                                );
                            }
                            return aV;
                        })(),
                        dataGlobalValue: 'bla bla',
                        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'],
                        backgroundColor: '#F48FB1',
                        text: 'Sin Wave One',
                        marker: {
                            size: 5,
                            alpha: .85,
                            backgroundColor: '#F48FB1'
                        }
                    },
                    {
                        values: (function() {
                            var aV = [];
                            var len = 25;
                            var x = 0;
                            while (len--) {
                                x = (Math.random() * 10).toFixed(3) - 0;
                                aV.push(
                                    (Math.cos(x) - x * (len % 2 ? 0.1 : -0.1) * Math.random()).toFixed(3) - 0
                                );
                            }
                            return aV;
                        })(),
                        dataGlobalValue: 'moo moo',
                        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'],
                        backgroundColor: '#F48FB1',
                        text: 'Sin Wave Two',
                        marker: {
                            size: 5,
                            alpha: .85,
                            backgroundColor: '#CE93D8'
                        }
                    }
                ]
            };
    
            zingchart.bind('myChart', 'click', function() {
                zingchart.exec('myChart', 'clearselection');
            });
    
            zingchart.bind('myChart', 'zingchart.plugins.selection-tool.selection', function(e) {
                console.log(e)
            });
    
            // Load the selection-tool and render the chart once its loaded
            zingchart.loadModules('selection-tool', function() {
                zingchart.render({
                    id: 'myChart',
                    data: myConfig,
                    height: 400,
                    width: '100%',
                    modules: 'selection-tool'
                });
            });
        </script>
    </body>
    
    </html>
    <!DOCTYPE html>
    <html>
    	<head>
        <meta charset="utf-8">
        <title>ZingSoft Demo</title>
    	
    		<script src="https://cdn.zingchart.com/zingchart.min.js"></script>
    </head>
    	<body>
    		<div id='myChart'></div>
    	</body>
    </html>
    
          
    var myConfig = {
     	type: "bar", 
     	backgroundColor:'#F7F7F7',
     	title:{
     	  text:'You can have multiple selections'
     	},
     	subtitle: {
     	  text: 'Click away to deselect bars'
     	},
     	plot:{
          'data-append-selection':true,
     	  _maxTrackers:0,                
     	  selectionMode:"none", // turn off normal selection   
        selectedState:{
          backgroundColor:'red',
          borderWidth: 1,
          borderColor: '#000',
        },
        hoverMarker:{
          size:7
        },      
        tooltip:{
          backgroundColor:'#FFF',
          fontColor:'#000',
          fontSize:14,
          borderRadius:4,
          borderWidth:1,
          borderColor:'#000',
          text:'%t: %v',
          selectedState:{
            borderWidth: 2,
            fontSize: 16
          }
        }
     	},
     	plotarea:{
    
     	},
     	scaleX:{
     	  visible:false,
     	  zooming:true
     	},
     	scaleY:{
     	  minValue:-2,
     	  maxValue:2,
     	  step:1,
     	  guide:{
     	    visible:false
     	  },
     	  lineColor:'#90CAF9',
     	  lineWidth:2,
     	  refLine:{
     	    lineColor:'#90CAF9',
     	    lineWidth:2
     	  },
     	  item:{
     	    fontColor:'#90CAF9',
     	    fontSize:14
     	  },
     	  tick:{
     	    lineColor:'#90CAF9'
     	  }
     	},
     	selectionTool: {  
        mask: {
          borderWidth: 2,
          borderColor: "red",
          backgroundColor: "yellow",
          alpha: 0.5
        }
      },
      scrollX:{},
      preview:{adjustLayout:true},
      zoom: {
        active:false,
      },
    	series : [
    		{
    			values : (function () {
              var aV = [];
              var len = 25;
              var x = 0;
              while (len--) {
                  x = (Math.random() * 10).toFixed(3) - 0;
                  aV.push(
                      (Math.sin(x) - x * (len % 2 ? 0.1 : -0.1) * Math.random()).toFixed(3) - 0
                  );
              }
              return aV;
          })(),
          dataGlobalValue:'bla bla',
          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'],
          backgroundColor:'#F48FB1',
          text:'Sin Wave One',
          marker:{   
            size:5,
            alpha:.85,
            backgroundColor:'#F48FB1'
          }
    		},
    		{
    			values : (function () {
              var aV = [];
              var len = 25;
              var x = 0;
              while (len--) {
                  x = (Math.random() * 10).toFixed(3) - 0;
                  aV.push(
                      (Math.cos(x) - x * (len % 2 ? 0.1 : -0.1) * Math.random()).toFixed(3) - 0
                  );
              }
              return aV;
          })(),
        dataGlobalValue:'moo moo',
        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'],
         backgroundColor:'#F48FB1',
         text:'Sin Wave Two',
          marker:{   
            size:5,
            alpha:.85,
            backgroundColor:'#CE93D8'
          }
    		}
    	]
    };
    
    zingchart.bind('myChart', 'click', function() {
      zingchart.exec('myChart','clearselection');
    });
    
    zingchart.bind('myChart','zingchart.plugins.selection-tool.selection', function(e) {
      console.log(e)
    });
    
    // Load the selection-tool and render the chart once its loaded
    zingchart.loadModules('selection-tool', function() {
      zingchart.render({ 
      	id : 'myChart', 
      	data : myConfig, 
      	height: 400, 
      	width: '100%',
      	modules:'selection-tool'
      });
    });