<!doctype html>
<html class="zc-html">
<head>
<meta charset="utf-8">
<title>ZingSoft Demo</title>
<script src="https://cdn.zingchart.com/zingchart.min.js"></script>
<style>
.zc-html,
.zc-body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
background-color: #fff;
}
.chart--container {
height: 100%;
width: 100%;
min-height: 530px;
}
.zc-ref {
display: none;
}
</style>
</head>
<body class="zc-body">
<div id="myChart" class="chart--container">
<a href="https://www.zingchart.com/" rel="noopener" class="zc-ref">Powered by ZingChart</a>
</div>
<script>
ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"];
zingchart.MODULESDIR = 'https://cdn.zingchart.com/modules/'
zingchart.defineModule('toolbar-zoom', 'plugin', function(chartJson) {
/*
* If the 'labels' array of objects already exists, do nothing.
* If it does not exist, initialize it as an empty array.
* We do this to avoid obliteration of any existing labels.
*/
chartJson.labels = chartJson.labels ? chartJson.labels : [];
/* Push the toolbar label objects */
chartJson.labels.push({
"type": "rectangle",
"id": "zoomin",
"width": 30,
"height": 30,
"background-color": "#ddd",
"background-image": "https://cdn4.iconfinder.com/data/icons/miu/22/editor_zoom-in_-20.png",
"background-repeat": "no-repeat",
"cursor": "hand",
"margin-top": 10,
"margin-left": 50,
"margin-right": "auto",
"border-width": 1,
"border-color": "#aaa",
"border-radius-top-left": 5,
"border-radius-bottom-left": 5,
"z-index": 1
}, {
"type": "rectangle",
"id": "zoomout",
"width": 30,
"height": 30,
"background-color": "#ddd",
"background-image": "https://cdn4.iconfinder.com/data/icons/miu/22/editor_zoom-out_-20.png",
"background-repeat": "no-repeat",
"cursor": "hand",
"margin-top": 10,
"margin-left": 80,
"margin-right": "auto",
"border-width": 1,
"border-color": "#aaa",
"z-index": 1
}, {
"type": "rectangle",
"id": "viewall",
"width": 30,
"height": 30,
"background-color": "#ddd",
"background-image": "https://cdn1.iconfinder.com/data/icons/freeline/32/eye_preview_see_seen_view-20.png",
"background-repeat": "no-repeat",
"cursor": "hand",
"margin-top": 10,
"margin-left": 110,
"margin-right": "auto",
"border-width": 1,
"border-color": "#aaa",
"border-radius-top-right": 5,
"border-radius-bottom-right": 5,
"z-index": 1
});
/*
* Add label_click event listener, use the clicked label's
* id in a switch
*/
zingchart.label_click = function(p) {
switch (p.labelid) {
case "zoomin":
zingchart.exec(p.id, "zoomin");
break;
case "zoomout":
zingchart.exec(p.id, "zoomout");
break;
case "viewall":
zingchart.exec(p.id, "viewall");
break;
}
};
/* Create a reference to the "toolbar-zoom" object */
var optionsObj = chartJson["toolbar-zoom"];
/*
* If the "background-color" attr exists, loop over each label and
* modify the background-color on those with certain "id" values.
*/
if (optionsObj["background-color"]) {
for (var n in chartJson["labels"]) {
var labelObj = chartJson["labels"][n];
if ((labelObj["id"] == "zoomin") || (labelObj["id"] == "zoomout") || (labelObj["id"] == "viewall")) {
labelObj["background-color"] = optionsObj["background-color"];
}
}
}
/* Same thing as above, but for border-color. */
if (optionsObj["border-color"]) {
for (var n in chartJson["labels"]) {
var labelObj = chartJson["labels"][n];
if ((labelObj["id"] == "zoomin") || (labelObj["id"] == "zoomout") || (labelObj["id"] == "viewall")) {
labelObj["border-color"] = optionsObj["border-color"];
}
}
}
return chartJson;
});
var myConfig = {
"type": "bar",
"title": {
"text": "Zoom-Module"
},
"toolbar-zoom": { // Add the toolbar
"background-color": "#FFFFFF #D0D7E1",
"border-color": "#ACAFB6"
},
"scale-x": {
"zooming": true
},
"scrollX": {},
"series": [{
"values": [35, 42, 67, 89, 25, 34, 67, 85]
}]
};
zingchart.render({
id: 'myChart',
data: myConfig,
height: 400,
width: '100%',
modules: "toolbar-zoom" // Load the toolbar
});
</script>
</body>
</html>
zingchart.MODULESDIR='https://cdn.zingchart.com/modules/'
zingchart.defineModule('toolbar-zoom', 'plugin', function(chartJson){
/*
* If the 'labels' array of objects already exists, do nothing.
* If it does not exist, initialize it as an empty array.
* We do this to avoid obliteration of any existing labels.
*/
chartJson.labels = chartJson.labels ? chartJson.labels : [];
/* Push the toolbar label objects */
chartJson.labels.push({
"type": "rectangle",
"id": "zoomin",
"width": 30,
"height": 30,
"background-color": "#ddd",
"background-image": "https://cdn4.iconfinder.com/data/icons/miu/22/editor_zoom-in_-20.png",
"background-repeat": "no-repeat",
"cursor": "hand",
"margin-top":10,
"margin-left":50,
"margin-right":"auto",
"border-width": 1,
"border-color": "#aaa",
"border-radius-top-left": 5,
"border-radius-bottom-left": 5,
"z-index": 1
},
{
"type": "rectangle",
"id": "zoomout",
"width": 30,
"height": 30,
"background-color": "#ddd",
"background-image": "https://cdn4.iconfinder.com/data/icons/miu/22/editor_zoom-out_-20.png",
"background-repeat": "no-repeat",
"cursor": "hand",
"margin-top":10,
"margin-left":80,
"margin-right":"auto",
"border-width": 1,
"border-color": "#aaa",
"z-index": 1
},
{
"type": "rectangle",
"id": "viewall",
"width": 30,
"height": 30,
"background-color": "#ddd",
"background-image": "https://cdn1.iconfinder.com/data/icons/freeline/32/eye_preview_see_seen_view-20.png",
"background-repeat": "no-repeat",
"cursor": "hand",
"margin-top":10,
"margin-left":110,
"margin-right":"auto",
"border-width": 1,
"border-color": "#aaa",
"border-radius-top-right": 5,
"border-radius-bottom-right": 5,
"z-index": 1
});
/*
* Add label_click event listener, use the clicked label's
* id in a switch
*/
zingchart.label_click = function (p) {
switch (p.labelid) {
case "zoomin":
zingchart.exec(p.id, "zoomin");
break;
case "zoomout":
zingchart.exec(p.id, "zoomout");
break;
case "viewall":
zingchart.exec(p.id, "viewall");
break;
}
};
/* Create a reference to the "toolbar-zoom" object */
var optionsObj = chartJson["toolbar-zoom"];
/*
* If the "background-color" attr exists, loop over each label and
* modify the background-color on those with certain "id" values.
*/
if (optionsObj["background-color"]){
for (var n in chartJson["labels"]){
var labelObj = chartJson["labels"][n];
if ( (labelObj["id"] == "zoomin") || (labelObj["id"] == "zoomout") || (labelObj["id"] == "viewall") ){
labelObj["background-color"] = optionsObj["background-color"];
}
}
}
/* Same thing as above, but for border-color. */
if (optionsObj["border-color"]){
for (var n in chartJson["labels"]){
var labelObj = chartJson["labels"][n];
if ( (labelObj["id"] == "zoomin") || (labelObj["id"] == "zoomout") || (labelObj["id"] == "viewall") ){
labelObj["border-color"] = optionsObj["border-color"];
}
}
}
return chartJson;
});
var myConfig = {
"type": "bar",
"title":{
"text": "Zoom-Module"
},
"toolbar-zoom":{ // Add the toolbar
"background-color":"#FFFFFF #D0D7E1",
"border-color":"#ACAFB6"
},
"scale-x":{
"zooming":true
},
"scrollX":{},
"series" : [
{
"values" : [35,42,67,89,25,34,67,85]
}
]
};
zingchart.render({
id : 'myChart',
data : myConfig,
height: 400,
width: '100%',
modules: "toolbar-zoom" // Load the toolbar
});
