<!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>
@import url('https://fonts.googleapis.com/css?family=Roboto&display=swap');
.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"]; // DEFINE DATA
// -----------------------------
let chartData = [
['2018-01-01', 3, 'Alex'],
['2018-01-02', 12, 'Paige'],
['2018-01-03', 3, 'Carrie'],
['2018-01-04', 4, 'Derek'],
['2018-01-05', 9, 'Alexis'],
['2018-01-08', 11, 'Jeff'],
['2018-01-09', 5, 'Alex'],
['2018-01-10', 5, 'Brian'],
['2018-01-11', 9, 'Brian'],
['2018-01-12', 9, 'Brian'],
['2018-01-15', 9, 'Brian'],
['2018-01-16', 4, 'Alex'],
['2018-01-17', 6, 'Khoa'],
['2018-01-18', 5, 'Brian'],
['2018-01-19', 6, 'Tawnya'],
['2018-01-22', 2, 'Paige'],
['2018-01-23', 5, 'Jeff'],
['2018-01-24', 9, 'Alex'],
['2018-01-25', 6, 'Brian'],
['2018-01-26', 6, 'Carrie'],
['2018-01-29', 7, 'Brian'],
['2018-01-30', 7, 'Carrie'],
['2018-01-31', 12, 'Jeff'],
['2018-02-01', 3, 'Carrie'],
['2018-02-02', 3, 'Derek'],
['2018-02-05', 9, 'Derek'],
['2018-02-06', 9, 'Carrie'],
['2018-02-07', 9, 'Carrie'],
['2018-02-08', 4, 'Brian'],
['2018-02-09', 5, 'Brian'],
['2018-02-12', 8, 'Derek'],
['2018-02-13', 8, 'Derek'],
['2018-02-14', 3, 'Carrie'],
['2018-02-15', 7, 'Alexis'],
['2018-02-16', 5, 'Carrie'],
['2018-02-19', 9, 'Carrie'],
['2018-02-20', 6, 'Carrie'],
['2018-02-21', 5, 'Carrie'],
['2018-02-22', 8, 'Jeff'],
['2018-02-23', 10, 'Jeff'],
['2018-02-24', 4, 'Alex'],
['2018-02-26', 5, 'Alex'],
['2018-02-27', 9, 'Brian'],
['2018-02-28', 9, 'Preston'],
['2018-03-01', 3, 'Alex'],
['2018-03-02', 3, 'Jeff'],
['2018-03-05', 4, 'Jeff'],
['2018-03-06', 2, 'Alex'],
['2018-03-07', 10, 'Khoa'],
['2018-03-08', 9, 'Tawnya'],
['2018-03-09', 7, 'Tawnya'],
['2018-03-12', 8, 'Jeff'],
['2018-03-13', 7, 'Brian'],
['2018-03-14', 8, 'Alex'],
['2018-03-15', 8, 'Brian'],
['2018-03-16', 2, 'Preston'],
['2018-03-19', 3, 'Preston'],
['2018-03-20', 4, 'Jeff'],
['2018-03-21', 5, 'Jeff'],
['2018-03-22', 6, 'Jeff'],
['2018-03-23', 7, 'Carrie'],
['2018-03-26', 8, 'Brian'],
['2018-03-27', 8, 'Brian'],
['2018-03-28', 9, 'Ian'],
['2018-03-29', 7, 'Ian'],
['2018-03-30', 9, 'Preston'],
['2018-04-02', 7, 'Preston'],
['2018-04-03', 5, 'Ian'],
['2018-04-04', 6, 'Preston'],
['2018-04-05', 9, 'Brian'],
['2018-04-06', 4, 'Tawnya'],
['2018-04-09', 8, 'Tawnya'],
['2018-04-10', 9, 'Tawnya'],
['2018-04-11', 3, 'Preston'],
['2018-04-12', 5, 'Tawnya'],
['2018-04-13', 5, 'Alex'],
['2018-04-16', 8, 'Paige'],
['2018-04-17', 8, 'Paige'],
['2018-04-18', 9, 'Paige'],
['2018-04-19', 3, 'Paige'],
['2018-04-20', 6, 'Brian'],
['2018-04-23', 12, 'Ian'],
['2018-04-24', 6, 'Preston'],
['2018-04-25', 5, 'Carrie'],
['2018-04-26', 5, 'Jeff'],
['2018-04-27', 11, 'Jeff'],
['2018-04-30', 9, 'Jeff'],
['2018-05-01', 3, 'Brian'],
['2018-05-02', 5, 'Paige'],
['2018-05-03', 4, 'Paige'],
['2018-05-04', 9, 'Carrie'],
['2018-05-07', 5, 'Carrie'],
['2018-05-08', 5, 'Carrie'],
['2018-05-09', 7, 'Alex'],
['2018-05-10', 7, 'Alex'],
['2018-05-11', 5, 'Carrie'],
['2018-05-14', 3, 'Carrie'],
['2018-05-15', 2, 'Alex'],
['2018-05-16', 7, 'Alex'],
['2018-05-17', 5, 'Josh'],
['2018-05-18', 3, 'Josh'],
['2018-05-21', 9, 'Preston'],
['2018-05-22', 11, 'Carrie'],
['2018-05-23', 5, 'Carrie'],
['2018-05-24', 9, 'Tawnya'],
['2018-05-25', 4, 'Tawnya'],
['2018-05-28', 5, 'Preston'],
['2018-05-29', 7, 'Josh'],
['2018-05-30', 9, 'Rigie'],
['2018-05-31', 5, 'Carrie'],
['2018-06-01', 5, 'Carrie'],
['2018-06-04', 6, 'Nick'],
['2018-06-05', 7, 'Jeff'],
['2018-06-06', 8, 'Jeff'],
['2018-06-07', 5, 'Brian'],
['2018-06-08', 8, 'Paige'],
['2018-06-11', 6, 'Brian'],
['2018-06-12', 6, 'Brian'],
['2018-06-13', 2, 'Brian'],
['2018-06-14', 7, 'Josh'],
['2018-06-15', 5, 'Carrie'],
['2018-06-18', 5, 'Preston'],
['2018-06-19', 8, 'Brian'],
['2018-06-20', 8, 'Paige'],
['2018-06-21', 8, 'Paige'],
['2018-06-22', 10, 'Paige'],
['2018-06-25', 7, 'Brian'],
['2018-06-26', 12, 'Tawnya'],
['2018-06-27', 7, 'Rigie'],
['2018-06-28', 6, 'Tawnya'],
['2018-06-29', 12, 'Derek'],
['2018-07-02', 3, 'Derek'],
['2018-07-03', 4, 'Derek'],
['2018-07-04', 9, 'Derek'],
['2018-07-05', 11, 'Derek'],
['2018-07-06', 5, 'Derek'],
['2018-07-09', 5, 'Derek'],
['2018-07-10', 9, 'Nick'],
['2018-07-11', 9, 'Preston'],
['2018-07-12', 9, 'Jeff'],
['2018-07-13', 4, 'Josh'],
['2018-07-16', 6, 'Josh'],
['2018-07-17', 5, 'Brian'],
['2018-07-18', 6, 'Tawnya'],
['2018-07-19', 2, 'Tawnya'],
['2018-07-20', 5, 'Tawnya'],
['2018-07-23', 9, 'Brian'],
['2018-07-24', 6, 'Brian'],
['2018-07-25', 6, 'Paige'],
['2018-07-26', 7, 'Paige'],
['2018-07-27', 7, 'Paige'],
['2018-07-30', 12, 'Brian'],
['2018-07-31', 3, 'Brian'],
['2018-08-01', 3, 'Brian'],
['2018-08-02', 9, 'Preston'],
['2018-08-03', 9, 'Preston'],
['2018-08-06', 9, 'Brian'],
['2018-08-07', 4, 'Tawnya'],
['2018-08-08', 5, 'Tawnya'],
['2018-08-09', 8, 'Tawnya'],
['2018-08-10', 8, 'Alex'],
['2018-08-13', 3, 'Jeff'],
['2018-08-14', 7, 'Nick'],
['2018-08-15', 5, 'Alex'],
['2018-08-16', 9, 'Alex'],
['2018-08-17', 6, 'Paige'],
['2018-08-20', 5, 'Paige'],
['2018-08-21', 8, 'Paige'],
['2018-08-22', 10, 'Nick'],
['2018-08-23', 4, 'Alex'],
['2018-08-24', 5, 'Alex'],
['2018-08-27', 9, 'Alex'],
['2018-08-28', 9, 'Carrie'],
['2018-08-29', 3, 'Carrie'],
['2018-08-30', 3, 'Alex'],
['2018-08-31', 4, 'Alex'],
['2018-09-03', 2, 'Nick'],
['2018-09-04', 10, 'Alex'],
['2018-09-05', 9, 'Nick'],
['2018-09-06', 7, 'Alex'],
['2018-09-07', 8, 'Ian'],
['2018-09-10', 7, 'Preston'],
['2018-09-11', 8, 'Ian'],
['2018-09-12', 8, 'Paige'],
['2018-09-13', 2, 'Brian'],
['2018-09-14', 3, 'Nick'],
['2018-09-17', 4, 'Khoa'],
['2018-09-18', 5, 'Jeff'],
['2018-09-19', 6, 'Rigie'],
['2018-09-20', 7, 'Brian'],
['2018-09-21', 8, 'Brian'],
['2018-09-24', 8, 'Tawnya'],
['2018-09-25', 9, 'Nick'],
['2018-09-26', 7, 'Alex'],
['2018-09-27', 9, 'Khoa'],
['2018-09-28', 7, 'Khoa'],
['2018-10-01', 5, 'Khoa'],
['2018-10-02', 6, 'Khoa'],
['2018-10-03', 9, 'Khoa'],
['2018-10-04', 4, 'Khoa'],
['2018-10-05', 8, 'Alex'],
['2018-10-08', 9, 'Nick'],
['2018-10-09', 3, 'Nick'],
['2018-10-10', 5, 'Nick'],
['2018-10-11', 5, 'Carrie'],
['2018-10-12', 8, 'Paige'],
['2018-10-15', 8, 'Alex'],
['2018-10-16', 9, 'Nick'],
['2018-10-17', 3, 'Nick'],
['2018-10-18', 6, 'Josh'],
['2018-10-19', 12, 'Khoa'],
['2018-10-22', 6, 'Khoa'],
['2018-10-23', 5, 'Paige'],
['2018-10-24', 5, 'Paige'],
['2018-10-25', 11, 'Khoa'],
['2018-10-26', 9, 'Brian'],
['2018-10-29', 3, 'Nick'],
['2018-10-30', 5, 'Nick'],
['2018-10-31', 4, 'Nick'],
['2018-11-01', 9, 'Alex'],
['2018-11-02', 5, 'Alex'],
['2018-11-05', 5, 'Alex'],
['2018-11-06', 7, 'Alex'],
['2018-11-07', 7, 'Tawnya'],
['2018-11-08', 5, 'Carrie'],
['2018-11-09', 3, 'Carrie'],
['2018-11-12', 2, 'Ian'],
['2018-11-13', 7, 'Preston'],
['2018-11-14', 5, 'Alex'],
['2018-11-15', 3, 'Paige'],
['2018-11-16', 9, 'Alex'],
['2018-11-19', 11, 'Alex'],
['2018-11-20', 5, 'Khoa'],
['2018-11-21', 9, 'Khoa'],
['2018-11-22', 4, 'Josh'],
['2018-11-23', 5, 'Josh'],
['2018-11-26', 7, 'Alex'],
['2018-11-27', 9, 'Nick'],
['2018-11-28', 5, 'Brian'],
['2018-11-29', 5, 'Brian'],
['2018-11-30', 6, 'Alexis'],
['2018-12-03', 7, 'Alexis'],
['2018-12-04', 8, 'Brian'],
['2018-12-05', 5, 'Alexis'],
['2018-12-06', 8, 'Paige'],
['2018-12-07', 6, 'Paige'],
['2018-12-10', 6, 'Alex'],
['2018-12-11', 2, 'Brian'],
['2018-12-12', 7, 'Khoa'],
['2018-12-13', 5, 'Carrie'],
['2018-12-14', 5, 'Nick'],
['2018-12-17', 8, 'Tawnya'],
['2018-12-18', 8, 'Tawnya'],
['2018-12-19', 8, 'Tawnya'],
['2018-12-20', 10, 'Brian'],
['2018-12-21', 7, 'Tawnya'],
['2018-12-24', 12, 'Carrie'],
['2018-12-25', 7, 'Carrie'],
['2018-12-26', 6, 'Nick'],
['2018-12-27', 5, 'Alex'],
['2018-12-28', 11, 'Brian'],
['2018-12-31', 6, 'Nick'],
];
// CHART CONFIG
// -----------------------------
let chartConfig = {
type: 'calendar',
title: {
text: 'Donations Collected',
fontColor: '#212121',
fontFamily: 'Roboto',
fontSize: '32px',
fontWeight: 'normal',
textAlign: 'left',
width: '60%',
x: '10%',
y: '9%',
},
options: {
values: chartData,
day: {
inactive: {
backgroundColor: '#F5F5F5',
},
},
month: {
item: {
fontColor: 'gray',
fontSize: '9px',
},
outline: {
active: {
borderColor: '#BDBDBD',
},
},
},
palette: ['none', '#3F51B5'],
rows: 2,
scale: {
height: '10px',
width: '30%',
x: '75%',
y: '15%',
},
weekday: {
values: ['', 'Mon', '', 'Wed', '', 'Fri', ''],
item: {
fontColor: 'gray',
fontSize: '9px',
},
},
year: {
text: '2018',
visible: false,
},
},
plot: {
tooltip: {
text: '%data-day:<br><br>$%v0 in donations<br>collected by %data-info0.',
alpha: 0.8,
backgroundColor: '#212121',
borderColor: '#212121',
borderRadius: '3px',
fontColor: 'white',
fontFamily: 'Georgia',
fontSize: '12px',
offsetY: '-10px',
textAlign: 'center',
textAlpha: 1,
},
},
plotarea: {
marginTop: '30%',
marginBottom: '10%',
},
};
// RENDER CHARTS
// -----------------------------
zingchart.loadModules('calendar');
zingchart.render({
id: 'myChart',
data: chartConfig,
});
</script>
</body>
</html>
// DEFINE DATA
// -----------------------------
let chartData = [
['2018-01-01', 3, 'Alex'],
['2018-01-02', 12, 'Paige'],
['2018-01-03', 3, 'Carrie'],
['2018-01-04', 4, 'Derek'],
['2018-01-05', 9, 'Alexis'],
['2018-01-08', 11, 'Jeff'],
['2018-01-09', 5, 'Alex'],
['2018-01-10', 5, 'Brian'],
['2018-01-11', 9, 'Brian'],
['2018-01-12', 9, 'Brian'],
['2018-01-15', 9, 'Brian'],
['2018-01-16', 4, 'Alex'],
['2018-01-17', 6, 'Khoa'],
['2018-01-18', 5, 'Brian'],
['2018-01-19', 6, 'Tawnya'],
['2018-01-22', 2, 'Paige'],
['2018-01-23', 5, 'Jeff'],
['2018-01-24', 9, 'Alex'],
['2018-01-25', 6, 'Brian'],
['2018-01-26', 6, 'Carrie'],
['2018-01-29', 7, 'Brian'],
['2018-01-30', 7, 'Carrie'],
['2018-01-31', 12, 'Jeff'],
['2018-02-01', 3, 'Carrie'],
['2018-02-02', 3, 'Derek'],
['2018-02-05', 9, 'Derek'],
['2018-02-06', 9, 'Carrie'],
['2018-02-07', 9, 'Carrie'],
['2018-02-08', 4, 'Brian'],
['2018-02-09', 5, 'Brian'],
['2018-02-12', 8, 'Derek'],
['2018-02-13', 8, 'Derek'],
['2018-02-14', 3, 'Carrie'],
['2018-02-15', 7, 'Alexis'],
['2018-02-16', 5, 'Carrie'],
['2018-02-19', 9, 'Carrie'],
['2018-02-20', 6, 'Carrie'],
['2018-02-21', 5, 'Carrie'],
['2018-02-22', 8, 'Jeff'],
['2018-02-23', 10, 'Jeff'],
['2018-02-24', 4, 'Alex'],
['2018-02-26', 5, 'Alex'],
['2018-02-27', 9, 'Brian'],
['2018-02-28', 9, 'Preston'],
['2018-03-01', 3, 'Alex'],
['2018-03-02', 3, 'Jeff'],
['2018-03-05', 4, 'Jeff'],
['2018-03-06', 2, 'Alex'],
['2018-03-07', 10, 'Khoa'],
['2018-03-08', 9, 'Tawnya'],
['2018-03-09', 7, 'Tawnya'],
['2018-03-12', 8, 'Jeff'],
['2018-03-13', 7, 'Brian'],
['2018-03-14', 8, 'Alex'],
['2018-03-15', 8, 'Brian'],
['2018-03-16', 2, 'Preston'],
['2018-03-19', 3, 'Preston'],
['2018-03-20', 4, 'Jeff'],
['2018-03-21', 5, 'Jeff'],
['2018-03-22', 6, 'Jeff'],
['2018-03-23', 7, 'Carrie'],
['2018-03-26', 8, 'Brian'],
['2018-03-27', 8, 'Brian'],
['2018-03-28', 9, 'Ian'],
['2018-03-29', 7, 'Ian'],
['2018-03-30', 9, 'Preston'],
['2018-04-02', 7, 'Preston'],
['2018-04-03', 5, 'Ian'],
['2018-04-04', 6, 'Preston'],
['2018-04-05', 9, 'Brian'],
['2018-04-06', 4, 'Tawnya'],
['2018-04-09', 8, 'Tawnya'],
['2018-04-10', 9, 'Tawnya'],
['2018-04-11', 3, 'Preston'],
['2018-04-12', 5, 'Tawnya'],
['2018-04-13', 5, 'Alex'],
['2018-04-16', 8, 'Paige'],
['2018-04-17', 8, 'Paige'],
['2018-04-18', 9, 'Paige'],
['2018-04-19', 3, 'Paige'],
['2018-04-20', 6, 'Brian'],
['2018-04-23', 12, 'Ian'],
['2018-04-24', 6, 'Preston'],
['2018-04-25', 5, 'Carrie'],
['2018-04-26', 5, 'Jeff'],
['2018-04-27', 11, 'Jeff'],
['2018-04-30', 9, 'Jeff'],
['2018-05-01', 3, 'Brian'],
['2018-05-02', 5, 'Paige'],
['2018-05-03', 4, 'Paige'],
['2018-05-04', 9, 'Carrie'],
['2018-05-07', 5, 'Carrie'],
['2018-05-08', 5, 'Carrie'],
['2018-05-09', 7, 'Alex'],
['2018-05-10', 7, 'Alex'],
['2018-05-11', 5, 'Carrie'],
['2018-05-14', 3, 'Carrie'],
['2018-05-15', 2, 'Alex'],
['2018-05-16', 7, 'Alex'],
['2018-05-17', 5, 'Josh'],
['2018-05-18', 3, 'Josh'],
['2018-05-21', 9, 'Preston'],
['2018-05-22', 11, 'Carrie'],
['2018-05-23', 5, 'Carrie'],
['2018-05-24', 9, 'Tawnya'],
['2018-05-25', 4, 'Tawnya'],
['2018-05-28', 5, 'Preston'],
['2018-05-29', 7, 'Josh'],
['2018-05-30', 9, 'Rigie'],
['2018-05-31', 5, 'Carrie'],
['2018-06-01', 5, 'Carrie'],
['2018-06-04', 6, 'Nick'],
['2018-06-05', 7, 'Jeff'],
['2018-06-06', 8, 'Jeff'],
['2018-06-07', 5, 'Brian'],
['2018-06-08', 8, 'Paige'],
['2018-06-11', 6, 'Brian'],
['2018-06-12', 6, 'Brian'],
['2018-06-13', 2, 'Brian'],
['2018-06-14', 7, 'Josh'],
['2018-06-15', 5, 'Carrie'],
['2018-06-18', 5, 'Preston'],
['2018-06-19', 8, 'Brian'],
['2018-06-20', 8, 'Paige'],
['2018-06-21', 8, 'Paige'],
['2018-06-22', 10, 'Paige'],
['2018-06-25', 7, 'Brian'],
['2018-06-26', 12, 'Tawnya'],
['2018-06-27', 7, 'Rigie'],
['2018-06-28', 6, 'Tawnya'],
['2018-06-29', 12, 'Derek'],
['2018-07-02', 3, 'Derek'],
['2018-07-03', 4, 'Derek'],
['2018-07-04', 9, 'Derek'],
['2018-07-05', 11, 'Derek'],
['2018-07-06', 5, 'Derek'],
['2018-07-09', 5, 'Derek'],
['2018-07-10', 9, 'Nick'],
['2018-07-11', 9, 'Preston'],
['2018-07-12', 9, 'Jeff'],
['2018-07-13', 4, 'Josh'],
['2018-07-16', 6, 'Josh'],
['2018-07-17', 5, 'Brian'],
['2018-07-18', 6, 'Tawnya'],
['2018-07-19', 2, 'Tawnya'],
['2018-07-20', 5, 'Tawnya'],
['2018-07-23', 9, 'Brian'],
['2018-07-24', 6, 'Brian'],
['2018-07-25', 6, 'Paige'],
['2018-07-26', 7, 'Paige'],
['2018-07-27', 7, 'Paige'],
['2018-07-30', 12, 'Brian'],
['2018-07-31', 3, 'Brian'],
['2018-08-01', 3, 'Brian'],
['2018-08-02', 9, 'Preston'],
['2018-08-03', 9, 'Preston'],
['2018-08-06', 9, 'Brian'],
['2018-08-07', 4, 'Tawnya'],
['2018-08-08', 5, 'Tawnya'],
['2018-08-09', 8, 'Tawnya'],
['2018-08-10', 8, 'Alex'],
['2018-08-13', 3, 'Jeff'],
['2018-08-14', 7, 'Nick'],
['2018-08-15', 5, 'Alex'],
['2018-08-16', 9, 'Alex'],
['2018-08-17', 6, 'Paige'],
['2018-08-20', 5, 'Paige'],
['2018-08-21', 8, 'Paige'],
['2018-08-22', 10, 'Nick'],
['2018-08-23', 4, 'Alex'],
['2018-08-24', 5, 'Alex'],
['2018-08-27', 9, 'Alex'],
['2018-08-28', 9, 'Carrie'],
['2018-08-29', 3, 'Carrie'],
['2018-08-30', 3, 'Alex'],
['2018-08-31', 4, 'Alex'],
['2018-09-03', 2, 'Nick'],
['2018-09-04', 10, 'Alex'],
['2018-09-05', 9, 'Nick'],
['2018-09-06', 7, 'Alex'],
['2018-09-07', 8, 'Ian'],
['2018-09-10', 7, 'Preston'],
['2018-09-11', 8, 'Ian'],
['2018-09-12', 8, 'Paige'],
['2018-09-13', 2, 'Brian'],
['2018-09-14', 3, 'Nick'],
['2018-09-17', 4, 'Khoa'],
['2018-09-18', 5, 'Jeff'],
['2018-09-19', 6, 'Rigie'],
['2018-09-20', 7, 'Brian'],
['2018-09-21', 8, 'Brian'],
['2018-09-24', 8, 'Tawnya'],
['2018-09-25', 9, 'Nick'],
['2018-09-26', 7, 'Alex'],
['2018-09-27', 9, 'Khoa'],
['2018-09-28', 7, 'Khoa'],
['2018-10-01', 5, 'Khoa'],
['2018-10-02', 6, 'Khoa'],
['2018-10-03', 9, 'Khoa'],
['2018-10-04', 4, 'Khoa'],
['2018-10-05', 8, 'Alex'],
['2018-10-08', 9, 'Nick'],
['2018-10-09', 3, 'Nick'],
['2018-10-10', 5, 'Nick'],
['2018-10-11', 5, 'Carrie'],
['2018-10-12', 8, 'Paige'],
['2018-10-15', 8, 'Alex'],
['2018-10-16', 9, 'Nick'],
['2018-10-17', 3, 'Nick'],
['2018-10-18', 6, 'Josh'],
['2018-10-19', 12, 'Khoa'],
['2018-10-22', 6, 'Khoa'],
['2018-10-23', 5, 'Paige'],
['2018-10-24', 5, 'Paige'],
['2018-10-25', 11, 'Khoa'],
['2018-10-26', 9, 'Brian'],
['2018-10-29', 3, 'Nick'],
['2018-10-30', 5, 'Nick'],
['2018-10-31', 4, 'Nick'],
['2018-11-01', 9, 'Alex'],
['2018-11-02', 5, 'Alex'],
['2018-11-05', 5, 'Alex'],
['2018-11-06', 7, 'Alex'],
['2018-11-07', 7, 'Tawnya'],
['2018-11-08', 5, 'Carrie'],
['2018-11-09', 3, 'Carrie'],
['2018-11-12', 2, 'Ian'],
['2018-11-13', 7, 'Preston'],
['2018-11-14', 5, 'Alex'],
['2018-11-15', 3, 'Paige'],
['2018-11-16', 9, 'Alex'],
['2018-11-19', 11, 'Alex'],
['2018-11-20', 5, 'Khoa'],
['2018-11-21', 9, 'Khoa'],
['2018-11-22', 4, 'Josh'],
['2018-11-23', 5, 'Josh'],
['2018-11-26', 7, 'Alex'],
['2018-11-27', 9, 'Nick'],
['2018-11-28', 5, 'Brian'],
['2018-11-29', 5, 'Brian'],
['2018-11-30', 6, 'Alexis'],
['2018-12-03', 7, 'Alexis'],
['2018-12-04', 8, 'Brian'],
['2018-12-05', 5, 'Alexis'],
['2018-12-06', 8, 'Paige'],
['2018-12-07', 6, 'Paige'],
['2018-12-10', 6, 'Alex'],
['2018-12-11', 2, 'Brian'],
['2018-12-12', 7, 'Khoa'],
['2018-12-13', 5, 'Carrie'],
['2018-12-14', 5, 'Nick'],
['2018-12-17', 8, 'Tawnya'],
['2018-12-18', 8, 'Tawnya'],
['2018-12-19', 8, 'Tawnya'],
['2018-12-20', 10, 'Brian'],
['2018-12-21', 7, 'Tawnya'],
['2018-12-24', 12, 'Carrie'],
['2018-12-25', 7, 'Carrie'],
['2018-12-26', 6, 'Nick'],
['2018-12-27', 5, 'Alex'],
['2018-12-28', 11, 'Brian'],
['2018-12-31', 6, 'Nick'],
];
// CHART CONFIG
// -----------------------------
let chartConfig = {
type: 'calendar',
title: {
text: 'Donations Collected',
fontColor: '#212121',
fontFamily: 'Roboto',
fontSize: '32px',
fontWeight: 'normal',
textAlign: 'left',
width: '60%',
x: '10%',
y: '9%',
},
options: {
values: chartData,
day: {
inactive: {
backgroundColor: '#F5F5F5',
},
},
month: {
item: {
fontColor: 'gray',
fontSize: '9px',
},
outline: {
active: {
borderColor: '#BDBDBD',
},
},
},
palette: ['none', '#3F51B5'],
rows: 2,
scale: {
height: '10px',
width: '30%',
x: '75%',
y: '15%',
},
weekday: {
values: ['', 'Mon', '', 'Wed', '', 'Fri', ''],
item: {
fontColor: 'gray',
fontSize: '9px',
},
},
year: {
text: '2018',
visible: false,
},
},
plot: {
tooltip: {
text: '%data-day:<br><br>$%v0 in donations<br>collected by %data-info0.',
alpha: 0.8,
backgroundColor: '#212121',
borderColor: '#212121',
borderRadius: '3px',
fontColor: 'white',
fontFamily: 'Georgia',
fontSize: '12px',
offsetY: '-10px',
textAlign: 'center',
textAlpha: 1,
},
},
plotarea: {
marginTop: '30%',
marginBottom: '10%',
},
};
// RENDER CHARTS
// -----------------------------
zingchart.loadModules('calendar');
zingchart.render({
id: 'myChart',
data: chartConfig,
});
