• Edit
  • Download
    1. <!DOCTYPE html>
    2. <html>
    3.  
    4. <head>
    5.   <meta charset="utf-8">
    6.   <title>ZingSoft Demo</title>
    7.  
    8.   <script nonce="undefined" src="https://cdn.zingchart.com/zingchart.min.js"></script>
    9.   <style></style>
    10. </head>
    11.  
    12. <body>
    13.   <div id='myChart'></div>
    14.   <script>
    15.     ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"];
    16.     var myConfig = {
    17.       "type": "calendar",
    18.       "title": {
    19.         "text": "Donations",
    20.         "font-family": "Georgia",
    21.       },
    22.       "options": {
    23.         "year": {
    24.           "text": "2016",
    25.           "visible": false,
    26.         },
    27.         "start-month": 1, //January
    28.         "end-month": 6, //March
    29.         "firstday": "s", //Sunday,
    30.         "palette": ["black", "#3399ff", "#e6f2ff"], //Negative, positive, and optional zero value
    31.         "weekday": {
    32.           "values": ["", "M", "", "W", "", "F", ""],
    33.           "item": {
    34.             "font-color": "gray",
    35.             "font-size": 9
    36.           }
    37.         },
    38.         "month": {
    39.           "item": {
    40.             "font-color": "gray",
    41.             "font-size": 9
    42.           }
    43.         },
    44.         "values": [
    45.           ["2016-01-04", 30],
    46.           ["2016-01-05", 31],
    47.           ["2016-01-06", 34],
    48.           ["2016-01-07", 16],
    49.           ["2016-01-08", 59],
    50.           ["2016-01-11", 5],
    51.           ["2016-01-12", 55],
    52.           ["2016-01-13", 91],
    53.           ["2016-01-14", 99],
    54.           ["2016-01-15", 90],
    55.           ["2016-01-18", 64],
    56.           ["2016-01-19", 65],
    57.           ["2016-01-20", 15],
    58.           ["2016-01-21", 16],
    59.           ["2016-01-22", 21],
    60.           ["2016-01-25", 25],
    61.           ["2016-01-26", 9],
    62.           ["2016-01-27", 61],
    63.           ["2016-01-28", 69],
    64.           ["2016-01-29", 70],
    65.           ["2016-02-01", 17],
    66.           ["2016-02-02", 29],
    67.           ["2016-02-03", 31],
    68.           ["2016-02-04", 33],
    69.           ["2016-02-05", 19],
    70.           ["2016-02-08", 29],
    71.           ["2016-02-09", 39],
    72.           ["2016-02-10", 49],
    73.           ["2016-02-11", 50],
    74.           ["2016-02-12", 80],
    75.           ["2016-02-15", 81],
    76.           ["2016-02-16", 53],
    77.           ["2016-02-17", 57],
    78.           ["2016-02-18", 35],
    79.           ["2016-02-19", 19],
    80.           ["2016-02-22", 60],
    81.           ["2016-02-23", 51],
    82.           ["2016-02-24", 80],
    83.           ["2016-02-25", 83],
    84.           ["2016-02-26", 44],
    85.           ["2016-02-29", 45],
    86.           ["2016-03-01", 49],
    87.           ["2016-03-02", 19],
    88.           ["2016-03-03", 31],
    89.           ["2016-03-04", 34],
    90.           ["2016-03-07", 41],
    91.           ["2016-03-08", 20],
    92.           ["2016-03-09", 29],
    93.           ["2016-03-10", 90],
    94.           ["2016-03-11", 87],
    95.           ["2016-03-14", 60],
    96.           ["2016-03-15", 70],
    97.           ["2016-03-16", 80],
    98.           ["2016-03-17", 81],
    99.           ["2016-03-18", 82],
    100.           ["2016-03-21", 83],
    101.           ["2016-03-22", 84],
    102.           ["2016-03-23", 85],
    103.           ["2016-03-24", 86],
    104.           ["2016-03-25", 87],
    105.           ["2016-03-28", 88],
    106.           ["2016-03-29", 89],
    107.           ["2016-03-30", 90],
    108.           ["2016-03-31", 70],
    109.           ["2016-04-01", 79],
    110.           ["2016-04-04", 77],
    111.           ["2016-04-05", 55],
    112.           ["2016-04-06", 66],
    113.           ["2016-04-07", 49],
    114.           ["2016-04-08", 47],
    115.           ["2016-04-11", 78],
    116.           ["2016-04-12", 39],
    117.           ["2016-04-13", 38],
    118.           ["2016-04-14", 35],
    119.           ["2016-04-15", 50],
    120.           ["2016-04-18", 81],
    121.           ["2016-04-19", 85],
    122.           ["2016-04-20", 90],
    123.           ["2016-04-21", 61],
    124.           ["2016-04-22", 67],
    125.           ["2016-04-25", 65],
    126.           ["2016-04-26", 56],
    127.           ["2016-04-27", 51],
    128.           ["2016-04-28", 59],
    129.           ["2016-04-29", 19],
    130.           ["2016-05-02", 29],
    131.           ["2016-05-03", 31],
    132.           ["2016-05-04", 35],
    133.           ["2016-05-05", 41],
    134.           ["2016-05-06", 49],
    135.           ["2016-05-09", 51],
    136.           ["2016-05-10", 55],
    137.           ["2016-05-11", 17],
    138.           ["2016-05-12", 7],
    139.           ["2016-05-13", 5],
    140.           ["2016-05-16", 3],
    141.           ["2016-05-17", 29],
    142.           ["2016-05-18", 37],
    143.           ["2016-05-19", 45],
    144.           ["2016-05-20", 53],
    145.           ["2016-05-23", 29],
    146.           ["2016-05-24", 28],
    147.           ["2016-05-25", 25],
    148.           ["2016-05-26", 39],
    149.           ["2016-05-27", 41],
    150.           ["2016-05-30", 35],
    151.           ["2016-05-31", 37],
    152.           ["2016-06-01", 39],
    153.           ["2016-06-02", 51],
    154.           ["2016-06-03", 55],
    155.           ["2016-06-06", 61],
    156.           ["2016-06-07", 70],
    157.           ["2016-06-08", 68],
    158.           ["2016-06-09", 54],
    159.           ["2016-06-10", 58],
    160.           ["2016-06-13", 61],
    161.           ["2016-06-14", 66],
    162.           ["2016-06-15", 72],
    163.           ["2016-06-16", 27],
    164.           ["2016-06-17", 51],
    165.           ["2016-06-20", 50],
    166.           ["2016-06-21", 80],
    167.           ["2016-06-22", 88],
    168.           ["2016-06-23", 87],
    169.           ["2016-06-24", 100],
    170.           ["2016-06-27", 70],
    171.           ["2016-06-28", 56],
    172.           ["2016-06-29", 67],
    173.           ["2016-06-30", 65],
    174.         ]
    175.       },
    176.       "tooltip": { //Fixed Tooltip
    177.         "text": "%data-day",
    178.         "font-family": "Georgia",
    179.         "font-color": "#001a33",
    180.         "background-color": "none",
    181.         "border-color": "none",
    182.         "sticky": true,
    183.         "timeout": 30000,
    184.         "x": "20%",
    185.         "y": "78%"
    186.       },
    187.       "labels": [{
    188.           "border-width": 1,
    189.           "border-color": "gray",
    190.           "width": "40%",
    191.           "height": "30%",
    192.           "x": "8%",
    193.           "y": "60%",
    194.         },
    195.         {
    196.           "text": "Daily Donation Count",
    197.           "font-family": "Georgia",
    198.           "font-color": "#001a33",
    199.           "x": "18%",
    200.           "y": "65%"
    201.         },
    202.         { //Dynamic Label with Token
    203.           "text": "%plot-value",
    204.           "font-color": "#3399ff",
    205.           "font-size": 35,
    206.           "font-family": "Georgia",
    207.           "x": "23%",
    208.           "y": "68%"
    209.         },
    210.         {
    211.           "border-width": 1,
    212.           "border-color": "gray",
    213.           "width": "40%",
    214.           "height": "30%",
    215.           "x": "52%",
    216.           "y": "60%"
    217.         },
    218.         {
    219.           "text": "Total Donations",
    220.           "font-family": "Georgia",
    221.           "font-color": "#001a33",
    222.           "x": "65%",
    223.           "y": "65%"
    224.         },
    225.         {
    226.           "text": "6808",
    227.           "font-color": "#3399ff",
    228.           "font-size": 35,
    229.           "font-family": "Georgia",
    230.           "x": "65%",
    231.           "y": "68%"
    232.         },
    233.         {
    234.           "text": "Jan 1 - Jun 30",
    235.           "font-family": "Georgia",
    236.           "font-color": "#001a33",
    237.           "x": "65%",
    238.           "y": "80%"
    239.         }
    240.       ],
    241.       "plotarea": {
    242.         "margin-top": "20%",
    243.         "margin-bottom": "50%",
    244.         "margin-left": "8%",
    245.         "margin-right": "8%"
    246.       }
    247.     };
    248.  
    249.     zingchart.loadModules('calendar', function() {
    250.       zingchart.render({
    251.         id: 'myChart',
    252.         data: myConfig,
    253.         height: 400,
    254.         width: 600
    255.       });
    256.     });
    257.   </script>
    258. </body>
    259.  
    260. </html>
    1. <!DOCTYPE html>
    2. <html>
    3.  
    4. <head>
    5.   <meta charset="utf-8">
    6.   <title>ZingSoft Demo</title>
    7.  
    8.   <script src="https://cdn.zingchart.com/zingchart.min.js"></script>
    9. </head>
    10.  
    11. <body>
    12.   <div id='myChart'></div>
    13. </body>
    14.  
    15. </html>
    1.  
    1. var myConfig = {
    2.   "type": "calendar",
    3.   "title": {
    4.     "text": "Donations",
    5.     "font-family": "Georgia",
    6.   },
    7.   "options": {
    8.     "year": {
    9.       "text": "2016",
    10.       "visible": false,
    11.     },
    12.     "start-month": 1, //January
    13.     "end-month": 6, //March
    14.     "firstday": "s", //Sunday,
    15.     "palette": ["black", "#3399ff", "#e6f2ff"], //Negative, positive, and optional zero value
    16.     "weekday": {
    17.       "values": ["", "M", "", "W", "", "F", ""],
    18.       "item": {
    19.         "font-color": "gray",
    20.         "font-size": 9
    21.       }
    22.     },
    23.     "month": {
    24.       "item": {
    25.         "font-color": "gray",
    26.         "font-size": 9
    27.       }
    28.     },
    29.     "values": [
    30.       ["2016-01-04", 30],
    31.       ["2016-01-05", 31],
    32.       ["2016-01-06", 34],
    33.       ["2016-01-07", 16],
    34.       ["2016-01-08", 59],
    35.       ["2016-01-11", 5],
    36.       ["2016-01-12", 55],
    37.       ["2016-01-13", 91],
    38.       ["2016-01-14", 99],
    39.       ["2016-01-15", 90],
    40.       ["2016-01-18", 64],
    41.       ["2016-01-19", 65],
    42.       ["2016-01-20", 15],
    43.       ["2016-01-21", 16],
    44.       ["2016-01-22", 21],
    45.       ["2016-01-25", 25],
    46.       ["2016-01-26", 9],
    47.       ["2016-01-27", 61],
    48.       ["2016-01-28", 69],
    49.       ["2016-01-29", 70],
    50.       ["2016-02-01", 17],
    51.       ["2016-02-02", 29],
    52.       ["2016-02-03", 31],
    53.       ["2016-02-04", 33],
    54.       ["2016-02-05", 19],
    55.       ["2016-02-08", 29],
    56.       ["2016-02-09", 39],
    57.       ["2016-02-10", 49],
    58.       ["2016-02-11", 50],
    59.       ["2016-02-12", 80],
    60.       ["2016-02-15", 81],
    61.       ["2016-02-16", 53],
    62.       ["2016-02-17", 57],
    63.       ["2016-02-18", 35],
    64.       ["2016-02-19", 19],
    65.       ["2016-02-22", 60],
    66.       ["2016-02-23", 51],
    67.       ["2016-02-24", 80],
    68.       ["2016-02-25", 83],
    69.       ["2016-02-26", 44],
    70.       ["2016-02-29", 45],
    71.       ["2016-03-01", 49],
    72.       ["2016-03-02", 19],
    73.       ["2016-03-03", 31],
    74.       ["2016-03-04", 34],
    75.       ["2016-03-07", 41],
    76.       ["2016-03-08", 20],
    77.       ["2016-03-09", 29],
    78.       ["2016-03-10", 90],
    79.       ["2016-03-11", 87],
    80.       ["2016-03-14", 60],
    81.       ["2016-03-15", 70],
    82.       ["2016-03-16", 80],
    83.       ["2016-03-17", 81],
    84.       ["2016-03-18", 82],
    85.       ["2016-03-21", 83],
    86.       ["2016-03-22", 84],
    87.       ["2016-03-23", 85],
    88.       ["2016-03-24", 86],
    89.       ["2016-03-25", 87],
    90.       ["2016-03-28", 88],
    91.       ["2016-03-29", 89],
    92.       ["2016-03-30", 90],
    93.       ["2016-03-31", 70],
    94.       ["2016-04-01", 79],
    95.       ["2016-04-04", 77],
    96.       ["2016-04-05", 55],
    97.       ["2016-04-06", 66],
    98.       ["2016-04-07", 49],
    99.       ["2016-04-08", 47],
    100.       ["2016-04-11", 78],
    101.       ["2016-04-12", 39],
    102.       ["2016-04-13", 38],
    103.       ["2016-04-14", 35],
    104.       ["2016-04-15", 50],
    105.       ["2016-04-18", 81],
    106.       ["2016-04-19", 85],
    107.       ["2016-04-20", 90],
    108.       ["2016-04-21", 61],
    109.       ["2016-04-22", 67],
    110.       ["2016-04-25", 65],
    111.       ["2016-04-26", 56],
    112.       ["2016-04-27", 51],
    113.       ["2016-04-28", 59],
    114.       ["2016-04-29", 19],
    115.       ["2016-05-02", 29],
    116.       ["2016-05-03", 31],
    117.       ["2016-05-04", 35],
    118.       ["2016-05-05", 41],
    119.       ["2016-05-06", 49],
    120.       ["2016-05-09", 51],
    121.       ["2016-05-10", 55],
    122.       ["2016-05-11", 17],
    123.       ["2016-05-12", 7],
    124.       ["2016-05-13", 5],
    125.       ["2016-05-16", 3],
    126.       ["2016-05-17", 29],
    127.       ["2016-05-18", 37],
    128.       ["2016-05-19", 45],
    129.       ["2016-05-20", 53],
    130.       ["2016-05-23", 29],
    131.       ["2016-05-24", 28],
    132.       ["2016-05-25", 25],
    133.       ["2016-05-26", 39],
    134.       ["2016-05-27", 41],
    135.       ["2016-05-30", 35],
    136.       ["2016-05-31", 37],
    137.       ["2016-06-01", 39],
    138.       ["2016-06-02", 51],
    139.       ["2016-06-03", 55],
    140.       ["2016-06-06", 61],
    141.       ["2016-06-07", 70],
    142.       ["2016-06-08", 68],
    143.       ["2016-06-09", 54],
    144.       ["2016-06-10", 58],
    145.       ["2016-06-13", 61],
    146.       ["2016-06-14", 66],
    147.       ["2016-06-15", 72],
    148.       ["2016-06-16", 27],
    149.       ["2016-06-17", 51],
    150.       ["2016-06-20", 50],
    151.       ["2016-06-21", 80],
    152.       ["2016-06-22", 88],
    153.       ["2016-06-23", 87],
    154.       ["2016-06-24", 100],
    155.       ["2016-06-27", 70],
    156.       ["2016-06-28", 56],
    157.       ["2016-06-29", 67],
    158.       ["2016-06-30", 65],
    159.     ]
    160.   },
    161.   "tooltip": { //Fixed Tooltip
    162.     "text": "%data-day",
    163.     "font-family": "Georgia",
    164.     "font-color": "#001a33",
    165.     "background-color": "none",
    166.     "border-color": "none",
    167.     "sticky": true,
    168.     "timeout": 30000,
    169.     "x": "20%",
    170.     "y": "78%"
    171.   },
    172.   "labels": [{
    173.       "border-width": 1,
    174.       "border-color": "gray",
    175.       "width": "40%",
    176.       "height": "30%",
    177.       "x": "8%",
    178.       "y": "60%",
    179.     },
    180.     {
    181.       "text": "Daily Donation Count",
    182.       "font-family": "Georgia",
    183.       "font-color": "#001a33",
    184.       "x": "18%",
    185.       "y": "65%"
    186.     },
    187.     { //Dynamic Label with Token
    188.       "text": "%plot-value",
    189.       "font-color": "#3399ff",
    190.       "font-size": 35,
    191.       "font-family": "Georgia",
    192.       "x": "23%",
    193.       "y": "68%"
    194.     },
    195.     {
    196.       "border-width": 1,
    197.       "border-color": "gray",
    198.       "width": "40%",
    199.       "height": "30%",
    200.       "x": "52%",
    201.       "y": "60%"
    202.     },
    203.     {
    204.       "text": "Total Donations",
    205.       "font-family": "Georgia",
    206.       "font-color": "#001a33",
    207.       "x": "65%",
    208.       "y": "65%"
    209.     },
    210.     {
    211.       "text": "6808",
    212.       "font-color": "#3399ff",
    213.       "font-size": 35,
    214.       "font-family": "Georgia",
    215.       "x": "65%",
    216.       "y": "68%"
    217.     },
    218.     {
    219.       "text": "Jan 1 - Jun 30",
    220.       "font-family": "Georgia",
    221.       "font-color": "#001a33",
    222.       "x": "65%",
    223.       "y": "80%"
    224.     }
    225.   ],
    226.   "plotarea": {
    227.     "margin-top": "20%",
    228.     "margin-bottom": "50%",
    229.     "margin-left": "8%",
    230.     "margin-right": "8%"
    231.   }
    232. };
    233.  
    234. zingchart.loadModules('calendar', function() {
    235.   zingchart.render({
    236.     id: 'myChart',
    237.     data: myConfig,
    238.     height: 400,
    239.     width: 600
    240.   });
    241. });