<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ZingSoft Demo</title>
<link href='https://fonts.googleapis.com/css?family=Overlock' rel='stylesheet' type='text/css'>
<script nonce="undefined" src="https://cdn.zingchart.com/zingchart.min.js"></script>
<style>
.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 chartData = [
['2020-11-01', 1500, 'Nov 1st'],
['2020-11-02', 1600, 'Nov 2nd'],
['2020-11-03', 3000, 'Nov 3rd'],
['2020-11-04', 3400, 'Nov 4th'],
['2020-11-05', 503, 'Nov 5th'],
['2020-11-06', 1981, 'Nov 6th'],
['2020-11-07', 2100, 'Nov 7th'],
['2020-11-08', 914, 'Nov 8th'],
['2020-11-09', 1400, 'Nov 9th'],
['2020-11-10', 3034, 'Nov 10th'],
['2020-11-11', 1987, 'Nov 11th'],
['2020-11-12', 1700, 'Nov 12th'],
['2020-11-13', 1111, 'Nov 13th'],
['2020-11-14', 1999, 'Nov 14th'],
['2020-11-15', 4500, 'Nov 15th'],
['2020-11-16', 654, 'Nov 16th'],
['2020-11-17', 1200, 'Nov 17th'],
['2020-11-18', 4440, 'Nov 18th'],
['2020-11-19', 1500, 'Nov 19th'],
['2020-11-20', 1500, 'Nov 20th'],
['2020-11-21', 1600, 'Nov 21st'],
['2020-11-22', 1700, 'Nov 22nd'],
['2020-11-23', 1900, 'Nov 23rd'],
['2020-11-24', 2150, 'Nov 24th'],
['2020-11-25', 981, 'Nov 25th'],
['2020-11-26', 340, 'Nov 26th'],
['2020-11-27', 3100, 'Nov 27th'],
['2020-11-28', 1200, 'Nov 28th'],
['2020-11-29', 1500, 'Nov 29th'],
['2020-11-30', 900, 'Nov 30th'],
];
let chartConfig = {
type: 'calendar',
backgroundColor: '#b3e7ff #e6f7ff',
title: {
text: 'Nanowrimo',
fontColor: '#00344d',
fontFamily: 'Overlock',
fontSize: '34px',
},
subtitle: {
text: 'November 2020',
fontColor: '#00344d',
fontFamily: 'Georgia',
fontSize: '12px',
fontWeight: 'normal',
y: '10%',
},
options: {
values: chartData,
startMonth: 11, // November
endMonth: 11, // November
month: {
values: [
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
],
},
palette: ['none', 'orange'],
weekday: {
values: ['Sun', 'Mon', 'Tues', 'Wed', 'Thurs', 'Fri', 'Sat'],
item: {
fontColor: '#00344d',
fontFamily: 'Georgia',
fontSize: '10px',
},
},
year: {
text: '2020',
visible: false,
},
},
plot: {
tooltip: {
text: 'On %data-info0,<br>I wrote<br>%v words.',
align: 'center',
backgroundColor: 'none',
borderColor: 'none',
fontColor: 'orange',
fontFamily: 'Times New Roman',
fontSize: '14px',
height: '22%',
padding: '20%',
sticky: true,
thousandsSeparator: ',',
timeout: 30000,
width: '20%',
x: '72.5%',
y: '32%',
},
valueBox: {
fontColor: 'white',
fontFamily: 'Courier',
fontSize: '15px',
fontWeight: 'bold',
},
},
plotarea: {
marginTop: '20%',
marginRight: '35%',
marginBottom: '10%',
marginLeft: '15%',
},
labels: [{
text: 'Daily Word Count',
backgroundColor: '#fff9e6',
borderColor: '#00344d',
borderRadius: '5px',
borderWidth: '1px',
fontColor: '#00344d',
fontFamily: 'Overlock',
fontSize: '16px',
fontWeight: 'bold',
height: '45%',
lineStyle: 'dotted',
padding: '15%',
verticalAlign: 'top',
width: '25%',
x: '70%',
y: '20%',
},
{
backgroundColor: 'none',
borderColor: 'orange',
borderRadius: '5px',
borderWidth: '1px',
lineStyle: 'dotted',
width: '20%',
height: '22%',
x: '72.5%',
y: '32%',
},
{
text: 'Daily Goal: 1,700 words',
fontColor: '#00344d',
fontFamily: 'Overlock',
fontSize: '12px',
fontWeight: 'bold',
width: '20%',
height: '15%',
x: '72.5%',
y: '52%',
},
{
text: 'National Novel Writing Month brings together participants from all over the world. The goal is to write a 50,000 word novel over the course of 30 days.',
padding: '12%',
backgroundColor: '#fff9e6',
borderColor: '#00344d',
borderRadius: '5px',
borderWidth: '1px',
fontColor: '#00344d',
fontFamily: 'Georgia',
fontSize: '11px',
lineStyle: 'dotted',
verticalAlign: 'top',
width: '25%',
height: '20%',
wrapText: true,
x: '70%',
y: '70%',
},
],
};
zingchart.loadModules('calendar', function() {
zingchart.render({
id: 'myChart',
data: chartConfig,
height: '100%',
width: '100%',
});
});
</script>
</body>
</html>
let chartData = [
['2020-11-01', 1500, 'Nov 1st'],
['2020-11-02', 1600, 'Nov 2nd'],
['2020-11-03', 3000, 'Nov 3rd'],
['2020-11-04', 3400, 'Nov 4th'],
['2020-11-05', 503, 'Nov 5th'],
['2020-11-06', 1981, 'Nov 6th'],
['2020-11-07', 2100, 'Nov 7th'],
['2020-11-08', 914, 'Nov 8th'],
['2020-11-09', 1400, 'Nov 9th'],
['2020-11-10', 3034, 'Nov 10th'],
['2020-11-11', 1987, 'Nov 11th'],
['2020-11-12', 1700, 'Nov 12th'],
['2020-11-13', 1111, 'Nov 13th'],
['2020-11-14', 1999, 'Nov 14th'],
['2020-11-15', 4500, 'Nov 15th'],
['2020-11-16', 654, 'Nov 16th'],
['2020-11-17', 1200, 'Nov 17th'],
['2020-11-18', 4440, 'Nov 18th'],
['2020-11-19', 1500, 'Nov 19th'],
['2020-11-20', 1500, 'Nov 20th'],
['2020-11-21', 1600, 'Nov 21st'],
['2020-11-22', 1700, 'Nov 22nd'],
['2020-11-23', 1900, 'Nov 23rd'],
['2020-11-24', 2150, 'Nov 24th'],
['2020-11-25', 981, 'Nov 25th'],
['2020-11-26', 340, 'Nov 26th'],
['2020-11-27', 3100, 'Nov 27th'],
['2020-11-28', 1200, 'Nov 28th'],
['2020-11-29', 1500, 'Nov 29th'],
['2020-11-30', 900, 'Nov 30th'],
];
let chartConfig = {
type: 'calendar',
backgroundColor: '#b3e7ff #e6f7ff',
title: {
text: 'Nanowrimo',
fontColor: '#00344d',
fontFamily: 'Overlock',
fontSize: '34px',
},
subtitle: {
text: 'November 2020',
fontColor: '#00344d',
fontFamily: 'Georgia',
fontSize: '12px',
fontWeight: 'normal',
y: '10%',
},
options: {
values: chartData,
startMonth: 11, // November
endMonth: 11, // November
month: {
values: [
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
],
},
palette: ['none', 'orange'],
weekday: {
values: ['Sun', 'Mon', 'Tues', 'Wed', 'Thurs', 'Fri', 'Sat'],
item: {
fontColor: '#00344d',
fontFamily: 'Georgia',
fontSize: '10px',
},
},
year: {
text: '2020',
visible: false,
},
},
plot: {
tooltip: {
text: 'On %data-info0,<br>I wrote<br>%v words.',
align: 'center',
backgroundColor: 'none',
borderColor: 'none',
fontColor: 'orange',
fontFamily: 'Times New Roman',
fontSize: '14px',
height: '22%',
padding: '20%',
sticky: true,
thousandsSeparator: ',',
timeout: 30000,
width: '20%',
x: '72.5%',
y: '32%',
},
valueBox: {
fontColor: 'white',
fontFamily: 'Courier',
fontSize: '15px',
fontWeight: 'bold',
},
},
plotarea: {
marginTop: '20%',
marginRight: '35%',
marginBottom: '10%',
marginLeft: '15%',
},
labels: [
{
text: 'Daily Word Count',
backgroundColor: '#fff9e6',
borderColor: '#00344d',
borderRadius: '5px',
borderWidth: '1px',
fontColor: '#00344d',
fontFamily: 'Overlock',
fontSize: '16px',
fontWeight: 'bold',
height: '45%',
lineStyle: 'dotted',
padding: '15%',
verticalAlign: 'top',
width: '25%',
x: '70%',
y: '20%',
},
{
backgroundColor: 'none',
borderColor: 'orange',
borderRadius: '5px',
borderWidth: '1px',
lineStyle: 'dotted',
width: '20%',
height: '22%',
x: '72.5%',
y: '32%',
},
{
text: 'Daily Goal: 1,700 words',
fontColor: '#00344d',
fontFamily: 'Overlock',
fontSize: '12px',
fontWeight: 'bold',
width: '20%',
height: '15%',
x: '72.5%',
y: '52%',
},
{
text: 'National Novel Writing Month brings together participants from all over the world. The goal is to write a 50,000 word novel over the course of 30 days.',
padding: '12%',
backgroundColor: '#fff9e6',
borderColor: '#00344d',
borderRadius: '5px',
borderWidth: '1px',
fontColor: '#00344d',
fontFamily: 'Georgia',
fontSize: '11px',
lineStyle: 'dotted',
verticalAlign: 'top',
width: '25%',
height: '20%',
wrapText: true,
x: '70%',
y: '70%',
},
],
};
zingchart.loadModules('calendar', function () {
zingchart.render({
id: 'myChart',
data: chartConfig,
height: '100%',
width: '100%',
});
});
