<!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>
.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: 'range',
backgroundColor: '#ffffff',
guide: {
marker: {
type: 'triangle',
size: '7px'
},
plotLabel: {
text: '<span style="color:%color">%t</span><span style="color:%color"> Min: %node-min-value Max: %node-max-value</span> ',
backgroundColor: '#000',
borderRadius: '5px',
fontColor: '#FFF',
fontSize: '15px',
headerText: '%kt'
}
},
title: {
text: 'Average Temperature',
backgroundColor: '#ffffff',
fontColor: '#000'
},
legend: {
align: 'center',
backgroundColor: '#e0e0e0',
borderColor: '#fff',
layout: 'x4',
shadow: false,
verticalAlign: 'bottom'
},
plot: {
alphaArea: 1,
aspect: 'spline',
hoverState: {
backgroundColor: 'none'
},
lineWidth: '0px',
marker: {
visible: false
}
},
scaleX: {
guide: {
alpha: 1,
lineStyle: 'solid',
lineWidth: '1px'
},
item: {
offsetX: '0px',
textAlign: 'left'
},
label: {
text: 'Year'
},
labels: ['01/2017', '01/2018', '01/2019', '01/2020', '01/2021', '01/2022'],
lineWidth: '1px',
tick: {
lineWidth: '1px',
placement: 'outer',
size: '10px'
}
},
scaleY: {
label: {
text: 'Celsius'
},
lineWidth: '1px',
tick: {
lineWidth: '1px'
}
},
tooltip: {
visible: false
},
series: [{
text: 'Pacific Ocean',
values: [
[5, 12],
[2, 10],
[6, 14],
[4, 14],
[5, 16],
[6, 15]
],
backgroundColor: '#0ce9d1',
lineColor: '#0ce9d1'
},
{
text: 'Atlantic Ocean',
values: [
[6, 10],
[4, 6],
[7, 13],
[6, 12],
[8, 14],
[6, 14]
],
backgroundColor: '#e7ffcc',
lineColor: '#e7ffcc'
},
{
text: 'Southern Ocean',
values: [
[7, 8],
[4, 6],
[8, 9],
[6, 12],
[9, 12],
[6, 14]
],
backgroundColor: '#ccfff9',
lineColor: '#ccfff9'
},
{
text: 'Indian Ocean',
values: [
[7, 8],
[4, 5],
[8, 9],
[6, 8],
[9, 11],
[9, 13]
],
backgroundColor: '#8bdceb',
lineColor: '#8bdceb'
}
]
}
// RENDER CHARTS
// -----------------------------
zingchart.render({
id: 'myChart',
data: chartConfig,
height: '100%',
width: '100%',
});
</script>
</body>
</html>
// CHART CONFIG
// -----------------------------
let chartConfig = {
type: 'range',
backgroundColor: '#ffffff',
guide: {
marker: {
type: 'triangle',
size: '7px'
},
plotLabel: {
text: '<span style="color:%color">%t</span><span style="color:%color"> Min: %node-min-value Max: %node-max-value</span> ',
backgroundColor: '#000',
borderRadius: '5px',
fontColor: '#FFF',
fontSize: '15px',
headerText: '%kt'
}
},
title: {
text: 'Average Temperature',
backgroundColor: '#ffffff',
fontColor: '#000'
},
legend: {
align: 'center',
backgroundColor: '#e0e0e0',
borderColor: '#fff',
layout: 'x4',
shadow: false,
verticalAlign: 'bottom'
},
plot: {
alphaArea: 1,
aspect: 'spline',
hoverState: {
backgroundColor: 'none'
},
lineWidth: '0px',
marker: {
visible: false
}
},
scaleX: {
guide: {
alpha: 1,
lineStyle: 'solid',
lineWidth: '1px'
},
item: {
offsetX: '0px',
textAlign: 'left'
},
label: {
text: 'Year'
},
labels: ['01/2017', '01/2018', '01/2019', '01/2020', '01/2021', '01/2022'],
lineWidth: '1px',
tick: {
lineWidth: '1px',
placement: 'outer',
size: '10px'
}
},
scaleY: {
label: {
text: 'Celsius'
},
lineWidth: '1px',
tick: {
lineWidth: '1px'
}
},
tooltip: {
visible: false
},
series: [
{
text: 'Pacific Ocean',
values: [[5, 12], [2, 10], [6, 14], [4, 14], [5, 16], [6, 15]],
backgroundColor: '#0ce9d1',
lineColor: '#0ce9d1'
},
{
text: 'Atlantic Ocean',
values: [[6, 10], [4, 6], [7, 13], [6, 12], [8, 14], [6, 14]],
backgroundColor: '#e7ffcc',
lineColor: '#e7ffcc'
},
{
text: 'Southern Ocean',
values: [[7, 8], [4, 6], [8, 9], [6, 12], [9, 12], [6, 14]],
backgroundColor: '#ccfff9',
lineColor: '#ccfff9'
},
{
text: 'Indian Ocean',
values: [[7, 8], [4, 5], [8, 9], [6, 8], [9, 11], [9, 13]],
backgroundColor: '#8bdceb',
lineColor: '#8bdceb'
}
]
}
// RENDER CHARTS
// -----------------------------
zingchart.render({
id: 'myChart',
data: chartConfig,
height: '100%',
width: '100%',
});
