<!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></style>
</head>
<body>
<div id='myChart'></div>
<script>
ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"];
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>
<!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>
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
});