<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ZingSoft Demo</title>
<link href='https://fonts.googleapis.com/css?family=Roboto:400' rel='stylesheet' type='text/css'>
<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"];
var myConfig = {
globals: {
"font-family": "Roboto"
},
type: "bar",
backgroundColor: "#f4f2f2",
title: {
text: "Revenue Comparison",
"background-color": "none",
color: "#333"
},
subtitle: {
text: "Q1-Q4 2015",
color: "#333",
width: "10%",
offsetX: "270px"
},
plotarea: {
"margin-top": 100,
"margin-bottom": 30,
"background-color": "#fff"
},
scaleX: {
values: ["Q1", "Q2", "Q3", "Q4"],
lineColor: "#7d7d7d",
tick: {
lineColor: "#7d7d7d"
},
guide: {
visible: false
},
markers: [{
type: "area",
range: [1.5, 2.5],
backgroundColor: "red",
alpha: 0.2,
label: {
text: "Netflix reduces fee",
angle: 0,
"offset-x": 13,
"offset-y": -210,
color: "#7d7d7d"
}
}]
},
scaleY: {
lineColor: "#7d7d7d",
tick: {
lineColor: "#7d7d7d"
},
format: "$%v",
short: true
},
legend: {
borderRadius: "3px",
borderColor: "none",
backgroundColor: "none",
layout: "h",
verticalAlign: "bottom",
align: "center",
shadow: false,
marker: {
borderRadius: "2px",
borderColor: "none"
}
},
tooltip: {
borderRadius: "3px",
borderColor: "#F4F2F2",
borderWidth: 2,
width: 90,
callout: true,
height: 50,
fontSize: 12,
shadow: false,
text: "%kt: $%v in %t Sales",
short: true,
"short-unit": "M",
decimals: 1,
rules: [{
rule: "%p === 0 && %i === 3 || %p === 1 && %i === 3",
text: "%kt Projected: $%v in %t Sales",
backgroundColor: "#7d7d7d"
}]
},
plot: {
alpha: 0.8,
borderRadius: "3px",
rules: [{
rule: "%p === 0 && %i === 3",
backgroundColor: "none",
"line-style": "dashed",
"border-color": "#447884",
"border-width": 1
},
{
rule: "%p === 1 && %i === 3",
backgroundColor: "none",
"line-style": "dashed",
"border-color": "#ff9800",
"border-width": 1
},
]
},
labels: [{
"text": "Adjust Projections",
fontSize: 12,
y: 4,
x: 38
},
{
text: "Internet:",
y: 30,
x: 20
},
{
text: "Cable:",
y: 60,
x: 28
},
{
id: "i10plus",
text: "+10%",
y: 30,
x: 70,
backgroundColor: "white",
borderColor: "#7d7d7d",
borderWidth: 1,
borderRadius: 3,
width: 35,
hoverState: {
backgroundColor: "#333",
borderColor: "#fff",
color: "#fff"
}
},
{
id: "i10minus",
text: "-10%",
y: 30,
x: 110,
backgroundColor: "white",
borderColor: "#7d7d7d",
borderWidth: 1,
borderRadius: 3,
width: 35,
hoverState: {
backgroundColor: "#333",
borderColor: "#fff",
color: "#fff"
}
},
{
id: "c10plus",
text: "+10%",
y: 60,
x: 70,
backgroundColor: "white",
borderColor: "#7d7d7d",
borderWidth: 1,
borderRadius: 3,
width: 35,
hoverState: {
backgroundColor: "#333",
borderColor: "#fff",
color: "#fff"
}
},
{
id: "c10minus",
text: "-10%",
y: 60,
x: 110,
backgroundColor: "white",
borderColor: "#7d7d7d",
borderWidth: 1,
borderRadius: 3,
width: 35,
hoverState: {
backgroundColor: "#333",
borderColor: "#fff",
color: "#fff"
}
}
],
series: [{
values: [3500000, 4200000, 6700000, 8900000],
backgroundColor: "#447884 #69a3af",
text: "Internet"
},
{
values: [2800000, 4000000, 3900000, 3600000],
backgroundColor: "#ff9800 #f2b157",
text: "Cable"
}
]
}
zingchart.render({
id: 'myChart',
data: myConfig,
height: 400,
width: 600,
events: {
label_click: function(p) {
console.log(p);
var nodeValue;
switch (p.labelid) {
case 'i10minus':
nodeValue = zingchart.exec("myChart", "getnodevalue", {
"plotindex": 0,
"nodeindex": 3,
});
zingchart.exec('myChart', "setnodevalue", {
"plotindex": 0,
"nodeindex": 3,
"value": (nodeValue - (nodeValue * 0.1))
});
break;
case 'i10plus':
nodeValue = zingchart.exec("myChart", "getnodevalue", {
"plotindex": 0,
"nodeindex": 3,
});
zingchart.exec('myChart', "setnodevalue", {
"plotindex": 0,
"nodeindex": 3,
"value": (nodeValue + (nodeValue * 0.1))
});
break;
case 'c10minus':
nodeValue = zingchart.exec("myChart", "getnodevalue", {
"plotindex": 1,
"nodeindex": 3,
});
zingchart.exec('myChart', "setnodevalue", {
"plotindex": 1,
"nodeindex": 3,
"value": (nodeValue - (nodeValue * 0.1))
});
break;
case 'c10plus':
nodeValue = zingchart.exec("myChart", "getnodevalue", {
"plotindex": 1,
"nodeindex": 3,
});
zingchart.exec('myChart', "setnodevalue", {
"plotindex": 1,
"nodeindex": 3,
"value": (nodeValue + (nodeValue * 0.1))
});
break;
}
}
}
});
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ZingSoft Demo</title>
<link href='https://fonts.googleapis.com/css?family=Roboto:400' rel='stylesheet' type='text/css'>
<script src="https://cdn.zingchart.com/zingchart.min.js"></script>
</head>
<body>
<div id='myChart'></div>
</body>
</html>
var myConfig = {
globals: {
"font-family": "Roboto"
},
type: "bar",
backgroundColor: "#f4f2f2",
title: {
text: "Revenue Comparison",
"background-color": "none",
color: "#333"
},
subtitle: {
text: "Q1-Q4 2015",
color: "#333",
width: "10%",
offsetX: "270px"
},
plotarea: {
"margin-top": 100,
"margin-bottom": 30,
"background-color": "#fff"
},
scaleX: {
values: ["Q1", "Q2", "Q3", "Q4"],
lineColor: "#7d7d7d",
tick: {
lineColor: "#7d7d7d"
},
guide: {
visible: false
},
markers: [{
type: "area",
range: [1.5, 2.5],
backgroundColor: "red",
alpha: 0.2,
label: {
text: "Netflix reduces fee",
angle: 0,
"offset-x": 13,
"offset-y": -210,
color: "#7d7d7d"
}
}]
},
scaleY: {
lineColor: "#7d7d7d",
tick: {
lineColor: "#7d7d7d"
},
format: "$%v",
short: true
},
legend: {
borderRadius: "3px",
borderColor: "none",
backgroundColor: "none",
layout: "h",
verticalAlign: "bottom",
align: "center",
shadow: false,
marker: {
borderRadius: "2px",
borderColor: "none"
}
},
tooltip: {
borderRadius: "3px",
borderColor: "#F4F2F2",
borderWidth: 2,
width: 90,
callout: true,
height: 50,
fontSize: 12,
shadow: false,
text: "%kt: $%v in %t Sales",
short: true,
"short-unit": "M",
decimals: 1,
rules: [{
rule: "%p === 0 && %i === 3 || %p === 1 && %i === 3",
text: "%kt Projected: $%v in %t Sales",
backgroundColor: "#7d7d7d"
}]
},
plot: {
alpha: 0.8,
borderRadius: "3px",
rules: [{
rule: "%p === 0 && %i === 3",
backgroundColor: "none",
"line-style": "dashed",
"border-color": "#447884",
"border-width": 1
},
{
rule: "%p === 1 && %i === 3",
backgroundColor: "none",
"line-style": "dashed",
"border-color": "#ff9800",
"border-width": 1
},
]
},
labels: [{
"text": "Adjust Projections",
fontSize: 12,
y: 4,
x: 38
},
{
text: "Internet:",
y: 30,
x: 20
},
{
text: "Cable:",
y: 60,
x: 28
},
{
id: "i10plus",
text: "+10%",
y: 30,
x: 70,
backgroundColor: "white",
borderColor: "#7d7d7d",
borderWidth: 1,
borderRadius: 3,
width: 35,
hoverState: {
backgroundColor: "#333",
borderColor: "#fff",
color: "#fff"
}
},
{
id: "i10minus",
text: "-10%",
y: 30,
x: 110,
backgroundColor: "white",
borderColor: "#7d7d7d",
borderWidth: 1,
borderRadius: 3,
width: 35,
hoverState: {
backgroundColor: "#333",
borderColor: "#fff",
color: "#fff"
}
},
{
id: "c10plus",
text: "+10%",
y: 60,
x: 70,
backgroundColor: "white",
borderColor: "#7d7d7d",
borderWidth: 1,
borderRadius: 3,
width: 35,
hoverState: {
backgroundColor: "#333",
borderColor: "#fff",
color: "#fff"
}
},
{
id: "c10minus",
text: "-10%",
y: 60,
x: 110,
backgroundColor: "white",
borderColor: "#7d7d7d",
borderWidth: 1,
borderRadius: 3,
width: 35,
hoverState: {
backgroundColor: "#333",
borderColor: "#fff",
color: "#fff"
}
}
],
series: [{
values: [3500000, 4200000, 6700000, 8900000],
backgroundColor: "#447884 #69a3af",
text: "Internet"
},
{
values: [2800000, 4000000, 3900000, 3600000],
backgroundColor: "#ff9800 #f2b157",
text: "Cable"
}
]
}
zingchart.render({
id: 'myChart',
data: myConfig,
height: 400,
width: 600,
events: {
label_click: function(p) {
console.log(p);
var nodeValue;
switch (p.labelid) {
case 'i10minus':
nodeValue = zingchart.exec("myChart", "getnodevalue", {
"plotindex": 0,
"nodeindex": 3,
});
zingchart.exec('myChart', "setnodevalue", {
"plotindex": 0,
"nodeindex": 3,
"value": (nodeValue - (nodeValue * 0.1))
});
break;
case 'i10plus':
nodeValue = zingchart.exec("myChart", "getnodevalue", {
"plotindex": 0,
"nodeindex": 3,
});
zingchart.exec('myChart', "setnodevalue", {
"plotindex": 0,
"nodeindex": 3,
"value": (nodeValue + (nodeValue * 0.1))
});
break;
case 'c10minus':
nodeValue = zingchart.exec("myChart", "getnodevalue", {
"plotindex": 1,
"nodeindex": 3,
});
zingchart.exec('myChart', "setnodevalue", {
"plotindex": 1,
"nodeindex": 3,
"value": (nodeValue - (nodeValue * 0.1))
});
break;
case 'c10plus':
nodeValue = zingchart.exec("myChart", "getnodevalue", {
"plotindex": 1,
"nodeindex": 3,
});
zingchart.exec('myChart', "setnodevalue", {
"plotindex": 1,
"nodeindex": 3,
"value": (nodeValue + (nodeValue * 0.1))
});
break;
}
}
}
});