<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ZingSoft Demo</title>
<link href='http://fonts.googleapis.com/css?family=Josefin+Sans' rel='stylesheet' type='text/css'>
<script nonce="undefined" src="https://cdn.zingchart.com/zingchart.min.js"></script>
<style>
.chart--container {
margin: auto;
max-width: 967px;
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 chartConfig = {
type: 'bar',
theme: 'classic',
globals: {
fontFamily: 'Josefin Sans',
},
backgroundColor: 'black',
title: {
text: 'September has the Lowest Temperature Change',
align: 'left',
backgroundColor: 'none',
color: '#c3e4ed',
fontSize: '24px',
fontWeight: 'bold',
marginTop: '12px',
},
subtitle: {
text: 'Monthly Temperature Anomaly of 1950, 2000, and 2018 Relative to 1951-1980 Average',
align: 'left',
backgroundColor: 'none',
color: '#c3e4ed',
fontSize: '14px',
paddingTop: '25px',
},
plot: {
aspect: 'cone',
},
plotarea: {
margin: '20% 5% 15% 7%',
},
scaleX: {
values: [
'January',
'February',
'March',
'April',
'May',
'June',
'July',
'August',
'September',
'October',
'November',
'December',
],
guide: {
items: [{
alpha: 1,
backgroundColor: 'black',
},
{
alpha: 0.6,
backgroundColor: '#333333',
},
],
},
item: {
fontColor: '#becfd4',
fontSize: '11px',
offsetY: '-17%',
},
labels: [
'Jan',
'Feb',
'Mar',
'Apr',
'May',
'Jun',
'Jul',
'Aug',
'Sep',
'Oct',
'Nov',
'Dec',
],
lineColor: '#becfd4',
lineStyle: 'dotted',
lineWidth: '1px',
tick: {
lineColor: '#becfd4',
size: '20px',
},
},
scaleY: {
values: '-2:2:1',
format: '%v%',
guide: {
alpha: 0.5,
lineColor: '#c3e4ed',
lineStyle: 'dotted',
},
item: {
fontColor: '#c3e4ed',
fontFamily: 'Josefin Sans',
fontSize: '11px',
offsetX: '7%',
offsetY: '-5%',
},
lineWidth: '0px',
tick: {
visible: true,
},
},
labels: [{
text: 'Hover spikes for<br>details on data',
fontColor: '#ccc',
fontSize: '14px',
x: '78%',
y: '9%',
}, ],
shapes: [{
type: 'rectangle',
backgroundColor: 'none',
borderColor: '#333',
borderWidth: '1px',
height: '65px',
width: '165px',
x: '83.5%',
y: '12.5%',
}, ],
series: [{
text: '1950',
values: [
-0.648, -0.545, -0.129, -0.272, -0.107, -0.166, -0.257, -0.47, -0.166,
-0.112, -0.749, -0.125,
],
tooltip: {
text: '%v% average change<br>during month <br>of %kv %t',
fixed: true,
fontColor: '#eee',
fontSize: '14px',
height: '65px',
shadowAlpha: '0',
sticky: true,
timeout: 10000,
width: '165px',
x: '75%',
y: '6%',
},
backgroundColor: '#00baf0',
rules: [{
backgroundColor: '#ccc #00baf0',
rule: '%v < 0',
}, ],
},
{
text: '2000',
values: [
0.368, 1.0, 0.896, 1.211, 0.516, 0.556, 0.485, 0.649, 0.45, 0.245,
0.197, 0.227,
],
tooltip: {
text: '%v% average change<br>during month <br>of %kv %t',
fixed: true,
fontColor: '#eee',
fontSize: '14px',
height: '65px',
shadowAlpha: '0',
sticky: true,
timeout: 10000,
width: '165px',
x: '75%',
y: '6%',
},
backgroundColor: '#006a89',
rules: [{
backgroundColor: '#ccc #006a89',
rule: '%v < 0',
}, ],
},
{
text: '2018',
values: [
1.164, 1.109, 1.376, 1.377, 1.131, 1.041, 1.124, 0.967, 0.828, 1.359,
0.815, 1.224,
],
tooltip: {
text: '%v% average change<br>during month <br>of %kv %t',
fixed: true,
fontColor: '#eee',
fontSize: '14px',
height: '65px',
shadowAlpha: '0',
sticky: true,
timeout: 10000,
width: '165px',
x: '75%',
y: '6%',
},
backgroundColor: '#004357',
rules: [{
backgroundColor: '#ccc #004357',
rule: '%v < 0',
}, ],
},
],
source: {
text: 'Source: berkeleyearth.org/data',
backgroundColor: 'none',
color: '#8aa3aa',
fontSize: '11px',
offsetX: '-22%',
offsetY: '-10%',
},
};
zingchart.render({
id: 'myChart',
data: chartConfig,
height: '100%',
width: '100%',
});
</script>
</body>
</html>
let chartConfig = {
type: 'bar',
theme: 'classic',
globals: {
fontFamily: 'Josefin Sans',
},
backgroundColor: 'black',
title: {
text: 'September has the Lowest Temperature Change',
align: 'left',
backgroundColor: 'none',
color: '#c3e4ed',
fontSize: '24px',
fontWeight: 'bold',
marginTop: '12px',
},
subtitle: {
text: 'Monthly Temperature Anomaly of 1950, 2000, and 2018 Relative to 1951-1980 Average',
align: 'left',
backgroundColor: 'none',
color: '#c3e4ed',
fontSize: '14px',
paddingTop: '25px',
},
plot: {
aspect: 'cone',
},
plotarea: {
margin: '20% 5% 15% 7%',
},
scaleX: {
values: [
'January',
'February',
'March',
'April',
'May',
'June',
'July',
'August',
'September',
'October',
'November',
'December',
],
guide: {
items: [
{
alpha: 1,
backgroundColor: 'black',
},
{
alpha: 0.6,
backgroundColor: '#333333',
},
],
},
item: {
fontColor: '#becfd4',
fontSize: '11px',
offsetY: '-17%',
},
labels: [
'Jan',
'Feb',
'Mar',
'Apr',
'May',
'Jun',
'Jul',
'Aug',
'Sep',
'Oct',
'Nov',
'Dec',
],
lineColor: '#becfd4',
lineStyle: 'dotted',
lineWidth: '1px',
tick: {
lineColor: '#becfd4',
size: '20px',
},
},
scaleY: {
values: '-2:2:1',
format: '%v%',
guide: {
alpha: 0.5,
lineColor: '#c3e4ed',
lineStyle: 'dotted',
},
item: {
fontColor: '#c3e4ed',
fontFamily: 'Josefin Sans',
fontSize: '11px',
offsetX: '7%',
offsetY: '-5%',
},
lineWidth: '0px',
tick: {
visible: true,
},
},
labels: [
{
text: 'Hover spikes for<br>details on data',
fontColor: '#ccc',
fontSize: '14px',
x: '78%',
y: '9%',
},
],
shapes: [
{
type: 'rectangle',
backgroundColor: 'none',
borderColor: '#333',
borderWidth: '1px',
height: '65px',
width: '165px',
x: '83.5%',
y: '12.5%',
},
],
series: [
{
text: '1950',
values: [
-0.648, -0.545, -0.129, -0.272, -0.107, -0.166, -0.257, -0.47, -0.166,
-0.112, -0.749, -0.125,
],
tooltip: {
text: '%v% average change<br>during month <br>of %kv %t',
fixed: true,
fontColor: '#eee',
fontSize: '14px',
height: '65px',
shadowAlpha: '0',
sticky: true,
timeout: 10000,
width: '165px',
x: '75%',
y: '6%',
},
backgroundColor: '#00baf0',
rules: [
{
backgroundColor: '#ccc #00baf0',
rule: '%v < 0',
},
],
},
{
text: '2000',
values: [
0.368, 1.0, 0.896, 1.211, 0.516, 0.556, 0.485, 0.649, 0.45, 0.245,
0.197, 0.227,
],
tooltip: {
text: '%v% average change<br>during month <br>of %kv %t',
fixed: true,
fontColor: '#eee',
fontSize: '14px',
height: '65px',
shadowAlpha: '0',
sticky: true,
timeout: 10000,
width: '165px',
x: '75%',
y: '6%',
},
backgroundColor: '#006a89',
rules: [
{
backgroundColor: '#ccc #006a89',
rule: '%v < 0',
},
],
},
{
text: '2018',
values: [
1.164, 1.109, 1.376, 1.377, 1.131, 1.041, 1.124, 0.967, 0.828, 1.359,
0.815, 1.224,
],
tooltip: {
text: '%v% average change<br>during month <br>of %kv %t',
fixed: true,
fontColor: '#eee',
fontSize: '14px',
height: '65px',
shadowAlpha: '0',
sticky: true,
timeout: 10000,
width: '165px',
x: '75%',
y: '6%',
},
backgroundColor: '#004357',
rules: [
{
backgroundColor: '#ccc #004357',
rule: '%v < 0',
},
],
},
],
source: {
text: 'Source: berkeleyearth.org/data',
backgroundColor: 'none',
color: '#8aa3aa',
fontSize: '11px',
offsetX: '-22%',
offsetY: '-10%',
},
};
zingchart.render({
id: 'myChart',
data: chartConfig,
height: '100%',
width: '100%',
});
