• 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>
            html,
            body {
                height: 100%;
                width: 100%;
                margin: 0;
                padding: 0;
            }
    
            #myChart {
                height: 100%;
                width: 100%;
                min-height: 150px;
            }
    
            .zc-ref {
                display: none;
            }
    
            zing-grid[loading] {
                height: nullpx;
            }
        </style>
    </head>
    
    <body>
        <div id="myChart"><a class="zc-ref" href="https://www.zingchart.com">Powered by ZingChart</a></div>
        <script>
            ZC.LICENSE = ["b55b025e438fa8a98e32482b5f768ff5"];
            var myConfig = {
                "graphset": [{
                    "background-color": "#ffffff",
                    "type": "bar",
                    "title": {
                        "text": "Multiple Selections"
                    },
                    "subtitle": {
                        "text": ". Click To Clear Selection"
                    },
                    "legend": {
                        "toggle-action": "remove",
                        "align": "center",
                        "adjust-layout": false,
                        "borderWidth": 0,
                        "verticalAlign": "bottom",
                        "fontColor": "#7d7d7d",
                        "font-size": 10,
                        "marginRight": 20,
                        "marginBottom": 0,
                        "marginTop": 0,
                        "marker": {
                            "type": "square"
                        },
                    },
                    "preview": {
                        "background-color": "#F5F7F3",
                        "border-width": 0,
                        "height": 29,
                        "preserve-zoom": false,
                        "mask": {
                            "backgroundColor": "white",
                            "alpha": 0.8
                        },
                        "handle": {
                            "border-width": 1
                        },
                        "y": "85%"
                    },
                    "scale-x": {
                        "zooming": true,
                        "zoom-to": [0, 30],
                        "item": {
                            "font-size": 10,
                            "font-color": "#7d7d7d"
                        },
                        "tick": {
                            "visible": false
                        },
                        "title": {
                            "text": "You can Make Multiple Selections And Click To Clear selection"
                        },
                        "minValue": 1484782109655,
                        "step": "day",
                        "transform": {
                            "type": "date"
                        }
                    },
                    "scale-y": {
                        "zooming": false,
                        "values": "0:2.503:0.5006",
                        "guide": {
                            "line-style": "dotted"
                        },
                        "item": {
                            "font-size": 10,
                            "font-color": "#7d7d7d"
                        },
                        "tick": {
                            "visible": false
                        },
                        "format": "%v%",
                        "decimals": 1
                    },
                    "zoom": {
                        "active": false,
                        "preserve-zoom": true
                    },
                    "plotarea": {
                        "margin-top": "20",
                        "margin-left": "20",
                        "margin": "dynamic 50 105 dynamic"
                    },
                    "plot": {
                        "data-append-selection": true,
                        "mode": "normal",
                        "line-width": 1,
                        "line-color": "#4d9900",
                        "background-color": "#1e88e5",
                        "marker": {
                            "size": 3,
                            "background-color": "#ccccff #6666ff",
                            "border-width": 1,
                            "border-color": "#4d9900"
                        },
                        "tooltip": {
                            "visible": true,
                            "text": "%kv<br>%vv"
                        },
                        "selection-mode": "multiple",
                        "selected-state": {
                            "background-color": "#ffa726",
                            "border-width": 0
                        }
                    },
                    "series": [{
                        "values": [0.8840000000000001, 1.9060000000000001, 1.35, 1.189, 0.984, 0.619, 0.468, 0.28700000000000003, 2.503, 1.139, 2.011, 1.7389999999999999, 0.5559999999999999, 0.22899999999999998, 0.218, 0.761, 0.58, 1.171, 0.8240000000000001, 0.721, 0.542, 0.954, 0.683, 0.976, 1.0290000000000001, 0.28800000000000003, 0.362, 0.388, 1.057, 0.886, 0.196, 0.333, 1.013, 0.541, 0.127, 0.726, 0.649, 1.031, 0.606, 1.232, 0.5459999999999999, 0.8340000000000001, 1.9869999999999999, 0.257, 0.62, 0.571, 0.194, 0.315, 0.45799999999999996, 0.14300000000000002, 0.126, 0.252, 0.588, 1.419, 0.259, 0.724, 0.295, 0.344, 0.455, 0.27699999999999997, 0.604, 0.471, 0.8200000000000001, 0.504, 0.209, 0.33999999999999997, 0.404, 0.127, 0.293, 0.326, 0.428, 0.38999999999999996, 0.562, 0.14300000000000002, 0.258, 0.414, 0.42100000000000004, 0.6669999999999999, 0.8290000000000001, 1.369, 0.261, 1.15, 0.644, 0.519, 0.44400000000000006, 0.627, 0.411, 0.447, 0.173, 0.763, 0.581, 1.2710000000000001, 0.9129999999999999, 0.988, 0.51, 0.664, 0.348, 0.5559999999999999, 0.28600000000000003, 0.424, 0.676, 0.367, 0.634, 0.47600000000000003, 0.512, 0.33999999999999997, 0.076, 0.27799999999999997, 0.291, 0.402, 0.199, 0.21, 0.261, 0.178, 0.315, 0.6459999999999999, 0.482, 0.08499999999999999, 0.068, 0.40099999999999997, 0.135, 0.679, 0.769, 1.113, 0.315, 0.37, 0.267, 0.145, 1.2309999999999999, 0.126, 0.217, 1.0670000000000002, 2.213, 0.687, 0.63, 0.498, 0.428, 0.154, 0.27299999999999996, 0.161, 0.28900000000000003, 0.8130000000000001, 0.406, 0.553, 0.584, 0.73, 0.347, 0.194, 0.439, 0.28800000000000003, 0.561, 0.22499999999999998, 1.2550000000000001, 0.771, 0.13, 0.644, 0.078, 0.27899999999999997, 0.35100000000000003, 0.525, 0.735, 0.893, 0.719, 1.375, 0.42500000000000004, 0.27999999999999997, 0.255, 0.109, 0.411, 0.11, 0.172, 0.698],
                        "text": "Percentage Of Sales"
                    }]
                }]
            };
    
            zingchart.bind('myChart', 'click', function(e) {
                if (e.target === "none") {
                    zingchart.exec('myChart', 'clearselection');
                }
            });
    
    
            // Load the selection-tool and render the chart once its loaded
            zingchart.loadModules('selection-tool', function() {
                zingchart.render({
                    id: 'myChart',
                    data: myConfig,
                    height: '100%',
                    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"><a class="zc-ref" href="https://www.zingchart.com">Powered by ZingChart</a></div>
    	</body>
    </html>
    html, body {
    	height:100%;
    	width:100%;
    	margin:0;
    	padding:0;
    }
    #myChart {
    	height:100%;
    	width:100%;
    	min-height:150px;
    }
    .zc-ref {
    	display:none;
    }
    var myConfig = {
    "graphset":[
        {
            "background-color":"#ffffff",
            "type":"bar",
            "title": {
              "text": "Multiple Selections"
            },
            "subtitle": {
              "text":". Click To Clear Selection"
            },
            "legend":{
                "toggle-action":"remove",
                "align":"center",
                "adjust-layout":false,
                "borderWidth":0,
                "verticalAlign":"bottom",
                "fontColor":"#7d7d7d",
                "font-size":10,
                "marginRight":20,
                "marginBottom":0,
                "marginTop":0,
                "marker":{
                    "type":"square"
                },
            },
            "preview":{
                "background-color":"#F5F7F3",
                "border-width":0,
                "height":29,
                "preserve-zoom":false,
                "mask":{
                    "backgroundColor":"white",
                    "alpha":0.8
                },
                "handle":{
                    "border-width":1
                },
                "y":"85%"
            },
            "scale-x":{
                "zooming":true,
                "zoom-to":[0,30],
                "item":{
                    "font-size":10,
                    "font-color":"#7d7d7d"
                },
                "tick":{
                    "visible":false
                },
                "title":{
                    "text":"You can Make Multiple Selections And Click To Clear selection"
                },
                "minValue":1484782109655,
                "step":"day",
                "transform":{
                    "type":"date"
                }
            },
            "scale-y":{
                "zooming":false,
                "values":"0:2.503:0.5006",
                "guide":{
                    "line-style":"dotted"
                },
                "item":{
                    "font-size":10,
                    "font-color":"#7d7d7d"
                },
                "tick":{
                    "visible":false
                },
                "format":"%v%",
                "decimals":1
            },
            "zoom":{
                "active":false,
                "preserve-zoom":true
            },
            "plotarea":{
                "margin-top":"20",
                "margin-left":"20",
                "margin":"dynamic 50 105 dynamic"
            },
            "plot":{
                "data-append-selection":true,
                "mode":"normal",
                "line-width":1,
                "line-color":"#4d9900",
                "background-color":"#1e88e5",
                "marker":{
                    "size":3,
                    "background-color":"#ccccff #6666ff",
                    "border-width":1,
                    "border-color":"#4d9900"
                },
                "tooltip":{
                    "visible":true,
                    "text":"%kv<br>%vv"
                },
                "selection-mode":"multiple",
                "selected-state":{
                    "background-color":"#ffa726",
                    "border-width":0
                }
            },
            "series":[
                {
                    "values":[0.8840000000000001,1.9060000000000001,1.35,1.189,0.984,0.619,0.468,0.28700000000000003,2.503,1.139,2.011,1.7389999999999999,0.5559999999999999,0.22899999999999998,0.218,0.761,0.58,1.171,0.8240000000000001,0.721,0.542,0.954,0.683,0.976,1.0290000000000001,0.28800000000000003,0.362,0.388,1.057,0.886,0.196,0.333,1.013,0.541,0.127,0.726,0.649,1.031,0.606,1.232,0.5459999999999999,0.8340000000000001,1.9869999999999999,0.257,0.62,0.571,0.194,0.315,0.45799999999999996,0.14300000000000002,0.126,0.252,0.588,1.419,0.259,0.724,0.295,0.344,0.455,0.27699999999999997,0.604,0.471,0.8200000000000001,0.504,0.209,0.33999999999999997,0.404,0.127,0.293,0.326,0.428,0.38999999999999996,0.562,0.14300000000000002,0.258,0.414,0.42100000000000004,0.6669999999999999,0.8290000000000001,1.369,0.261,1.15,0.644,0.519,0.44400000000000006,0.627,0.411,0.447,0.173,0.763,0.581,1.2710000000000001,0.9129999999999999,0.988,0.51,0.664,0.348,0.5559999999999999,0.28600000000000003,0.424,0.676,0.367,0.634,0.47600000000000003,0.512,0.33999999999999997,0.076,0.27799999999999997,0.291,0.402,0.199,0.21,0.261,0.178,0.315,0.6459999999999999,0.482,0.08499999999999999,0.068,0.40099999999999997,0.135,0.679,0.769,1.113,0.315,0.37,0.267,0.145,1.2309999999999999,0.126,0.217,1.0670000000000002,2.213,0.687,0.63,0.498,0.428,0.154,0.27299999999999996,0.161,0.28900000000000003,0.8130000000000001,0.406,0.553,0.584,0.73,0.347,0.194,0.439,0.28800000000000003,0.561,0.22499999999999998,1.2550000000000001,0.771,0.13,0.644,0.078,0.27899999999999997,0.35100000000000003,0.525,0.735,0.893,0.719,1.375,0.42500000000000004,0.27999999999999997,0.255,0.109,0.411,0.11,0.172,0.698],
                    "text":"Percentage Of Sales"
                }
            ]
        }
    ]
    };
     
    zingchart.bind('myChart', 'click', function(e) {
        if (e.target === "none") {
            zingchart.exec('myChart', 'clearselection');
        }
    });
              
     
    // Load the selection-tool and render the chart once its loaded
    zingchart.loadModules('selection-tool', function() {
      zingchart.render({ 
      	id : 'myChart', 
      	data : myConfig, 
      	height: '100%', 
      	width: '100%',
      	modules:'selection-tool'
      });
    });