<!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-color: #fff;
}
.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"]; // CHART CONFIG
// -----------------------------
let chartConfig = {
type: 'mixed',
title: {
text: 'Sample Burndown Chart',
align: 'left',
marginLeft: '23%',
},
legend: {
adjustLayout: true,
verticalAlign: 'middle',
},
scaleX: {
labels: [
'Day 1',
'Day 2',
'Day 3',
'Day 4',
'Day 5',
'Day 6',
'Day 7',
'Day 8',
], // one label for every datapoint
},
scaleY: {
guide: {
// dashed lines
visible: false,
},
label: {
text: 'Remaing effort (hours)',
fontSize: '14px',
},
},
scaleY2: {
label: {
text: 'Remaing and completed tasks',
fontSize: '14px',
},
maxValue: 100,
minValue: 0,
step: 25, // can define scale step values or default
},
crosshairX: {
lineColor: '#424242',
lineGapSize: '4px',
lineStyle: 'dotted',
plotLabel: {
padding: '15px',
backgroundColor: 'white',
bold: true,
borderColor: '#e3e3e3',
borderRadius: '5px',
fontColor: '#2f2f2f',
fontFamily: 'Lato',
fontSize: '12px',
shadow: true,
shadowAlpha: 0.2,
shadowBlur: 5,
shadowColor: '#a1a1a1',
shadowDistance: 4,
textAlign: 'left',
},
scaleLabel: {
backgroundColor: '#424242',
},
},
series: [{
type: 'line',
text: 'Remaining Tasks',
values: [35, 42, 67, 89, 25, 34, 67, 85].sort().reverse(),
lineColor: '#42a5f5',
marker: {
visible: false,
},
scales: 'scale-x, scale-y',
},
{
type: 'line',
text: 'Remaining Effort',
values: [25, 32, 57, 79, 15, 24, 57, 75].sort().reverse(),
lineColor: '#5c6bc0',
marker: {
type: 'square',
backgroundColor: '#5c6bc0',
},
scales: 'scale-x, scale-y',
},
{
type: 'line',
text: 'Completed Tasks',
values: [90, 80, 70, 60, 50, 40, 30, 20],
lineColor: '#66bb6a',
marker: {
visible: false,
},
scales: 'scale-x, scale-y',
},
{
type: 'bar',
text: 'Completed Tasks',
values: [5, 10, 6, 3, 6, 2, 0, 9],
backgroundColor: '#ffa726',
scales: 'scale-x, scale-y-2',
},
],
};
// RENDER CHARTS
// -----------------------------
zingchart.render({
id: 'myChart',
data: chartConfig,
height: '100%',
width: '100%',
});
</script>
</body>
</html>
// CHART CONFIG
// -----------------------------
let chartConfig = {
type: 'mixed',
title: {
text: 'Sample Burndown Chart',
align: 'left',
marginLeft: '23%',
},
legend: {
adjustLayout: true,
verticalAlign: 'middle',
},
scaleX: {
labels: [
'Day 1',
'Day 2',
'Day 3',
'Day 4',
'Day 5',
'Day 6',
'Day 7',
'Day 8',
], // one label for every datapoint
},
scaleY: {
guide: {
// dashed lines
visible: false,
},
label: {
text: 'Remaing effort (hours)',
fontSize: '14px',
},
},
scaleY2: {
label: {
text: 'Remaing and completed tasks',
fontSize: '14px',
},
maxValue: 100,
minValue: 0,
step: 25, // can define scale step values or default
},
crosshairX: {
lineColor: '#424242',
lineGapSize: '4px',
lineStyle: 'dotted',
plotLabel: {
padding: '15px',
backgroundColor: 'white',
bold: true,
borderColor: '#e3e3e3',
borderRadius: '5px',
fontColor: '#2f2f2f',
fontFamily: 'Lato',
fontSize: '12px',
shadow: true,
shadowAlpha: 0.2,
shadowBlur: 5,
shadowColor: '#a1a1a1',
shadowDistance: 4,
textAlign: 'left',
},
scaleLabel: {
backgroundColor: '#424242',
},
},
series: [
{
type: 'line',
text: 'Remaining Tasks',
values: [35, 42, 67, 89, 25, 34, 67, 85].sort().reverse(),
lineColor: '#42a5f5',
marker: {
visible: false,
},
scales: 'scale-x, scale-y',
},
{
type: 'line',
text: 'Remaining Effort',
values: [25, 32, 57, 79, 15, 24, 57, 75].sort().reverse(),
lineColor: '#5c6bc0',
marker: {
type: 'square',
backgroundColor: '#5c6bc0',
},
scales: 'scale-x, scale-y',
},
{
type: 'line',
text: 'Completed Tasks',
values: [90, 80, 70, 60, 50, 40, 30, 20],
lineColor: '#66bb6a',
marker: {
visible: false,
},
scales: 'scale-x, scale-y',
},
{
type: 'bar',
text: 'Completed Tasks',
values: [5, 10, 6, 3, 6, 2, 0, 9],
backgroundColor: '#ffa726',
scales: 'scale-x, scale-y-2',
},
],
};
// RENDER CHARTS
// -----------------------------
zingchart.render({
id: 'myChart',
data: chartConfig,
height: '100%',
width: '100%',
});
