<!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>
.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: {
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
},
tooltip: {
text: '%data-indicator: $%node-value',
padding: '10px',
fontSize: '13px',
short: true
},
series: [{
type: 'line',
values: aData3,
tooltip: {
decimals: 2
},
valueBox: {
text: '$%node-value',
decimals: 2,
short: true
},
dataIndicator: 'Capital estimated for 2019',
lineColor: '#369',
lineWidth: '5px',
marker: {
type: 'diamond',
backgroundColor: '#69c',
size: '6px'
}
}]
};
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: {
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
},
tooltip: {
text: '%data-indicator: $%node-value',
padding: '10px',
fontSize: '13px',
short: true
},
series: [
{
type: 'line',
values: aData3,
tooltip: {
decimals: 2
},
valueBox: {
text: '$%node-value',
decimals: 2,
short: true
},
dataIndicator: 'Capital estimated for 2019',
lineColor: '#369',
lineWidth: '5px',
marker: {
type: 'diamond',
backgroundColor: '#69c',
size: '6px'
}
}
]
};
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'
});
});
