<!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;
}
</style>
</head>
<body>
<div id="myChart"></div>
<script>
ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"];
zingchart.loadModules('selection');
var myConfig = {
"type": "hbar",
"font-family": "Arial",
"title": {
"text": "Customer Survey Response",
"font-family": "Arial",
"background-color": "none",
"font-color": "#A4A4A4",
"font-size": "18px"
},
"labels": [{
"text": "DAYS",
"font-size": "12px",
"font-color": "#9d9d9d",
"x": "11.5%",
"y": "10%"
},
{
"text": "CUSTOMERS",
"font-size": "12px",
"font-color": "#9d9d9d",
"x": "20%",
"y": "10%"
},
{
"text": "GOAL",
"font-size": "12px",
"font-color": "#9d9d9d",
"x": "4%",
"y": "10%"
}
],
"arrows": [{
"backgroundColor": "#CCCCCC",
"direction": "bottom",
"borderWidth": 0,
"to": {
"x": "6%",
"y": "27%"
},
"from": {
"x": "6%",
"y": "79%"
}
}],
"shapes": [{
"type": "circle",
"x": 45,
"y": 99,
"backgroundColor": "white",
"borderColor": "#6FA6DF",
"borderWidth": 3,
"size": 14
},
{
"type": "circle",
"x": 40,
"y": 95,
"backgroundColor": "#6FA6DF",
"size": 2
},
{
"type": "circle",
"x": 50,
"y": 95,
"backgroundColor": "#6FA6DF",
"size": 2
},
{
"type": "pie",
"background-color": "#5297b6",
"size": 8,
"x": 45,
"y": 100,
"angle-start": 0,
"angle-end": 180,
},
{
"type": "pie",
"background-color": "#fff",
"size": 6,
"x": 45,
"y": 100,
"angle-start": 0,
"angle-end": 180,
},
{
"type": "circle",
"x": 45,
"y": 433,
"backgroundColor": "white",
"borderColor": "#FA8452",
"borderWidth": 3,
"size": 14
},
{
"type": "circle",
"x": 40,
"y": 429,
"backgroundColor": "#FA8452",
"size": 2
},
{
"type": "circle",
"x": 50,
"y": 429,
"backgroundColor": "#FA8452",
"size": 2
},
{
"type": "pie",
"background-color": "#FA8452",
"size": 8,
"x": 45,
"y": 439,
"angle-start": 170,
"angle-end": 10,
},
{
"type": "pie",
"background-color": "#fff",
"size": 5,
"x": 45,
"y": 440,
"angle-start": 170,
"angle-end": 10,
}
],
"plot": {
//mode:"normal",
"bars-overlap": "100%",
"borderRadius": 8,
"hover-state": {
"visible": false
},
"_animation": {
"delay": 300,
"effect": 3,
"speed": "500",
"method": "0",
"sequence": "3"
},
selectedState: {
backgroundColor: 'red'
}
},
"plotarea": {
"margin": "60px 20px 20px 140px"
},
"scale-x": {
"line-color": "none",
"values": ["120+", "90-120", "60-90", "30-60", "0-30"],
"tick": {
"visible": false
},
"guide": {
"visible": false
},
"item": {
"font-size": "14px",
"padding-right": "20px",
"auto-align": true,
"rules": [{
"rule": "%i==0",
"font-color": "#FA8452"
},
{
"rule": "%i==1",
"font-color": "#FCAE48"
},
{
"rule": "%i==2",
"font-color": "#FCCC65"
},
{
"rule": "%i==3",
"font-color": "#A0BE4A"
},
{
"rule": "%i==4",
"font-color": "#6FA6DF"
}
]
}
},
"scale-y": {
"visible": false,
"guide": {
"visible": false
}
},
"series": [{
"values": [100, 100, 100, 100, 100],
"bar-width": "40px",
"background-color": "#f2f2f2",
"border-color": "#e8e3e3",
"border-width": 2,
"fill-angle": 90,
"tooltip": {
"visible": false
},
"data-ignore-selection": true
},
{
"values": [42, 56, 77, 44, 81],
"bar-width": "32px",
"max-trackers": 0,
"value-box": {
"placement": "top-out",
"text": "%v",
"decimals": 0,
"font-color": "#A4A4A4",
"font-size": "14px",
"alpha": 0.6
},
"rules": [{
"rule": "%i==0",
"background-color": "#FA8452"
},
{
"rule": "%i==1",
"background-color": "#FCAE48"
},
{
"rule": "%i==2",
"background-color": "#FCCC65"
},
{
"rule": "%i==3",
"background-color": "#A0BE4A"
},
{
"rule": "%i==4",
"background-color": "#6FA6DF"
}
]
}
]
};
/* Lets create a place to store our function. Typically it is not recomended
* to modify the zingchart object. This is for advanced users. It is good
* practice to keep all your charting stuff together, in this case your
* custom functions within the zingchart object! This will also help with
* name collisions within the window object.
*
* BE WARNED: you can overwrite stuff in the zingchart object if you are
* not careful. This will mess stuff up.
*/
zingchart.insert_company_name_customFncs = {};
zingchart.insert_company_name_customFncs.clearSelection = function(e) {
zingchart.exec(e.id, 'clearselection');
}
// Load the selection-tool and render the chart once the module is loaded
zingchart.loadModules('selection-tool', function() {
zingchart.render({
id: 'myChart',
// defined data this way since context menu needs to be defined in root (above graphset)
data: {
gui: {
contextMenu: {
customItems: [{
text: 'Clear Selection',
function: 'zingchart.insert_company_name_customFncs.clearSelection()',
id: 'clearSelection'
}]
}
},
graphset: [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>
html,
body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
#myChart {
height: 100%;
width: 100%;
min-height: 150px;
}
zingchart.loadModules('selection');
var myConfig = {
"type": "hbar",
"font-family": "Arial",
"title": {
"text": "Customer Survey Response",
"font-family": "Arial",
"background-color": "none",
"font-color": "#A4A4A4",
"font-size": "18px"
},
"labels": [{
"text": "DAYS",
"font-size": "12px",
"font-color": "#9d9d9d",
"x": "11.5%",
"y": "10%"
},
{
"text": "CUSTOMERS",
"font-size": "12px",
"font-color": "#9d9d9d",
"x": "20%",
"y": "10%"
},
{
"text": "GOAL",
"font-size": "12px",
"font-color": "#9d9d9d",
"x": "4%",
"y": "10%"
}
],
"arrows": [{
"backgroundColor": "#CCCCCC",
"direction": "bottom",
"borderWidth": 0,
"to": {
"x": "6%",
"y": "27%"
},
"from": {
"x": "6%",
"y": "79%"
}
}],
"shapes": [{
"type": "circle",
"x": 45,
"y": 99,
"backgroundColor": "white",
"borderColor": "#6FA6DF",
"borderWidth": 3,
"size": 14
},
{
"type": "circle",
"x": 40,
"y": 95,
"backgroundColor": "#6FA6DF",
"size": 2
},
{
"type": "circle",
"x": 50,
"y": 95,
"backgroundColor": "#6FA6DF",
"size": 2
},
{
"type": "pie",
"background-color": "#5297b6",
"size": 8,
"x": 45,
"y": 100,
"angle-start": 0,
"angle-end": 180,
},
{
"type": "pie",
"background-color": "#fff",
"size": 6,
"x": 45,
"y": 100,
"angle-start": 0,
"angle-end": 180,
},
{
"type": "circle",
"x": 45,
"y": 433,
"backgroundColor": "white",
"borderColor": "#FA8452",
"borderWidth": 3,
"size": 14
},
{
"type": "circle",
"x": 40,
"y": 429,
"backgroundColor": "#FA8452",
"size": 2
},
{
"type": "circle",
"x": 50,
"y": 429,
"backgroundColor": "#FA8452",
"size": 2
},
{
"type": "pie",
"background-color": "#FA8452",
"size": 8,
"x": 45,
"y": 439,
"angle-start": 170,
"angle-end": 10,
},
{
"type": "pie",
"background-color": "#fff",
"size": 5,
"x": 45,
"y": 440,
"angle-start": 170,
"angle-end": 10,
}
],
"plot": {
//mode:"normal",
"bars-overlap": "100%",
"borderRadius": 8,
"hover-state": {
"visible": false
},
"_animation": {
"delay": 300,
"effect": 3,
"speed": "500",
"method": "0",
"sequence": "3"
},
selectedState: {
backgroundColor: 'red'
}
},
"plotarea": {
"margin": "60px 20px 20px 140px"
},
"scale-x": {
"line-color": "none",
"values": ["120+", "90-120", "60-90", "30-60", "0-30"],
"tick": {
"visible": false
},
"guide": {
"visible": false
},
"item": {
"font-size": "14px",
"padding-right": "20px",
"auto-align": true,
"rules": [{
"rule": "%i==0",
"font-color": "#FA8452"
},
{
"rule": "%i==1",
"font-color": "#FCAE48"
},
{
"rule": "%i==2",
"font-color": "#FCCC65"
},
{
"rule": "%i==3",
"font-color": "#A0BE4A"
},
{
"rule": "%i==4",
"font-color": "#6FA6DF"
}
]
}
},
"scale-y": {
"visible": false,
"guide": {
"visible": false
}
},
"series": [{
"values": [100, 100, 100, 100, 100],
"bar-width": "40px",
"background-color": "#f2f2f2",
"border-color": "#e8e3e3",
"border-width": 2,
"fill-angle": 90,
"tooltip": {
"visible": false
},
"data-ignore-selection": true
},
{
"values": [42, 56, 77, 44, 81],
"bar-width": "32px",
"max-trackers": 0,
"value-box": {
"placement": "top-out",
"text": "%v",
"decimals": 0,
"font-color": "#A4A4A4",
"font-size": "14px",
"alpha": 0.6
},
"rules": [{
"rule": "%i==0",
"background-color": "#FA8452"
},
{
"rule": "%i==1",
"background-color": "#FCAE48"
},
{
"rule": "%i==2",
"background-color": "#FCCC65"
},
{
"rule": "%i==3",
"background-color": "#A0BE4A"
},
{
"rule": "%i==4",
"background-color": "#6FA6DF"
}
]
}
]
};
/* Lets create a place to store our function. Typically it is not recomended
* to modify the zingchart object. This is for advanced users. It is good
* practice to keep all your charting stuff together, in this case your
* custom functions within the zingchart object! This will also help with
* name collisions within the window object.
*
* BE WARNED: you can overwrite stuff in the zingchart object if you are
* not careful. This will mess stuff up.
*/
zingchart.insert_company_name_customFncs = {};
zingchart.insert_company_name_customFncs.clearSelection = function(e) {
zingchart.exec(e.id, 'clearselection');
}
// Load the selection-tool and render the chart once the module is loaded
zingchart.loadModules('selection-tool', function() {
zingchart.render({
id: 'myChart',
// defined data this way since context menu needs to be defined in root (above graphset)
data: {
gui: {
contextMenu: {
customItems: [{
text: 'Clear Selection',
function: 'zingchart.insert_company_name_customFncs.clearSelection()',
id: 'clearSelection'
}]
}
},
graphset: [myConfig]
},
height: 400,
width: '100%',
modules: 'selection-tool'
});
});