<!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>
.zc-body {
background: #f3f3f3;
}
.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"];
let _r_ = function(min, max) {
return Math.round(min + (max - min) * Math.random());
};
let aBarColors = [
['#D67F7F', '#C85454', '#BA2929', '#8C1F1F'],
['#9F8EA7', '#7F698A', '#5F436D', '#473252'],
['#7DBEDA', '#52A9CD', '#2793C1', '#1D6E91'],
];
let aData = [],
p,
y,
m,
ymin = 2015,
ymax = 2018,
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));
}
let chartConfig = {
type: 'mixed',
backgroundColor: '#f3f3f3',
clustered: true,
plot: {
tooltip: {
fontSize: '13px',
padding: '10px',
short: true,
text: '%data-indicator: $%node-value',
},
animation: {
speed: 300,
effect: 'ANIMATION_FADE_IN',
sequence: 'ANIMATION_BY_NODE',
},
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: {
ranged: true,
values: ['Apple', 'Dell', 'Microsoft'],
},
scaleY: {
short: true,
scaleFactor: 3,
},
series: [{
type: 'line',
values: aData3,
dataIndicator: 'Capital estimated for 2019',
lineWidth: '5px',
lineColor: '#369',
marker: {
type: 'diamond',
size: '6px',
backgroundColor: '#69c',
},
tooltip: {
decimals: 2,
},
valueBox: {
text: '$%node-value',
short: true,
decimals: 2,
},
}, ],
};
for (p = 0; p < 3; p++) {
for (y = ymin; y <= ymax; y++) {
let sdata = {
type: 'vbar',
stacked: true,
stack: p,
clustered: true,
clusterIndex: p,
barsSpaceLeft: 0.1,
barsSpaceRight: 0.1,
borderTop: '1px solid #ccc',
dataIndicator: 'Sells in %data-month ' + y,
values: aData[p][y],
backgroundColor: aBarColors[p][y - ymin],
};
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],
});
}
zingchart.render({
id: 'myChart',
width: '100%',
height: '100%',
data: chartConfig,
});
</script>
</body>
</html>
let _r_ = function (min, max) {
return Math.round(min + (max - min) * Math.random());
};
let aBarColors = [
['#D67F7F', '#C85454', '#BA2929', '#8C1F1F'],
['#9F8EA7', '#7F698A', '#5F436D', '#473252'],
['#7DBEDA', '#52A9CD', '#2793C1', '#1D6E91'],
];
let aData = [],
p,
y,
m,
ymin = 2015,
ymax = 2018,
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));
}
let chartConfig = {
type: 'mixed',
backgroundColor: '#f3f3f3',
clustered: true,
plot: {
tooltip: {
fontSize: '13px',
padding: '10px',
short: true,
text: '%data-indicator: $%node-value',
},
animation: {
speed: 300,
effect: 'ANIMATION_FADE_IN',
sequence: 'ANIMATION_BY_NODE',
},
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: {
ranged: true,
values: ['Apple', 'Dell', 'Microsoft'],
},
scaleY: {
short: true,
scaleFactor: 3,
},
series: [
{
type: 'line',
values: aData3,
dataIndicator: 'Capital estimated for 2019',
lineWidth: '5px',
lineColor: '#369',
marker: {
type: 'diamond',
size: '6px',
backgroundColor: '#69c',
},
tooltip: {
decimals: 2,
},
valueBox: {
text: '$%node-value',
short: true,
decimals: 2,
},
},
],
};
for (p = 0; p < 3; p++) {
for (y = ymin; y <= ymax; y++) {
let sdata = {
type: 'vbar',
stacked: true,
stack: p,
clustered: true,
clusterIndex: p,
barsSpaceLeft: 0.1,
barsSpaceRight: 0.1,
borderTop: '1px solid #ccc',
dataIndicator: 'Sells in %data-month ' + y,
values: aData[p][y],
backgroundColor: aBarColors[p][y - ymin],
};
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],
});
}
zingchart.render({
id: 'myChart',
width: '100%',
height: '100%',
data: chartConfig,
});
