<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ZingSoft Demo</title>
<link href='https://fonts.googleapis.com/css?family=Roboto:300,700' rel='stylesheet' type='text/css'>
<script nonce="undefined" 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 highs = [
82, 63, 70, 75, 71, 73, 69, 76, 76, 72, 77, 80, 80, 80, 71, 80, 73, 74, 72,
79, 89, 83, 72, 77, 83, 88, 74, 78, 82, 77, 80,
];
let lows = [
58, 58, 58, 56, 58, 59, 59, 58, 59, 62, 62, 61, 64, 60, 64, 63, 60, 57, 57,
55, 58, 58, 62, 60, 59, 62, 63, 59, 58, 58, 61,
];
let rain = [
0, 0.28, 0, 0, 0, 0, 0.01, 0.01, 0.12, 0.11, 0, 0, 0, 0, 0.04, 0, 0.02, 0.04,
0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
];
let zip = (highs, lows) => {
let args = [].slice.call([highs, lows]);
let shortest =
args.length == 0 ?
[] :
args.reduce((a, b) => (a.length < b.length ? a : b));
return shortest.map((_, i) => args.map((array) => array[i]));
};
let chartConfig = {
type: 'mixed',
globals: {
fontFamily: 'Roboto',
},
backgroundColor: '#F5F5F5',
title: {
text: 'Seattle Weather',
marginLeft: '80px',
color: '#424242',
textAlign: 'left',
},
subtitle: {
text: 'July 2019',
marginLeft: '80px',
color: '#424242',
textAlign: 'left',
},
plot: {
tooltip: {
visible: false,
},
},
plotarea: {
margin: '60px 80px 60px 80px',
backgroundColor: '#FFF',
},
scaleX: {
values: [
'1 July 2019',
'2 July 2019',
'3 July 2019',
'4 July 2019',
'5 July 2019',
'6 July 2019',
'7 July 2019',
'8 July 2019',
'9 July 2019',
'10 July 2019',
'11 July 2019',
'12 July 2019',
'13 July 2019',
'14 July 2019',
'15 July 2019',
'16 July 2019',
'17 July 2019',
'18 July 2019',
'19 July 2019',
'20 July 2019',
'21 July 2019',
'22 July 2019',
'23 July 2019',
'24 July 2019',
'25 July 2019',
'26 July 2019',
'27 July 2019',
'28 July 2019',
'29 July 2019',
'30 July 2019',
'31 July 2019',
],
guide: {
items: [{
backgroundColor: '#F5F5F5',
},
{
backgroundColor: '#FFF',
},
],
lineWidth: '0px',
},
item: {
visible: false,
},
label: {
text: 'Days of the Month',
},
lineColor: '#BDBDBD',
tick: {
visible: false,
},
},
scaleY: {
format: '%v°',
guide: {
lineColor: '#BDBDBD',
lineStyle: 'solid',
},
item: {
color: '#212121',
},
label: {
text: 'Temperature (°F)',
color: '#424242',
},
lineColor: '#BDBDBD',
tick: {
lineColor: '#BDBDBD',
},
},
scaleY2: {
values: '0:0.75:0.25',
format: '%v"',
guide: {
visible: false,
},
item: {
color: '#212121',
},
label: {
text: 'Precipitation (inches)',
},
lineColor: '#BDBDBD',
tick: {
lineColor: '#BDBDBD',
},
},
crosshairX: {
plotLabel: {
multiple: true,
},
scaleLabel: {
alpha: 1,
backgroundColor: '#BDBDBD',
color: '#FFFFFF',
fontSize: '16px',
},
},
source: {
text: 'Source: www.accuweather.com',
},
series: [{
type: 'range',
values: zip(highs, lows),
backgroundColor: '#FFC107',
guideLabel: {
text: 'High of %node-min-value°F<br>Low of %node-max-value°F',
backgroundColor: '#FFC107',
borderWidth: '0px',
color: '#FFF',
fontSize: '16px',
},
lineColor: '#FF6F00',
lineWidth: '1px',
marker: {
visible: false,
},
},
{
type: 'bar',
values: rain,
backgroundColor: '#00BCD4',
barWidth: '8px',
borderRadiusTopRight: '4px',
borderRadiusTopLeft: '4px',
guideLabel: {
text: '%v" of precipitation',
backgroundColor: '#0097A7',
borderWidth: '0px',
color: '#FFF',
fontSize: '16px',
},
scales: 'scale-x, scale-y-2',
},
],
};
zingchart.render({
id: 'myChart',
data: chartConfig,
height: '100%',
width: '100%',
});
</script>
</body>
</html>
let highs = [
82, 63, 70, 75, 71, 73, 69, 76, 76, 72, 77, 80, 80, 80, 71, 80, 73, 74, 72,
79, 89, 83, 72, 77, 83, 88, 74, 78, 82, 77, 80,
];
let lows = [
58, 58, 58, 56, 58, 59, 59, 58, 59, 62, 62, 61, 64, 60, 64, 63, 60, 57, 57,
55, 58, 58, 62, 60, 59, 62, 63, 59, 58, 58, 61,
];
let rain = [
0, 0.28, 0, 0, 0, 0, 0.01, 0.01, 0.12, 0.11, 0, 0, 0, 0, 0.04, 0, 0.02, 0.04,
0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
];
let zip = (highs, lows) => {
let args = [].slice.call([highs, lows]);
let shortest =
args.length == 0
? []
: args.reduce((a, b) => (a.length < b.length ? a : b));
return shortest.map((_, i) => args.map((array) => array[i]));
};
let chartConfig = {
type: 'mixed',
globals: {
fontFamily: 'Roboto',
},
backgroundColor: '#F5F5F5',
title: {
text: 'Seattle Weather',
marginLeft: '80px',
color: '#424242',
textAlign: 'left',
},
subtitle: {
text: 'July 2019',
marginLeft: '80px',
color: '#424242',
textAlign: 'left',
},
plot: {
tooltip: {
visible: false,
},
},
plotarea: {
margin: '60px 80px 60px 80px',
backgroundColor: '#FFF',
},
scaleX: {
values: [
'1 July 2019',
'2 July 2019',
'3 July 2019',
'4 July 2019',
'5 July 2019',
'6 July 2019',
'7 July 2019',
'8 July 2019',
'9 July 2019',
'10 July 2019',
'11 July 2019',
'12 July 2019',
'13 July 2019',
'14 July 2019',
'15 July 2019',
'16 July 2019',
'17 July 2019',
'18 July 2019',
'19 July 2019',
'20 July 2019',
'21 July 2019',
'22 July 2019',
'23 July 2019',
'24 July 2019',
'25 July 2019',
'26 July 2019',
'27 July 2019',
'28 July 2019',
'29 July 2019',
'30 July 2019',
'31 July 2019',
],
guide: {
items: [
{
backgroundColor: '#F5F5F5',
},
{
backgroundColor: '#FFF',
},
],
lineWidth: '0px',
},
item: {
visible: false,
},
label: {
text: 'Days of the Month',
},
lineColor: '#BDBDBD',
tick: {
visible: false,
},
},
scaleY: {
format: '%v°',
guide: {
lineColor: '#BDBDBD',
lineStyle: 'solid',
},
item: {
color: '#212121',
},
label: {
text: 'Temperature (°F)',
color: '#424242',
},
lineColor: '#BDBDBD',
tick: {
lineColor: '#BDBDBD',
},
},
scaleY2: {
values: '0:0.75:0.25',
format: '%v"',
guide: {
visible: false,
},
item: {
color: '#212121',
},
label: {
text: 'Precipitation (inches)',
},
lineColor: '#BDBDBD',
tick: {
lineColor: '#BDBDBD',
},
},
crosshairX: {
plotLabel: {
multiple: true,
},
scaleLabel: {
alpha: 1,
backgroundColor: '#BDBDBD',
color: '#FFFFFF',
fontSize: '16px',
},
},
source: {
text: 'Source: www.accuweather.com',
},
series: [
{
type: 'range',
values: zip(highs, lows),
backgroundColor: '#FFC107',
guideLabel: {
text: 'High of %node-min-value°F<br>Low of %node-max-value°F',
backgroundColor: '#FFC107',
borderWidth: '0px',
color: '#FFF',
fontSize: '16px',
},
lineColor: '#FF6F00',
lineWidth: '1px',
marker: {
visible: false,
},
},
{
type: 'bar',
values: rain,
backgroundColor: '#00BCD4',
barWidth: '8px',
borderRadiusTopRight: '4px',
borderRadiusTopLeft: '4px',
guideLabel: {
text: '%v" of precipitation',
backgroundColor: '#0097A7',
borderWidth: '0px',
color: '#FFF',
fontSize: '16px',
},
scales: 'scale-x, scale-y-2',
},
],
};
zingchart.render({
id: 'myChart',
data: chartConfig,
height: '100%',
width: '100%',
});
