• 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>
    10.     html,
    11.     body {
    12.       height: 100%;
    13.       width: 100%;
    14.       margin: 0;
    15.       padding: 0;
    16.     }
    17.  
    18.     #myChart {
    19.       height: 100%;
    20.       width: 100%;
    21.       min-height: 150px;
    22.     }
    23.  
    24.     .zc-ref {
    25.       display: none;
    26.     }
    27.   </style>
    28. </head>
    29.  
    30. <body>
    31.   <div id="myChart"><a class="zc-ref" href="https://www.zingchart.com">Powered by ZingChart</a></div>
    32.   <script>
    33.     ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"];
    34.     var myConfig = {
    35.       type: 'calendar',
    36.       plot: {
    37.         "selectionMode": "multiple",
    38.         "selectedState": {
    39.           "backgroundColor": "#f00 #0f0"
    40.         }
    41.       },
    42.       options: {
    43.         year: {
    44.           text: '2016',
    45.           visible: false
    46.         },
    47.         startMonth: 1,
    48.         endMonth: 6,
    49.         palette: ['none', '#4CAF50'],
    50.         month: {
    51.           item: {
    52.             fontColor: 'gray',
    53.             fontSize: 9
    54.           }
    55.         },
    56.         weekday: {
    57.           values: ['', 'M', '', 'W', '', 'F', ''],
    58.           item: {
    59.             fontColor: 'gray',
    60.             fontSize: 9
    61.           }
    62.         },
    63.         "day": {
    64.           "flat": false
    65.         },
    66.         values: [
    67.           ['2016-01-01', 3],
    68.           ['2016-01-04', 12],
    69.           ['2016-01-05', 3],
    70.           ['2016-01-06', 4],
    71.           ['2016-01-07', 9],
    72.           ['2016-01-08', 11],
    73.           ['2016-01-11', 5],
    74.           ['2016-01-12', 5],
    75.           ['2016-01-13', 9],
    76.           ['2016-01-14', 9],
    77.           ['2016-01-15', 9],
    78.           ['2016-01-18', 4],
    79.           ['2016-01-19', 6],
    80.           ['2016-01-20', 5],
    81.           ['2016-01-21', 6],
    82.           ['2016-01-22', 2],
    83.           ['2016-01-25', 5],
    84.           ['2016-01-26', 9],
    85.           ['2016-01-27', 6],
    86.           ['2016-01-28', 6],
    87.           ['2016-01-29', 7],
    88.           ['2016-02-01', 7],
    89.           ['2016-02-02', 12],
    90.           ['2016-02-03', 3],
    91.           ['2016-02-04', 3],
    92.           ['2016-02-05', 9],
    93.           ['2016-02-08', 9],
    94.           ['2016-02-09', 9],
    95.           ['2016-02-10', 4],
    96.           ['2016-02-11', 5],
    97.           ['2016-02-12', 8],
    98.           ['2016-02-15', 8],
    99.           ['2016-02-16', 3],
    100.           ['2016-02-17', 7],
    101.           ['2016-02-18', 5],
    102.           ['2016-02-19', 9],
    103.           ['2016-02-22', 6],
    104.           ['2016-02-23', 5],
    105.           ['2016-02-24', 8],
    106.           ['2016-02-25', 10],
    107.           ['2016-02-26', 4],
    108.           ['2016-02-29', 5],
    109.           ['2016-03-01', 9],
    110.           ['2016-03-02', 9],
    111.           ['2016-03-03', 3],
    112.           ['2016-03-04', 3],
    113.           ['2016-03-07', 4],
    114.           ['2016-03-08', 2],
    115.           ['2016-03-09', 10],
    116.           ['2016-03-10', 9],
    117.           ['2016-03-11', 7],
    118.           ['2016-03-14', 8],
    119.           ['2016-03-15', 7],
    120.           ['2016-03-16', 8],
    121.           ['2016-03-17', 8],
    122.           ['2016-03-18', 2],
    123.           ['2016-03-21', 3],
    124.           ['2016-03-22', 4],
    125.           ['2016-03-23', 5],
    126.           ['2016-03-24', 6],
    127.           ['2016-03-25', 7],
    128.           ['2016-03-28', 8],
    129.           ['2016-03-29', 8],
    130.           ['2016-03-30', 9],
    131.           ['2016-03-31', 7],
    132.           ['2016-04-01', 9],
    133.           ['2016-04-04', 7],
    134.           ['2016-04-05', 5],
    135.           ['2016-04-06', 6],
    136.           ['2016-04-07', 9],
    137.           ['2016-04-08', 4],
    138.           ['2016-04-11', 8],
    139.           ['2016-04-12', 9],
    140.           ['2016-04-13', 3],
    141.           ['2016-04-14', 5],
    142.           ['2016-04-15', 5],
    143.           ['2016-04-18', 8],
    144.           ['2016-04-19', 8],
    145.           ['2016-04-20', 9],
    146.           ['2016-04-21', 3],
    147.           ['2016-04-22', 6],
    148.           ['2016-04-25', 12],
    149.           ['2016-04-26', 6],
    150.           ['2016-04-27', 5],
    151.           ['2016-04-28', 5],
    152.           ['2016-04-29', 11],
    153.           ['2016-05-02', 9],
    154.           ['2016-05-03', 3],
    155.           ['2016-05-04', 5],
    156.           ['2016-05-05', 4],
    157.           ['2016-05-06', 9],
    158.           ['2016-05-09', 5],
    159.           ['2016-05-10', 5],
    160.           ['2016-05-11', 7],
    161.           ['2016-05-12', 7],
    162.           ['2016-05-13', 5],
    163.           ['2016-05-16', 3],
    164.           ['2016-05-17', 2],
    165.           ['2016-05-18', 7],
    166.           ['2016-05-19', 5],
    167.           ['2016-05-20', 3],
    168.           ['2016-05-23', 9],
    169.           ['2016-05-24', 11],
    170.           ['2016-05-25', 5],
    171.           ['2016-05-26', 9],
    172.           ['2016-05-27', 4],
    173.           ['2016-05-30', 5],
    174.           ['2016-05-31', 7],
    175.           ['2016-06-01', 9],
    176.           ['2016-06-02', 5],
    177.           ['2016-06-03', 5],
    178.           ['2016-06-06', 6],
    179.           ['2016-06-07', 7],
    180.           ['2016-06-08', 8],
    181.           ['2016-06-09', 5],
    182.           ['2016-06-10', 8],
    183.           ['2016-06-13', 6],
    184.           ['2016-06-14', 6],
    185.           ['2016-06-15', 2],
    186.           ['2016-06-16', 7],
    187.           ['2016-06-17', 5],
    188.           ['2016-06-20', 5],
    189.           ['2016-06-21', 8],
    190.           ['2016-06-22', 8],
    191.           ['2016-06-23', 8],
    192.           ['2016-06-24', 10],
    193.           ['2016-06-27', 7],
    194.           ['2016-06-28', 12],
    195.           ['2016-06-29', 7],
    196.           ['2016-06-30', 6],
    197.         ]
    198.       },
    199.       labels: [{ //Lefthand Label (container portion)
    200.           borderColor: 'gray',
    201.           borderWidth: 1,
    202.           x: '8%',
    203.           y: '60%',
    204.           width: '40%',
    205.           height: '30%'
    206.         },
    207.         { //Lefthand Label (top portion)
    208.           text: 'Daily Contribution',
    209.           fontColor: '#212121',
    210.           textAlign: 'center',
    211.           x: '10%',
    212.           y: '65%',
    213.           width: '36%'
    214.         },
    215.         { //Lefthand Label (middle portion)
    216.           text: '%plot-value',
    217.           fontColor: '#4CAF50',
    218.           fontFamily: 'Georgia',
    219.           fontSize: 35,
    220.           textAlign: 'center',
    221.           x: '10%',
    222.           y: '68%',
    223.           width: '36%'
    224.         },
    225.         // Note: the bottom portion of the Bottom-Left Label is the fixed tooltip, below.
    226.  
    227.         { //Rightside Label (container portion)
    228.           borderColor: 'gray',
    229.           borderWidth: 1,
    230.           x: '52%',
    231.           y: '60%',
    232.           width: '40%',
    233.           height: '30%',
    234.         },
    235.         { //Rightside Label (top portion)
    236.           text: 'Total Contributions',
    237.           fontColor: '#212121',
    238.           textAlign: 'center',
    239.           x: '54%',
    240.           y: '65%',
    241.           width: '36%'
    242.         },
    243.         { //Rightside Label (middle portion)
    244.           text: '1414',
    245.           fontColor: '#4CAF50',
    246.           fontFamily: 'Georgia',
    247.           fontSize: 35,
    248.           textAlign: 'center',
    249.           x: '54%',
    250.           y: '68%',
    251.           width: '36%'
    252.         },
    253.         { //Rightside Label (bottom portion)
    254.           text: 'Jan 1 - Jun 30',
    255.           fontColor: '#212121',
    256.           padding: 2,
    257.           textAlign: 'center',
    258.           x: '54%',
    259.           y: '80%',
    260.           width: '36%'
    261.         }
    262.       ],
    263.  
    264.       tooltip: { //Lefthand Label (bottom portion)
    265.         text: '%data-day',
    266.         backgroundColor: 'none',
    267.         borderColor: 'none',
    268.         fontColor: '#212121',
    269.         padding: 2,
    270.         //textAlign: 'center',
    271.         align: 'center',
    272.         sticky: true,
    273.         timeout: 30000,
    274.         x: '10%',
    275.         y: '80%',
    276.         width: '36%'
    277.       },
    278.  
    279.       plotarea: {
    280.         marginTop: '15%',
    281.         marginBottom: '55%',
    282.         marginLeft: '8%',
    283.         marginRight: '8%'
    284.       }
    285.     };
    286.  
    287.     zingchart.loadModules('calendar', function() {
    288.       zingchart.render({
    289.         id: 'myChart',
    290.         data: myConfig,
    291.         height: '100%',
    292.         width: '100%'
    293.       });
    294.     });
    295.   </script>
    296. </body>
    297.  
    298. </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"><a class="zc-ref" href="https://www.zingchart.com">Powered by ZingChart</a></div>
    13. </body>
    14.  
    15. </html>
    1. html,
    2. body {
    3.   height: 100%;
    4.   width: 100%;
    5.   margin: 0;
    6.   padding: 0;
    7. }
    8.  
    9. #myChart {
    10.   height: 100%;
    11.   width: 100%;
    12.   min-height: 150px;
    13. }
    14.  
    15. .zc-ref {
    16.   display: none;
    17. }
    1. var myConfig = {
    2.   type: 'calendar',
    3.   plot: {
    4.     "selectionMode": "multiple",
    5.     "selectedState": {
    6.       "backgroundColor": "#f00 #0f0"
    7.     }
    8.   },
    9.   options: {
    10.     year: {
    11.       text: '2016',
    12.       visible: false
    13.     },
    14.     startMonth: 1,
    15.     endMonth: 6,
    16.     palette: ['none', '#4CAF50'],
    17.     month: {
    18.       item: {
    19.         fontColor: 'gray',
    20.         fontSize: 9
    21.       }
    22.     },
    23.     weekday: {
    24.       values: ['', 'M', '', 'W', '', 'F', ''],
    25.       item: {
    26.         fontColor: 'gray',
    27.         fontSize: 9
    28.       }
    29.     },
    30.     "day": {
    31.       "flat": false
    32.     },
    33.     values: [
    34.       ['2016-01-01', 3],
    35.       ['2016-01-04', 12],
    36.       ['2016-01-05', 3],
    37.       ['2016-01-06', 4],
    38.       ['2016-01-07', 9],
    39.       ['2016-01-08', 11],
    40.       ['2016-01-11', 5],
    41.       ['2016-01-12', 5],
    42.       ['2016-01-13', 9],
    43.       ['2016-01-14', 9],
    44.       ['2016-01-15', 9],
    45.       ['2016-01-18', 4],
    46.       ['2016-01-19', 6],
    47.       ['2016-01-20', 5],
    48.       ['2016-01-21', 6],
    49.       ['2016-01-22', 2],
    50.       ['2016-01-25', 5],
    51.       ['2016-01-26', 9],
    52.       ['2016-01-27', 6],
    53.       ['2016-01-28', 6],
    54.       ['2016-01-29', 7],
    55.       ['2016-02-01', 7],
    56.       ['2016-02-02', 12],
    57.       ['2016-02-03', 3],
    58.       ['2016-02-04', 3],
    59.       ['2016-02-05', 9],
    60.       ['2016-02-08', 9],
    61.       ['2016-02-09', 9],
    62.       ['2016-02-10', 4],
    63.       ['2016-02-11', 5],
    64.       ['2016-02-12', 8],
    65.       ['2016-02-15', 8],
    66.       ['2016-02-16', 3],
    67.       ['2016-02-17', 7],
    68.       ['2016-02-18', 5],
    69.       ['2016-02-19', 9],
    70.       ['2016-02-22', 6],
    71.       ['2016-02-23', 5],
    72.       ['2016-02-24', 8],
    73.       ['2016-02-25', 10],
    74.       ['2016-02-26', 4],
    75.       ['2016-02-29', 5],
    76.       ['2016-03-01', 9],
    77.       ['2016-03-02', 9],
    78.       ['2016-03-03', 3],
    79.       ['2016-03-04', 3],
    80.       ['2016-03-07', 4],
    81.       ['2016-03-08', 2],
    82.       ['2016-03-09', 10],
    83.       ['2016-03-10', 9],
    84.       ['2016-03-11', 7],
    85.       ['2016-03-14', 8],
    86.       ['2016-03-15', 7],
    87.       ['2016-03-16', 8],
    88.       ['2016-03-17', 8],
    89.       ['2016-03-18', 2],
    90.       ['2016-03-21', 3],
    91.       ['2016-03-22', 4],
    92.       ['2016-03-23', 5],
    93.       ['2016-03-24', 6],
    94.       ['2016-03-25', 7],
    95.       ['2016-03-28', 8],
    96.       ['2016-03-29', 8],
    97.       ['2016-03-30', 9],
    98.       ['2016-03-31', 7],
    99.       ['2016-04-01', 9],
    100.       ['2016-04-04', 7],
    101.       ['2016-04-05', 5],
    102.       ['2016-04-06', 6],
    103.       ['2016-04-07', 9],
    104.       ['2016-04-08', 4],
    105.       ['2016-04-11', 8],
    106.       ['2016-04-12', 9],
    107.       ['2016-04-13', 3],
    108.       ['2016-04-14', 5],
    109.       ['2016-04-15', 5],
    110.       ['2016-04-18', 8],
    111.       ['2016-04-19', 8],
    112.       ['2016-04-20', 9],
    113.       ['2016-04-21', 3],
    114.       ['2016-04-22', 6],
    115.       ['2016-04-25', 12],
    116.       ['2016-04-26', 6],
    117.       ['2016-04-27', 5],
    118.       ['2016-04-28', 5],
    119.       ['2016-04-29', 11],
    120.       ['2016-05-02', 9],
    121.       ['2016-05-03', 3],
    122.       ['2016-05-04', 5],
    123.       ['2016-05-05', 4],
    124.       ['2016-05-06', 9],
    125.       ['2016-05-09', 5],
    126.       ['2016-05-10', 5],
    127.       ['2016-05-11', 7],
    128.       ['2016-05-12', 7],
    129.       ['2016-05-13', 5],
    130.       ['2016-05-16', 3],
    131.       ['2016-05-17', 2],
    132.       ['2016-05-18', 7],
    133.       ['2016-05-19', 5],
    134.       ['2016-05-20', 3],
    135.       ['2016-05-23', 9],
    136.       ['2016-05-24', 11],
    137.       ['2016-05-25', 5],
    138.       ['2016-05-26', 9],
    139.       ['2016-05-27', 4],
    140.       ['2016-05-30', 5],
    141.       ['2016-05-31', 7],
    142.       ['2016-06-01', 9],
    143.       ['2016-06-02', 5],
    144.       ['2016-06-03', 5],
    145.       ['2016-06-06', 6],
    146.       ['2016-06-07', 7],
    147.       ['2016-06-08', 8],
    148.       ['2016-06-09', 5],
    149.       ['2016-06-10', 8],
    150.       ['2016-06-13', 6],
    151.       ['2016-06-14', 6],
    152.       ['2016-06-15', 2],
    153.       ['2016-06-16', 7],
    154.       ['2016-06-17', 5],
    155.       ['2016-06-20', 5],
    156.       ['2016-06-21', 8],
    157.       ['2016-06-22', 8],
    158.       ['2016-06-23', 8],
    159.       ['2016-06-24', 10],
    160.       ['2016-06-27', 7],
    161.       ['2016-06-28', 12],
    162.       ['2016-06-29', 7],
    163.       ['2016-06-30', 6],
    164.     ]
    165.   },
    166.   labels: [{ //Lefthand Label (container portion)
    167.       borderColor: 'gray',
    168.       borderWidth: 1,
    169.       x: '8%',
    170.       y: '60%',
    171.       width: '40%',
    172.       height: '30%'
    173.     },
    174.     { //Lefthand Label (top portion)
    175.       text: 'Daily Contribution',
    176.       fontColor: '#212121',
    177.       textAlign: 'center',
    178.       x: '10%',
    179.       y: '65%',
    180.       width: '36%'
    181.     },
    182.     { //Lefthand Label (middle portion)
    183.       text: '%plot-value',
    184.       fontColor: '#4CAF50',
    185.       fontFamily: 'Georgia',
    186.       fontSize: 35,
    187.       textAlign: 'center',
    188.       x: '10%',
    189.       y: '68%',
    190.       width: '36%'
    191.     },
    192.     // Note: the bottom portion of the Bottom-Left Label is the fixed tooltip, below.
    193.  
    194.     { //Rightside Label (container portion)
    195.       borderColor: 'gray',
    196.       borderWidth: 1,
    197.       x: '52%',
    198.       y: '60%',
    199.       width: '40%',
    200.       height: '30%',
    201.     },
    202.     { //Rightside Label (top portion)
    203.       text: 'Total Contributions',
    204.       fontColor: '#212121',
    205.       textAlign: 'center',
    206.       x: '54%',
    207.       y: '65%',
    208.       width: '36%'
    209.     },
    210.     { //Rightside Label (middle portion)
    211.       text: '1414',
    212.       fontColor: '#4CAF50',
    213.       fontFamily: 'Georgia',
    214.       fontSize: 35,
    215.       textAlign: 'center',
    216.       x: '54%',
    217.       y: '68%',
    218.       width: '36%'
    219.     },
    220.     { //Rightside Label (bottom portion)
    221.       text: 'Jan 1 - Jun 30',
    222.       fontColor: '#212121',
    223.       padding: 2,
    224.       textAlign: 'center',
    225.       x: '54%',
    226.       y: '80%',
    227.       width: '36%'
    228.     }
    229.   ],
    230.  
    231.   tooltip: { //Lefthand Label (bottom portion)
    232.     text: '%data-day',
    233.     backgroundColor: 'none',
    234.     borderColor: 'none',
    235.     fontColor: '#212121',
    236.     padding: 2,
    237.     //textAlign: 'center',
    238.     align: 'center',
    239.     sticky: true,
    240.     timeout: 30000,
    241.     x: '10%',
    242.     y: '80%',
    243.     width: '36%'
    244.   },
    245.  
    246.   plotarea: {
    247.     marginTop: '15%',
    248.     marginBottom: '55%',
    249.     marginLeft: '8%',
    250.     marginRight: '8%'
    251.   }
    252. };
    253.  
    254. zingchart.loadModules('calendar', function() {
    255.   zingchart.render({
    256.     id: 'myChart',
    257.     data: myConfig,
    258.     height: '100%',
    259.     width: '100%'
    260.   });
    261. });