<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ZingSoft Demo</title>
<script nonce="undefined" 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;
}
</style>
</head>
<body>
<div id="myChart"><a class="zc-ref" href="https://www.zingchart.com">Powered by ZingChart</a></div>
<script>
ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "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>
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'
});
});