<!doctype html>
<html class="zc-html">
<head>
<meta charset="utf-8">
<title>ZingSoft Demo</title>
<script nonce="undefined" src="https://cdn.zingchart.com/zingchart.min.js"></script>
<style>
.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"]; // HELPER METHODS
// -----------------------------
let _r_ = (min, max) => {
return Math.round(min + (max - min) * Math.random());
};
// DEFINE DATA
// -----------------------------
let aBarColors = [
['#D67F7F', '#C85454', '#BA2929', '#8C1F1F'],
['#9F8EA7', '#7F698A', '#5F436D', '#473252'],
['#7DBEDA', '#52A9CD', '#2793C1', '#1D6E91'],
];
let aData = [],
p,
y,
m,
ymin = 2016,
ymax = 2019,
aData2 = [],
aData3 = [];
for (p = 0; p < 3; p++) {
aData[p] = [];
for (y = ymin; y <= ymax; y++) {
aData[p][y] = [];
for (m = 0; m < 12; m++) {
aData[p][y].push(_r_(1000000, 2000000));
}
}
aData2[p] = [];
for (m = 0; m < 12; m++) {
aData2[p].push(_r_(1000000, 1200000));
}
aData3.push(_r_(10000000, 12000000));
}
// CHART CONFIG
// -----------------------------
let chartConfig = {
type: 'mixed',
backgroundColor: '#f3f3f3',
clustered: true,
plot: {
tooltip: {
text: '%data-indicator: $%node-value',
padding: '10px',
fontSize: '13px',
short: true,
},
animation: {
effect: 'ANIMATION_FADE_IN',
sequence: 'ANIMATION_BY_NODE',
speed: 300,
},
dataMon: ['J', 'F', 'M', 'A', 'M', 'J', 'J', 'A', 'S', 'O', 'N', 'D'],
dataMonth: [
'Jan',
'Feb',
'Mar',
'Apr',
'May',
'Jun',
'Jul',
'Aug',
'Sep',
'Oct',
'Nov',
'Dec',
],
hoverState: {
visible: false,
},
},
plotarea: {
margin: 'dynamic',
},
scaleX: {
values: ['Apple', 'Dell', 'Microsoft'],
ranged: true,
},
scaleY: {
scaleFactor: 3,
short: true,
},
series: [{
type: 'line',
values: aData3,
dataIndicator: 'Capital estimated for 2019',
lineColor: '#369',
lineWidth: '5px',
marker: {
type: 'diamond',
backgroundColor: '#69c',
size: '6px',
},
tooltip: {
decimals: 2,
},
valueBox: {
text: '$%node-value',
decimals: 2,
short: true,
},
}, ],
};
for (p = 0; p < 3; p++) {
for (y = ymin; y <= ymax; y++) {
let sdata = {
type: 'vbar',
values: aData[p][y],
backgroundColor: aBarColors[p][y - ymin],
barsSpaceLeft: 0.1,
barsSpaceRight: 0.1,
borderTop: '1px solid #ccc',
clustered: true,
clusterIndex: p,
dataIndicator: 'Sells in %data-month ' + y,
stack: p,
stacked: true,
};
if (y === ymin) {
sdata.valueBox = {
placement: 'bottom-in',
text: '%data-mon',
color: '#fff',
shadow: false,
fontSize: '10px',
};
} else if (y === ymax) {
sdata.valueBox = {
placement: 'top-out',
text: '%stack-total',
short: true,
decimals: 2,
color: '#000',
angle: 270,
offsetY: '-10px',
};
}
chartConfig['series'].push(sdata);
}
}
for (p = 0; p < 3; p++) {
chartConfig['series'].push({
type: 'line',
clustered: true,
clusterIndex: p,
clusterOffset: 30,
lineColor: '#000',
marker: {
backgroundColor: '#666',
},
dataIndicator: 'Total Losses/Returns',
values: aData2[p],
});
}
// RENDER CHARTS
// -----------------------------
window.addEventListener('load', () => {
zingchart.render({
id: 'myChart',
data: chartConfig,
output: 'svg',
});
});
</script>
</body>
</html>
// HELPER METHODS
// -----------------------------
let _r_ = (min, max) => {
return Math.round(min + (max - min) * Math.random());
};
// DEFINE DATA
// -----------------------------
let aBarColors = [
['#D67F7F', '#C85454', '#BA2929', '#8C1F1F'],
['#9F8EA7', '#7F698A', '#5F436D', '#473252'],
['#7DBEDA', '#52A9CD', '#2793C1', '#1D6E91'],
];
let aData = [],
p,
y,
m,
ymin = 2016,
ymax = 2019,
aData2 = [],
aData3 = [];
for (p = 0; p < 3; p++) {
aData[p] = [];
for (y = ymin; y <= ymax; y++) {
aData[p][y] = [];
for (m = 0; m < 12; m++) {
aData[p][y].push(_r_(1000000, 2000000));
}
}
aData2[p] = [];
for (m = 0; m < 12; m++) {
aData2[p].push(_r_(1000000, 1200000));
}
aData3.push(_r_(10000000, 12000000));
}
// CHART CONFIG
// -----------------------------
let chartConfig = {
type: 'mixed',
backgroundColor: '#f3f3f3',
clustered: true,
plot: {
tooltip: {
text: '%data-indicator: $%node-value',
padding: '10px',
fontSize: '13px',
short: true,
},
animation: {
effect: 'ANIMATION_FADE_IN',
sequence: 'ANIMATION_BY_NODE',
speed: 300,
},
dataMon: ['J', 'F', 'M', 'A', 'M', 'J', 'J', 'A', 'S', 'O', 'N', 'D'],
dataMonth: [
'Jan',
'Feb',
'Mar',
'Apr',
'May',
'Jun',
'Jul',
'Aug',
'Sep',
'Oct',
'Nov',
'Dec',
],
hoverState: {
visible: false,
},
},
plotarea: {
margin: 'dynamic',
},
scaleX: {
values: ['Apple', 'Dell', 'Microsoft'],
ranged: true,
},
scaleY: {
scaleFactor: 3,
short: true,
},
series: [
{
type: 'line',
values: aData3,
dataIndicator: 'Capital estimated for 2019',
lineColor: '#369',
lineWidth: '5px',
marker: {
type: 'diamond',
backgroundColor: '#69c',
size: '6px',
},
tooltip: {
decimals: 2,
},
valueBox: {
text: '$%node-value',
decimals: 2,
short: true,
},
},
],
};
for (p = 0; p < 3; p++) {
for (y = ymin; y <= ymax; y++) {
let sdata = {
type: 'vbar',
values: aData[p][y],
backgroundColor: aBarColors[p][y - ymin],
barsSpaceLeft: 0.1,
barsSpaceRight: 0.1,
borderTop: '1px solid #ccc',
clustered: true,
clusterIndex: p,
dataIndicator: 'Sells in %data-month ' + y,
stack: p,
stacked: true,
};
if (y === ymin) {
sdata.valueBox = {
placement: 'bottom-in',
text: '%data-mon',
color: '#fff',
shadow: false,
fontSize: '10px',
};
} else if (y === ymax) {
sdata.valueBox = {
placement: 'top-out',
text: '%stack-total',
short: true,
decimals: 2,
color: '#000',
angle: 270,
offsetY: '-10px',
};
}
chartConfig['series'].push(sdata);
}
}
for (p = 0; p < 3; p++) {
chartConfig['series'].push({
type: 'line',
clustered: true,
clusterIndex: p,
clusterOffset: 30,
lineColor: '#000',
marker: {
backgroundColor: '#666',
},
dataIndicator: 'Total Losses/Returns',
values: aData2[p],
});
}
// RENDER CHARTS
// -----------------------------
window.addEventListener('load', () => {
zingchart.render({
id: 'myChart',
data: chartConfig,
output: 'svg',
});
});
