<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ZingSoft Demo</title>
<script src="https://cdn.zingchart.com/zingchart.min.js"></script>
<style>
.chart--container {
min-height: 530px;
width: 100%;
height: 100%;
}
.zc-ref {
display: none;
}
</style>
</head>
<body>
<div id="myChart" class="chart--container"><a class="zc-ref" href="https://www.zingchart.com/">Powered by ZingChart</a></div>
<script>
ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"];
let colors = {
gray: '#EBEBEB',
grayDark: '#3F3F3F'
};
let randomVal = (min, max, num) => {
let aData = [];
for (let i = 0; i < num; i++) {
let val = ((Math.random() * (max - min)) + min);
aData.push(parseInt(val));
}
return aData;
}
let chartConfig = {
type: 'area',
plot: {
animation: {
delay: 400,
effect: 'ANIMATION_EXPAND_TOP',
method: 'ANIMATION_BOUNCE_EASE_OUT',
sequence: 'ANIMATION_NO_SEQUENCE',
speed: 500
},
aspect: 'spline'
},
scaleX: {
guide: {
alpha: 1,
lineColor: colors.gray,
lineStyle: 'solid'
},
item: {
color: colors.grayDark
},
lineColor: colors.gray,
lineWidth: '1px',
tick: {
lineColor: '#C7C7C7',
lineWidth: '1px'
},
},
scaleY: {
guide: {
alpha: 1,
lineColor: colors.gray,
lineStyle: 'solid'
},
item: {
color: colors.grayDark
},
lineColor: colors.gray,
lineWidth: '1px',
step: 10,
tick: {
lineColor: '#C7C7C7',
lineWidth: '1px'
}
},
tooltip: {
text: '%kl<br><span style=\'color:%color\'>%t: </span>%v<br>',
padding: '15px',
backgroundColor: 'white',
bold: true,
borderColor: '#e3e3e3',
borderRadius: '5px',
fontColor: '#2f2f2f',
fontSize: '12px',
shadow: true,
shadowAlpha: 0.2,
shadowBlur: 5,
shadowColor: '#a1a1a1',
shadowDistance: 4,
textAlign: 'left',
visible: true
},
series: [{
values: randomVal(22, 42, 10),
backgroundColor: '#80DEEA',
lineColor: '#80DEEA',
lineWidth: '2px',
marker: {
backgroundColor: '#80DEEA'
}
},
{
values: randomVal(7, 32, 10),
backgroundColor: '#69F0AE',
lineColor: '#69F0AE',
lineWidth: '2px',
marker: {
backgroundColor: '#69F0AE'
}
}
]
}
zingchart.render({
id: 'myChart',
data: chartConfig,
height: '100%',
width: '100%',
});
</script>
</body>
</html>
let colors = {
gray: '#EBEBEB',
grayDark: '#3F3F3F'
};
let randomVal = (min, max, num) => {
let aData = [];
for (let i = 0; i < num; i++) {
let val = ((Math.random() * (max - min)) + min);
aData.push(parseInt(val));
}
return aData;
}
let chartConfig = {
type: 'area',
plot: {
animation: {
delay: 400,
effect: 'ANIMATION_EXPAND_TOP',
method: 'ANIMATION_BOUNCE_EASE_OUT',
sequence: 'ANIMATION_NO_SEQUENCE',
speed: 500
},
aspect: 'spline'
},
scaleX: {
guide: {
alpha: 1,
lineColor: colors.gray,
lineStyle: 'solid'
},
item: {
color: colors.grayDark
},
lineColor: colors.gray,
lineWidth: '1px',
tick: {
lineColor: '#C7C7C7',
lineWidth: '1px'
},
},
scaleY: {
guide: {
alpha: 1,
lineColor: colors.gray,
lineStyle: 'solid'
},
item: {
color: colors.grayDark
},
lineColor: colors.gray,
lineWidth: '1px',
step: 10,
tick: {
lineColor: '#C7C7C7',
lineWidth: '1px'
}
},
tooltip: {
text: '%kl<br><span style=\'color:%color\'>%t: </span>%v<br>',
padding: '15px',
backgroundColor: 'white',
bold: true,
borderColor: '#e3e3e3',
borderRadius: '5px',
fontColor: '#2f2f2f',
fontSize: '12px',
shadow: true,
shadowAlpha: 0.2,
shadowBlur: 5,
shadowColor: '#a1a1a1',
shadowDistance: 4,
textAlign: 'left',
visible: true
},
series: [
{
values: randomVal(22, 42, 10),
backgroundColor: '#80DEEA',
lineColor: '#80DEEA',
lineWidth: '2px',
marker: {
backgroundColor: '#80DEEA'
}
},
{
values: randomVal(7, 32, 10),
backgroundColor: '#69F0AE',
lineColor: '#69F0AE',
lineWidth: '2px',
marker: {
backgroundColor: '#69F0AE'
}
}
]
}
zingchart.render({
id: 'myChart',
data: chartConfig,
height: '100%',
width: '100%',
});