<!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: 'range',
backgroundColor: '#ffffff',
title: {
text: 'Average Temperature',
backgroundColor: '#ffffff',
fontColor: '#000',
},
legend: {
align: 'center',
backgroundColor: '#e0e0e0',
borderColor: '#fff',
layout: 'x4',
shadow: false,
verticalAlign: 'bottom',
},
plot: {
tooltip: {
visible: false,
},
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',
},
},
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',
},
],
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',
},
},
};
// RENDER CHARTS
// -----------------------------
zingchart.render({
id: 'myChart',
data: chartConfig,
height: '100%',
width: '100%',
});
</script>
</body>
</html>
// CHART CONFIG
// -----------------------------
let chartConfig = {
type: 'range',
backgroundColor: '#ffffff',
title: {
text: 'Average Temperature',
backgroundColor: '#ffffff',
fontColor: '#000',
},
legend: {
align: 'center',
backgroundColor: '#e0e0e0',
borderColor: '#fff',
layout: 'x4',
shadow: false,
verticalAlign: 'bottom',
},
plot: {
tooltip: {
visible: false,
},
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',
},
},
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',
},
],
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',
},
},
};
// RENDER CHARTS
// -----------------------------
zingchart.render({
id: 'myChart',
data: chartConfig,
height: '100%',
width: '100%',
});
