<!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></style>
</head>
<body>
<div id='myChart'></div>
<script>
ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"];
var myConfig = {
"type": "calendar",
"title": {
"text": "Nanowrimo Word Count Calendar",
"font-family": "Overlock",
"font-color": "#00344d",
"font-size": 30,
},
"subtitle": {
"text": "November 2015",
"font-family": "Georgia",
"font-color": "#00344d",
"font-size": 12,
"font-weight": "normal",
"y": "10%"
},
"background-color": "#b3e7ff #e6f7ff",
"options": {
"year": {
"text": "2015",
"visible": false,
"font-size": 16,
},
"start-month": 11, //November
"end-month": 11, //November
"firstday": "s", //Sunday,
"palette": ["purple", "orange"],
"weekday": {
"values": ["Sun", "Mon", "Tues", "Wed", "Thurs", "Fri", "Sat"],
"item": {
"font-color": "#00344d",
"font-family": "Georgia",
"font-size": 10
}
},
"month": {
"values": [null, null, null, null, null, null, null, null, null, null, null, null]
},
"values": [
["2015-11-01", 1500, "Nov 1st"],
["2015-11-02", 1600, "Nov 2nd"],
["2015-11-03", 3000, "Nov 3rd"],
["2015-11-04", 3400, "Nov 4th"],
["2015-11-05", 503, "Nov 5th"],
["2015-11-06", 1981, "Nov 6th"],
["2015-11-07", 2100, "Nov 7th"],
["2015-11-08", 914, "Nov 8th"],
["2015-11-09", 1400, "Nov 9th"],
["2015-11-10", 3034, "Nov 10th"],
["2015-11-11", 1987, "Nov 11th"],
["2015-11-12", 1700, "Nov 12th"],
["2015-11-13", 1111, "Nov 13th"],
["2015-11-14", 1999, "Nov 14th"],
["2015-11-15", 4500, "Nov 15th"],
["2015-11-16", 654, "Nov 16th"],
["2015-11-17", 1200, "Nov 17th"],
["2015-11-18", 4440, "Nov 18th"],
["2015-11-19", 1500, "Nov 19th"],
["2015-11-20", 1500, "Nov 20th"],
["2015-11-21", 1600, "Nov 21st"],
["2015-11-22", 1700, "Nov 22nd"],
["2015-11-23", 1900, "Nov 23rd"],
["2015-11-24", 2150, "Nov 24th"],
["2015-11-25", 981, "Nov 25th"],
["2015-11-26", 340, "Nov 26th"],
["2015-11-27", 3100, "Nov 27th"],
["2015-11-28", 1200, "Nov 28th"],
["2015-11-29", 1500, "Nov 29th"],
["2015-11-30", 900, "Nov 30th"],
]
},
"tooltip": { //Tooltips
"text": "On %data-info0,<br>I wrote<br>%v words.",
"thousands-separator": ",",
"font-family": "Times New Roman",
"font-color": "orange",
"font-size": 14,
"align": "center",
"background-color": "none",
"border-color": "none",
"padding": "20%",
"width": "20%",
"height": "22%",
"sticky": true,
"timeout": 30000,
"x": "72.5%",
"y": "32%"
},
"labels": [{
"text": "Daily Word Count",
"vertical-align": "top",
"font-family": "Overlock",
"font-color": "#00344d",
"font-size": 16,
"font-weight": "bold",
"background-color": "#fff9e6",
"border-width": 1,
"line-style": "dotted",
"border-color": "#00344d",
"border-radius": "5px",
"padding": "15%",
"width": "25%",
"height": "45%",
"x": "70%",
"y": "20%",
},
{
"background-color": "none",
"border-color": "orange",
"border-width": 1,
"border-radius": "5px",
"line-style": "dotted",
"width": "20%",
"height": "22%",
"x": "72.5%",
"y": "32%"
},
{
"text": "Daily Goal: 1,700 words",
"font-family": "Overlock",
"font-color": "#00344d",
"font-size": 12,
"font-weight": "bold",
"width": "20%",
"height": "15%",
"x": "72.5%",
"y": "52%"
},
{
"text": "National Novel Writing Month brings together participants from all over the world to write a 50,000 word novel over the course of 30 days.",
"vertical-align": "top",
"font-family": "Georgia",
"font-color": "#00344d",
"font-size": 10,
"wrap-text": true,
"background-color": "#fff9e6",
"border-width": 1,
"line-style": "dotted",
"border-color": "#00344d",
"border-radius": "5px",
"padding": "10%",
"width": "25%",
"height": "20%",
"x": "70%",
"y": "70%",
},
],
"plot": {
"value-box": { //Numbered Calendar Days
"font-family": "Courier",
"font-size": 15,
"font-color": "white",
"font-weight": "bold"
}
},
"plotarea": {
"margin-top": "20%",
"margin-bottom": "10%",
"margin-left": "15%",
"margin-right": "35%"
}
};
zingchart.loadModules('calendar', function() {
zingchart.render({
id: 'myChart',
data: myConfig,
height: 400,
width: "100%"
});
});
</script>
</body>
</html>
<!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 src="https://cdn.zingchart.com/zingchart.min.js"></script>
</head>
<body>
<div id='myChart'></div>
</body>
</html>
var myConfig = {
"type": "calendar",
"title": {
"text": "Nanowrimo Word Count Calendar",
"font-family": "Overlock",
"font-color": "#00344d",
"font-size": 30,
},
"subtitle": {
"text": "November 2015",
"font-family": "Georgia",
"font-color": "#00344d",
"font-size": 12,
"font-weight": "normal",
"y": "10%"
},
"background-color": "#b3e7ff #e6f7ff",
"options": {
"year": {
"text": "2015",
"visible": false,
"font-size": 16,
},
"start-month": 11, //November
"end-month": 11, //November
"firstday": "s", //Sunday,
"palette": ["purple", "orange"],
"weekday": {
"values": ["Sun", "Mon", "Tues", "Wed", "Thurs", "Fri", "Sat"],
"item": {
"font-color": "#00344d",
"font-family": "Georgia",
"font-size": 10
}
},
"month": {
"values": [null, null, null, null, null, null, null, null, null, null, null, null]
},
"values": [
["2015-11-01", 1500, "Nov 1st"],
["2015-11-02", 1600, "Nov 2nd"],
["2015-11-03", 3000, "Nov 3rd"],
["2015-11-04", 3400, "Nov 4th"],
["2015-11-05", 503, "Nov 5th"],
["2015-11-06", 1981, "Nov 6th"],
["2015-11-07", 2100, "Nov 7th"],
["2015-11-08", 914, "Nov 8th"],
["2015-11-09", 1400, "Nov 9th"],
["2015-11-10", 3034, "Nov 10th"],
["2015-11-11", 1987, "Nov 11th"],
["2015-11-12", 1700, "Nov 12th"],
["2015-11-13", 1111, "Nov 13th"],
["2015-11-14", 1999, "Nov 14th"],
["2015-11-15", 4500, "Nov 15th"],
["2015-11-16", 654, "Nov 16th"],
["2015-11-17", 1200, "Nov 17th"],
["2015-11-18", 4440, "Nov 18th"],
["2015-11-19", 1500, "Nov 19th"],
["2015-11-20", 1500, "Nov 20th"],
["2015-11-21", 1600, "Nov 21st"],
["2015-11-22", 1700, "Nov 22nd"],
["2015-11-23", 1900, "Nov 23rd"],
["2015-11-24", 2150, "Nov 24th"],
["2015-11-25", 981, "Nov 25th"],
["2015-11-26", 340, "Nov 26th"],
["2015-11-27", 3100, "Nov 27th"],
["2015-11-28", 1200, "Nov 28th"],
["2015-11-29", 1500, "Nov 29th"],
["2015-11-30", 900, "Nov 30th"],
]
},
"tooltip": { //Tooltips
"text": "On %data-info0,<br>I wrote<br>%v words.",
"thousands-separator": ",",
"font-family": "Times New Roman",
"font-color": "orange",
"font-size": 14,
"align": "center",
"background-color": "none",
"border-color": "none",
"padding": "20%",
"width": "20%",
"height": "22%",
"sticky": true,
"timeout": 30000,
"x": "72.5%",
"y": "32%"
},
"labels": [{
"text": "Daily Word Count",
"vertical-align": "top",
"font-family": "Overlock",
"font-color": "#00344d",
"font-size": 16,
"font-weight": "bold",
"background-color": "#fff9e6",
"border-width": 1,
"line-style": "dotted",
"border-color": "#00344d",
"border-radius": "5px",
"padding": "15%",
"width": "25%",
"height": "45%",
"x": "70%",
"y": "20%",
},
{
"background-color": "none",
"border-color": "orange",
"border-width": 1,
"border-radius": "5px",
"line-style": "dotted",
"width": "20%",
"height": "22%",
"x": "72.5%",
"y": "32%"
},
{
"text": "Daily Goal: 1,700 words",
"font-family": "Overlock",
"font-color": "#00344d",
"font-size": 12,
"font-weight": "bold",
"width": "20%",
"height": "15%",
"x": "72.5%",
"y": "52%"
},
{
"text": "National Novel Writing Month brings together participants from all over the world to write a 50,000 word novel over the course of 30 days.",
"vertical-align": "top",
"font-family": "Georgia",
"font-color": "#00344d",
"font-size": 10,
"wrap-text": true,
"background-color": "#fff9e6",
"border-width": 1,
"line-style": "dotted",
"border-color": "#00344d",
"border-radius": "5px",
"padding": "10%",
"width": "25%",
"height": "20%",
"x": "70%",
"y": "70%",
},
],
"plot": {
"value-box": { //Numbered Calendar Days
"font-family": "Courier",
"font-size": 15,
"font-color": "white",
"font-weight": "bold"
}
},
"plotarea": {
"margin-top": "20%",
"margin-bottom": "10%",
"margin-left": "15%",
"margin-right": "35%"
}
};
zingchart.loadModules('calendar', function() {
zingchart.render({
id: 'myChart',
data: myConfig,
height: 400,
width: "100%"
});
});