<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ZingSoft Demo</title>
<script nonce="undefined" src="https://cdn.zingchart.com/zingchart.min.js"></script>
<style>
.zc-background {
background-color: #fff;
}
.chart--container {
height: 100%;
width: 100%;
min-height: 530px;
}
.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 chartConfig = {
type: 'scatter',
theme: 'classic',
backgroundColor: '#FFFFFF',
title: {
text: 'Blood Sugar Levels',
backgroundColor: 'gray',
bold: false,
fontColor: '#FFFFFF',
fontFamily: 'arial',
fontSize: '20px',
y: '15px'
},
plot: {
tooltip: {
visible: false
}
},
plotarea: {
margin: '60px 50px 50px 50px'
},
scaleX: {
values: '0:8:1',
guide: {
visible: false
},
item: {
paddingBottom: '55px',
bold: false,
fontColor: '#8B8B8B',
fontFamily: 'arial',
fontSize: '18px'
},
labels: ['Start', '1', '2', '3', '4', '5', '6', '7', 'End'],
tick: {
placement: 'cross',
size: '12px'
}
},
scaleY: {
values: '0:165:15',
guide: {
lineColor: '#CFCFCF',
lineStyle: 'solid'
},
item: {
paddingRight: '5px',
fontColor: '#8B8B8B',
fontFamily: 'arial',
fontSize: '18px'
},
labels: ['', '', '', '45', '', '', '', '', '120', '', '', ''],
lineColor: 'none',
markers: [{
type: 'area',
alpha: 0.03,
backgroundColor: '#EF9332',
range: [120, 165]
},
{
type: 'area',
alpha: 0.2,
backgroundColor: '#11B4D9',
range: [45, 120]
},
{
type: 'area',
alpha: 0.03,
backgroundColor: '#EF9332',
range: [0, 45]
}
],
minorGuide: {
lineColor: 'gray',
lineStyle: 'solid'
},
minorTick: {
lineColor: 'none'
},
minorTicks: 3,
tick: {
visible: false
}
},
scaleY2: {
values: '0:165:15',
guide: {
visible: false
},
item: {
paddingRight: '5px',
bold: false,
fontColor: '#8B8B8B',
fontFamily: 'arial',
fontSize: '18px'
},
labels: ['', '', '', '45', '', '', '', '', '120', '', '', ''],
lineColor: 'none',
tick: {
visible: false
}
},
crosshairX: {
exact: true,
lineColor: '#11B4D9',
lineWidth: '2px',
plotLabel: {
padding: '10px',
borderRadius: '5px',
fontWeight: 'none',
multiple: true
},
scaleLabel: {
backgroundColor: 'gray',
borderRadius: '5px',
fontColor: '#FFFFFF',
fontFamily: 'arial',
fontSize: '16px',
offsetY: '5px',
width: '25px'
}
},
series: [{
values: [
[1, 105],
[1, 80],
[1, 60],
[2, 77],
[2, 68],
[3, 100],
[3, 74],
[3, 66],
[4, 115],
[4, 105],
[4, 95],
[4, 60],
[5, 119],
[5, 115],
[5, 107],
[5, 100],
[6, 70],
[6, 60],
[7, 62],
[7, 55]
],
marker: {
backgroundColor: '#11B4D9',
borderColor: 'gray',
shadow: false
}
},
{
values: [
[2, 134],
[2, 38],
[3, 125],
[4, 35],
[5, 130],
[6, 135],
[6, 125],
[7, 121]
],
marker: {
backgroundColor: '#EF9332',
borderColor: 'gray',
shadow: false,
size: '5px'
}
},
{
values: [
[2, 160],
[2, 15],
[3, 140],
[3, 40],
[4, 25],
[5, 140],
[6, 160],
[6, 44]
],
marker: {
backgroundColor: '#EF9332',
borderColor: 'gray',
shadow: false,
size: '10px'
}
}
]
};
zingchart.render({
id: 'myChart',
data: chartConfig,
height: '100%',
width: '100%',
});
</script>
</body>
</html>
let chartConfig = {
type: 'scatter',
theme: 'classic',
backgroundColor: '#FFFFFF',
title: {
text: 'Blood Sugar Levels',
backgroundColor: 'gray',
bold: false,
fontColor: '#FFFFFF',
fontFamily: 'arial',
fontSize: '20px',
y: '15px'
},
plot: {
tooltip: {
visible: false
}
},
plotarea: {
margin: '60px 50px 50px 50px'
},
scaleX: {
values: '0:8:1',
guide: {
visible: false
},
item: {
paddingBottom: '55px',
bold: false,
fontColor: '#8B8B8B',
fontFamily: 'arial',
fontSize: '18px'
},
labels: ['Start', '1', '2', '3', '4', '5', '6', '7', 'End'],
tick: {
placement: 'cross',
size: '12px'
}
},
scaleY: {
values: '0:165:15',
guide: {
lineColor: '#CFCFCF',
lineStyle: 'solid'
},
item: {
paddingRight: '5px',
fontColor: '#8B8B8B',
fontFamily: 'arial',
fontSize: '18px'
},
labels: ['', '', '', '45', '', '', '', '', '120', '', '', ''],
lineColor: 'none',
markers: [
{
type: 'area',
alpha: 0.03,
backgroundColor: '#EF9332',
range: [120, 165]
},
{
type: 'area',
alpha: 0.2,
backgroundColor: '#11B4D9',
range: [45, 120]
},
{
type: 'area',
alpha: 0.03,
backgroundColor: '#EF9332',
range: [0, 45]
}
],
minorGuide: {
lineColor: 'gray',
lineStyle: 'solid'
},
minorTick: {
lineColor: 'none'
},
minorTicks: 3,
tick: {
visible: false
}
},
scaleY2: {
values: '0:165:15',
guide: {
visible: false
},
item: {
paddingRight: '5px',
bold: false,
fontColor: '#8B8B8B',
fontFamily: 'arial',
fontSize: '18px'
},
labels: ['', '', '', '45', '', '', '', '', '120', '', '', ''],
lineColor: 'none',
tick: {
visible: false
}
},
crosshairX: {
exact: true,
lineColor: '#11B4D9',
lineWidth: '2px',
plotLabel: {
padding: '10px',
borderRadius: '5px',
fontWeight: 'none',
multiple: true
},
scaleLabel: {
backgroundColor: 'gray',
borderRadius: '5px',
fontColor: '#FFFFFF',
fontFamily: 'arial',
fontSize: '16px',
offsetY: '5px',
width: '25px'
}
},
series: [
{
values: [[1, 105], [1, 80], [1, 60], [2, 77], [2, 68], [3, 100], [3, 74], [3, 66], [4, 115], [4, 105], [4, 95], [4, 60], [5, 119], [5, 115], [5, 107], [5, 100], [6, 70], [6, 60], [7, 62], [7, 55]],
marker: {
backgroundColor: '#11B4D9',
borderColor: 'gray',
shadow: false
}
},
{
values: [[2, 134], [2, 38], [3, 125], [4, 35], [5, 130], [6, 135], [6, 125], [7, 121]],
marker: {
backgroundColor: '#EF9332',
borderColor: 'gray',
shadow: false,
size: '5px'
}
},
{
values: [[2, 160], [2, 15], [3, 140], [3, 40], [4, 25], [5, 140], [6, 160], [6, 44]],
marker: {
backgroundColor: '#EF9332',
borderColor: 'gray',
shadow: false,
size: '10px'
}
}
]
};
zingchart.render({
id: 'myChart',
data: chartConfig,
height: '100%',
width: '100%',
});
