<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ZingSoft Demo</title>
<script nonce="undefined" src="https://cdn.zingchart.com/zingchart.min.js"></script>
<style></style>
</head>
<body>
<div id='myChart'></div>
<script>
ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"];
var myConfig = {
"type": "calendar",
"title": {
"text": "Donations",
"font-family": "Georgia",
},
"options": {
"year": {
"text": "2016",
"visible": false,
},
"start-month": 1, //January
"end-month": 6, //March
"firstday": "s", //Sunday,
"palette": ["black", "#3399ff", "#e6f2ff"], //Negative, positive, and optional zero value
"weekday": {
"values": ["", "M", "", "W", "", "F", ""],
"item": {
"font-color": "gray",
"font-size": 9
}
},
"month": {
"item": {
"font-color": "gray",
"font-size": 9
}
},
"values": [
["2016-01-04", 30],
["2016-01-05", 31],
["2016-01-06", 34],
["2016-01-07", 16],
["2016-01-08", 59],
["2016-01-11", 5],
["2016-01-12", 55],
["2016-01-13", 91],
["2016-01-14", 99],
["2016-01-15", 90],
["2016-01-18", 64],
["2016-01-19", 65],
["2016-01-20", 15],
["2016-01-21", 16],
["2016-01-22", 21],
["2016-01-25", 25],
["2016-01-26", 9],
["2016-01-27", 61],
["2016-01-28", 69],
["2016-01-29", 70],
["2016-02-01", 17],
["2016-02-02", 29],
["2016-02-03", 31],
["2016-02-04", 33],
["2016-02-05", 19],
["2016-02-08", 29],
["2016-02-09", 39],
["2016-02-10", 49],
["2016-02-11", 50],
["2016-02-12", 80],
["2016-02-15", 81],
["2016-02-16", 53],
["2016-02-17", 57],
["2016-02-18", 35],
["2016-02-19", 19],
["2016-02-22", 60],
["2016-02-23", 51],
["2016-02-24", 80],
["2016-02-25", 83],
["2016-02-26", 44],
["2016-02-29", 45],
["2016-03-01", 49],
["2016-03-02", 19],
["2016-03-03", 31],
["2016-03-04", 34],
["2016-03-07", 41],
["2016-03-08", 20],
["2016-03-09", 29],
["2016-03-10", 90],
["2016-03-11", 87],
["2016-03-14", 60],
["2016-03-15", 70],
["2016-03-16", 80],
["2016-03-17", 81],
["2016-03-18", 82],
["2016-03-21", 83],
["2016-03-22", 84],
["2016-03-23", 85],
["2016-03-24", 86],
["2016-03-25", 87],
["2016-03-28", 88],
["2016-03-29", 89],
["2016-03-30", 90],
["2016-03-31", 70],
["2016-04-01", 79],
["2016-04-04", 77],
["2016-04-05", 55],
["2016-04-06", 66],
["2016-04-07", 49],
["2016-04-08", 47],
["2016-04-11", 78],
["2016-04-12", 39],
["2016-04-13", 38],
["2016-04-14", 35],
["2016-04-15", 50],
["2016-04-18", 81],
["2016-04-19", 85],
["2016-04-20", 90],
["2016-04-21", 61],
["2016-04-22", 67],
["2016-04-25", 65],
["2016-04-26", 56],
["2016-04-27", 51],
["2016-04-28", 59],
["2016-04-29", 19],
["2016-05-02", 29],
["2016-05-03", 31],
["2016-05-04", 35],
["2016-05-05", 41],
["2016-05-06", 49],
["2016-05-09", 51],
["2016-05-10", 55],
["2016-05-11", 17],
["2016-05-12", 7],
["2016-05-13", 5],
["2016-05-16", 3],
["2016-05-17", 29],
["2016-05-18", 37],
["2016-05-19", 45],
["2016-05-20", 53],
["2016-05-23", 29],
["2016-05-24", 28],
["2016-05-25", 25],
["2016-05-26", 39],
["2016-05-27", 41],
["2016-05-30", 35],
["2016-05-31", 37],
["2016-06-01", 39],
["2016-06-02", 51],
["2016-06-03", 55],
["2016-06-06", 61],
["2016-06-07", 70],
["2016-06-08", 68],
["2016-06-09", 54],
["2016-06-10", 58],
["2016-06-13", 61],
["2016-06-14", 66],
["2016-06-15", 72],
["2016-06-16", 27],
["2016-06-17", 51],
["2016-06-20", 50],
["2016-06-21", 80],
["2016-06-22", 88],
["2016-06-23", 87],
["2016-06-24", 100],
["2016-06-27", 70],
["2016-06-28", 56],
["2016-06-29", 67],
["2016-06-30", 65],
]
},
"tooltip": { //Fixed Tooltip
"text": "%data-day",
"font-family": "Georgia",
"font-color": "#001a33",
"background-color": "none",
"border-color": "none",
"sticky": true,
"timeout": 30000,
"x": "20%",
"y": "78%"
},
"labels": [{
"border-width": 1,
"border-color": "gray",
"width": "40%",
"height": "30%",
"x": "8%",
"y": "60%",
},
{
"text": "Daily Donation Count",
"font-family": "Georgia",
"font-color": "#001a33",
"x": "18%",
"y": "65%"
},
{ //Dynamic Label with Token
"text": "%plot-value",
"font-color": "#3399ff",
"font-size": 35,
"font-family": "Georgia",
"x": "23%",
"y": "68%"
},
{
"border-width": 1,
"border-color": "gray",
"width": "40%",
"height": "30%",
"x": "52%",
"y": "60%"
},
{
"text": "Total Donations",
"font-family": "Georgia",
"font-color": "#001a33",
"x": "65%",
"y": "65%"
},
{
"text": "6808",
"font-color": "#3399ff",
"font-size": 35,
"font-family": "Georgia",
"x": "65%",
"y": "68%"
},
{
"text": "Jan 1 - Jun 30",
"font-family": "Georgia",
"font-color": "#001a33",
"x": "65%",
"y": "80%"
}
],
"plotarea": {
"margin-top": "20%",
"margin-bottom": "50%",
"margin-left": "8%",
"margin-right": "8%"
}
};
zingchart.loadModules('calendar', function() {
zingchart.render({
id: 'myChart',
data: myConfig,
height: 400,
width: 600
});
});
</script>
</body>
</html>
var myConfig = {
"type": "calendar",
"title": {
"text": "Donations",
"font-family": "Georgia",
},
"options": {
"year": {
"text": "2016",
"visible": false,
},
"start-month": 1, //January
"end-month": 6, //March
"firstday": "s", //Sunday,
"palette": ["black", "#3399ff", "#e6f2ff"], //Negative, positive, and optional zero value
"weekday": {
"values": ["", "M", "", "W", "", "F", ""],
"item": {
"font-color": "gray",
"font-size": 9
}
},
"month": {
"item": {
"font-color": "gray",
"font-size": 9
}
},
"values": [
["2016-01-04", 30],
["2016-01-05", 31],
["2016-01-06", 34],
["2016-01-07", 16],
["2016-01-08", 59],
["2016-01-11", 5],
["2016-01-12", 55],
["2016-01-13", 91],
["2016-01-14", 99],
["2016-01-15", 90],
["2016-01-18", 64],
["2016-01-19", 65],
["2016-01-20", 15],
["2016-01-21", 16],
["2016-01-22", 21],
["2016-01-25", 25],
["2016-01-26", 9],
["2016-01-27", 61],
["2016-01-28", 69],
["2016-01-29", 70],
["2016-02-01", 17],
["2016-02-02", 29],
["2016-02-03", 31],
["2016-02-04", 33],
["2016-02-05", 19],
["2016-02-08", 29],
["2016-02-09", 39],
["2016-02-10", 49],
["2016-02-11", 50],
["2016-02-12", 80],
["2016-02-15", 81],
["2016-02-16", 53],
["2016-02-17", 57],
["2016-02-18", 35],
["2016-02-19", 19],
["2016-02-22", 60],
["2016-02-23", 51],
["2016-02-24", 80],
["2016-02-25", 83],
["2016-02-26", 44],
["2016-02-29", 45],
["2016-03-01", 49],
["2016-03-02", 19],
["2016-03-03", 31],
["2016-03-04", 34],
["2016-03-07", 41],
["2016-03-08", 20],
["2016-03-09", 29],
["2016-03-10", 90],
["2016-03-11", 87],
["2016-03-14", 60],
["2016-03-15", 70],
["2016-03-16", 80],
["2016-03-17", 81],
["2016-03-18", 82],
["2016-03-21", 83],
["2016-03-22", 84],
["2016-03-23", 85],
["2016-03-24", 86],
["2016-03-25", 87],
["2016-03-28", 88],
["2016-03-29", 89],
["2016-03-30", 90],
["2016-03-31", 70],
["2016-04-01", 79],
["2016-04-04", 77],
["2016-04-05", 55],
["2016-04-06", 66],
["2016-04-07", 49],
["2016-04-08", 47],
["2016-04-11", 78],
["2016-04-12", 39],
["2016-04-13", 38],
["2016-04-14", 35],
["2016-04-15", 50],
["2016-04-18", 81],
["2016-04-19", 85],
["2016-04-20", 90],
["2016-04-21", 61],
["2016-04-22", 67],
["2016-04-25", 65],
["2016-04-26", 56],
["2016-04-27", 51],
["2016-04-28", 59],
["2016-04-29", 19],
["2016-05-02", 29],
["2016-05-03", 31],
["2016-05-04", 35],
["2016-05-05", 41],
["2016-05-06", 49],
["2016-05-09", 51],
["2016-05-10", 55],
["2016-05-11", 17],
["2016-05-12", 7],
["2016-05-13", 5],
["2016-05-16", 3],
["2016-05-17", 29],
["2016-05-18", 37],
["2016-05-19", 45],
["2016-05-20", 53],
["2016-05-23", 29],
["2016-05-24", 28],
["2016-05-25", 25],
["2016-05-26", 39],
["2016-05-27", 41],
["2016-05-30", 35],
["2016-05-31", 37],
["2016-06-01", 39],
["2016-06-02", 51],
["2016-06-03", 55],
["2016-06-06", 61],
["2016-06-07", 70],
["2016-06-08", 68],
["2016-06-09", 54],
["2016-06-10", 58],
["2016-06-13", 61],
["2016-06-14", 66],
["2016-06-15", 72],
["2016-06-16", 27],
["2016-06-17", 51],
["2016-06-20", 50],
["2016-06-21", 80],
["2016-06-22", 88],
["2016-06-23", 87],
["2016-06-24", 100],
["2016-06-27", 70],
["2016-06-28", 56],
["2016-06-29", 67],
["2016-06-30", 65],
]
},
"tooltip": { //Fixed Tooltip
"text": "%data-day",
"font-family": "Georgia",
"font-color": "#001a33",
"background-color": "none",
"border-color": "none",
"sticky": true,
"timeout": 30000,
"x": "20%",
"y": "78%"
},
"labels": [{
"border-width": 1,
"border-color": "gray",
"width": "40%",
"height": "30%",
"x": "8%",
"y": "60%",
},
{
"text": "Daily Donation Count",
"font-family": "Georgia",
"font-color": "#001a33",
"x": "18%",
"y": "65%"
},
{ //Dynamic Label with Token
"text": "%plot-value",
"font-color": "#3399ff",
"font-size": 35,
"font-family": "Georgia",
"x": "23%",
"y": "68%"
},
{
"border-width": 1,
"border-color": "gray",
"width": "40%",
"height": "30%",
"x": "52%",
"y": "60%"
},
{
"text": "Total Donations",
"font-family": "Georgia",
"font-color": "#001a33",
"x": "65%",
"y": "65%"
},
{
"text": "6808",
"font-color": "#3399ff",
"font-size": 35,
"font-family": "Georgia",
"x": "65%",
"y": "68%"
},
{
"text": "Jan 1 - Jun 30",
"font-family": "Georgia",
"font-color": "#001a33",
"x": "65%",
"y": "80%"
}
],
"plotarea": {
"margin-top": "20%",
"margin-bottom": "50%",
"margin-left": "8%",
"margin-right": "8%"
}
};
zingchart.loadModules('calendar', function() {
zingchart.render({
id: 'myChart',
data: myConfig,
height: 400,
width: 600
});
});