• Edit
  • Download
  • <!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"];
        let chartConfig = {
          type: 'calendar',
          options: {
            month: { // Configure the month labels and styling by month.
              values: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'], // Set the month labels.
              outline: { // Use this object to style the borders of active and inactive months.
                active: { // Use this object to style the borders of active months.
                  borderColor: 'red',
                  borderWidth: 2
                }
              }
            },
            year: {
              text: '2016',
            },
            values: [
              ['2016-02-01', 7],
              ['2016-02-02', 12],
              ['2016-02-03', 3],
              ['2016-02-04', 3],
              ['2016-02-05', 9],
              ['2016-02-08', 9],
              ['2016-02-09', 9],
              ['2016-02-10', 4],
              ['2016-02-11', 5],
              ['2016-02-12', 8],
              ['2016-02-15', 8],
              ['2016-02-16', 3],
              ['2016-02-17', 7],
              ['2016-02-18', 5],
              ['2016-02-19', 9],
              ['2016-02-22', 6],
              ['2016-02-23', 5],
              ['2016-02-24', 8],
              ['2016-02-25', 10],
              ['2016-02-26', 4],
              ['2016-02-29', 5],
              ['2016-03-01', 9],
              ['2016-03-02', 9],
              ['2016-03-03', 3],
              ['2016-03-04', 3],
              ['2016-03-07', 4],
              ['2016-03-08', 2],
              ['2016-03-09', 10],
              ['2016-03-10', 9],
              ['2016-03-11', 7],
              ['2016-03-14', 8],
              ['2016-03-15', 7],
              ['2016-03-16', 8],
              ['2016-03-17', 8],
              ['2016-03-18', 2],
              ['2016-03-21', 3],
              ['2016-03-22', 4],
              ['2016-03-23', 5],
              ['2016-03-24', 6],
              ['2016-03-25', 7],
              ['2016-03-28', 8],
              ['2016-03-29', 8],
              ['2016-03-30', 9],
              ['2016-03-31', 7],
              ['2016-04-01', 9],
              ['2016-04-04', 7],
              ['2016-04-05', 5],
              ['2016-04-06', 6],
              ['2016-04-07', 9],
              ['2016-04-08', 4],
              ['2016-04-11', 8],
              ['2016-04-12', 9],
              ['2016-04-13', 3],
              ['2016-04-14', 5],
              ['2016-04-15', 5],
              ['2016-04-18', 8],
              ['2016-04-19', 8],
              ['2016-04-20', 9],
              ['2016-04-21', 3],
              ['2016-04-22', 6],
              ['2016-04-25', 12],
              ['2016-04-26', 6],
              ['2016-04-27', 5],
              ['2016-04-28', 5],
              ['2016-04-29', 11],
              ['2016-05-02', 9],
              ['2016-05-03', 3],
              ['2016-05-04', 5],
              ['2016-05-05', 4],
              ['2016-05-06', 9],
              ['2016-05-09', 5],
              ['2016-05-10', 5],
              ['2016-05-11', 7],
              ['2016-05-12', 7],
              ['2016-05-13', 5],
              ['2016-05-16', 3],
              ['2016-05-17', 2],
              ['2016-05-18', 7],
              ['2016-05-19', 5],
              ['2016-05-20', 3],
              ['2016-05-23', 9],
              ['2016-05-24', 11],
              ['2016-05-25', 5],
              ['2016-05-26', 9],
              ['2016-05-27', 4],
              ['2016-05-30', 5],
              ['2016-05-31', 7],
              ['2016-06-01', 9],
              ['2016-06-02', 5],
              ['2016-06-03', 5],
              ['2016-06-06', 6],
              ['2016-06-07', 7],
              ['2016-06-08', 8],
              ['2016-06-09', 5],
              ['2016-06-10', 8],
              ['2016-06-13', 6],
              ['2016-06-14', 6],
              ['2016-06-15', 2],
              ['2016-06-16', 7],
              ['2016-06-17', 5],
              ['2016-06-20', 5],
              ['2016-06-21', 8],
              ['2016-06-22', 8],
              ['2016-06-23', 8],
              ['2016-06-24', 10],
              ['2016-06-27', 7],
              ['2016-06-28', 12],
              ['2016-06-29', 7],
              ['2016-06-30', 6],
              ['2016-07-01', 12],
              ['2016-07-04', 3],
              ['2016-07-05', 4],
              ['2016-07-06', 9],
              ['2016-07-07', 11],
              ['2016-07-08', 5],
              ['2016-07-11', 5],
              ['2016-07-12', 9],
              ['2016-07-13', 9],
              ['2016-07-14', 9],
              ['2016-07-15', 4],
              ['2016-07-18', 6],
              ['2016-07-19', 5],
              ['2016-07-20', 6],
              ['2016-07-21', 2],
              ['2016-07-22', 5],
              ['2016-07-25', 9],
              ['2016-07-26', 6],
              ['2016-07-27', 6],
              ['2016-07-28', 7],
              ['2016-07-29', 7],
              ['2016-08-01', 12],
              ['2016-08-02', 3],
              ['2016-08-03', 3],
              ['2016-08-04', 9],
              ['2016-08-05', 9],
              ['2016-08-08', 9],
              ['2016-08-09', 4],
              ['2016-08-10', 5],
              ['2016-08-11', 8],
              ['2016-08-12', 8],
              ['2016-08-15', 3],
              ['2016-08-16', 7],
              ['2016-08-17', 5],
              ['2016-08-18', 9],
              ['2016-08-19', 6],
              ['2016-08-22', 5],
              ['2016-08-23', 8],
              ['2016-08-24', 10],
              ['2016-08-25', 4],
              ['2016-08-26', 5],
              ['2016-08-29', 9],
              ['2016-08-30', 9],
              ['2016-08-31', 3],
              ['2016-09-01', 3],
              ['2016-09-02', 4],
              ['2016-09-05', 2],
              ['2016-09-06', 10],
              ['2016-09-07', 9],
              ['2016-09-08', 7],
              ['2016-09-09', 8],
              ['2016-09-12', 7],
              ['2016-09-13', 8],
              ['2016-09-14', 8],
              ['2016-09-15', 2],
              ['2016-09-16', 3],
              ['2016-09-19', 4],
              ['2016-09-20', 5],
              ['2016-09-21', 6],
              ['2016-09-22', 7],
              ['2016-09-23', 8],
              ['2016-09-26', 8],
              ['2016-09-27', 9],
              ['2016-09-28', 7],
              ['2016-09-29', 9],
              ['2016-09-30', 7],
              ['2016-10-03', 5],
              ['2016-10-04', 6],
              ['2016-10-05', 9],
              ['2016-10-06', 4],
              ['2016-10-07', 8],
              ['2016-10-10', 9],
              ['2016-10-11', 3],
              ['2016-10-12', 5],
              ['2016-10-13', 5],
              ['2016-10-14', 8],
              ['2016-10-17', 8],
              ['2016-10-18', 9],
              ['2016-10-19', 3],
              ['2016-10-20', 6],
              ['2016-10-21', 12],
              ['2016-10-24', 6],
              ['2016-10-25', 5],
              ['2016-10-26', 5],
              ['2016-10-27', 11],
              ['2016-10-28', 9],
              ['2016-10-31', 3],
              ['2016-11-01', 5],
              ['2016-11-02', 4],
              ['2016-11-03', 9],
              ['2016-11-04', 5],
              ['2016-11-07', 5],
              ['2016-11-08', 7],
              ['2016-11-09', 7],
              ['2016-11-10', 5],
              ['2016-11-11', 3],
              ['2016-11-14', 2],
              ['2016-11-15', 7],
              ['2016-11-16', 5],
              ['2016-11-17', 3],
              ['2016-11-18', 9],
              ['2016-11-21', 11],
              ['2016-11-22', 5],
              ['2016-11-23', 9],
              ['2016-11-24', 4],
              ['2016-11-25', 5],
              ['2016-11-28', 7],
              ['2016-11-29', 9],
              ['2016-11-30', 5],
              ['2016-12-01', 5],
              ['2016-12-02', 6],
              ['2016-12-05', 7],
              ['2016-12-06', 8],
              ['2016-12-07', 5],
              ['2016-12-08', 8],
              ['2016-12-09', 6],
              ['2016-12-12', 6],
              ['2016-12-13', 2],
              ['2016-12-14', 7],
              ['2016-12-15', 5],
              ['2016-12-16', 5],
              ['2016-12-19', 8],
              ['2016-12-20', 8],
              ['2016-12-21', 8],
              ['2016-12-22', 10],
              ['2016-12-23', 7],
              ['2016-12-26', 12],
              ['2016-12-27', 7],
              ['2016-12-28', 6],
              ['2016-12-29', 5],
              ['2016-12-30', 11]
            ]
          },
          plotarea: {
            marginTop: '35%',
            marginBottom: '45%'
          }
        };
    
        zingchart.loadModules('calendar', function() {
          zingchart.render({
            id: 'myChart',
            data: chartConfig,
            height: 400,
            width: '100%'
          });
        });
      </script>
    </body>
    
    </html>
    <!DOCTYPE html>
    <html>
    
    <head>
      <meta charset="utf-8">
      <title>ZingSoft Demo</title>
    
      <script src="https://cdn.zingchart.com/zingchart.min.js"></script>
    </head>
    
    <body>
      <div id='myChart'></div>
    </body>
    
    </html>
    
          
    let chartConfig = {
      type: 'calendar',
      options: {
        month: { // Configure the month labels and styling by month.
          values: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'], // Set the month labels.
          outline: { // Use this object to style the borders of active and inactive months.
            active: { // Use this object to style the borders of active months.
              borderColor: 'red',
              borderWidth: 2
            }
          }
        },
        year: {
          text: '2016',
        },
        values: [
          ['2016-02-01', 7],
          ['2016-02-02', 12],
          ['2016-02-03', 3],
          ['2016-02-04', 3],
          ['2016-02-05', 9],
          ['2016-02-08', 9],
          ['2016-02-09', 9],
          ['2016-02-10', 4],
          ['2016-02-11', 5],
          ['2016-02-12', 8],
          ['2016-02-15', 8],
          ['2016-02-16', 3],
          ['2016-02-17', 7],
          ['2016-02-18', 5],
          ['2016-02-19', 9],
          ['2016-02-22', 6],
          ['2016-02-23', 5],
          ['2016-02-24', 8],
          ['2016-02-25', 10],
          ['2016-02-26', 4],
          ['2016-02-29', 5],
          ['2016-03-01', 9],
          ['2016-03-02', 9],
          ['2016-03-03', 3],
          ['2016-03-04', 3],
          ['2016-03-07', 4],
          ['2016-03-08', 2],
          ['2016-03-09', 10],
          ['2016-03-10', 9],
          ['2016-03-11', 7],
          ['2016-03-14', 8],
          ['2016-03-15', 7],
          ['2016-03-16', 8],
          ['2016-03-17', 8],
          ['2016-03-18', 2],
          ['2016-03-21', 3],
          ['2016-03-22', 4],
          ['2016-03-23', 5],
          ['2016-03-24', 6],
          ['2016-03-25', 7],
          ['2016-03-28', 8],
          ['2016-03-29', 8],
          ['2016-03-30', 9],
          ['2016-03-31', 7],
          ['2016-04-01', 9],
          ['2016-04-04', 7],
          ['2016-04-05', 5],
          ['2016-04-06', 6],
          ['2016-04-07', 9],
          ['2016-04-08', 4],
          ['2016-04-11', 8],
          ['2016-04-12', 9],
          ['2016-04-13', 3],
          ['2016-04-14', 5],
          ['2016-04-15', 5],
          ['2016-04-18', 8],
          ['2016-04-19', 8],
          ['2016-04-20', 9],
          ['2016-04-21', 3],
          ['2016-04-22', 6],
          ['2016-04-25', 12],
          ['2016-04-26', 6],
          ['2016-04-27', 5],
          ['2016-04-28', 5],
          ['2016-04-29', 11],
          ['2016-05-02', 9],
          ['2016-05-03', 3],
          ['2016-05-04', 5],
          ['2016-05-05', 4],
          ['2016-05-06', 9],
          ['2016-05-09', 5],
          ['2016-05-10', 5],
          ['2016-05-11', 7],
          ['2016-05-12', 7],
          ['2016-05-13', 5],
          ['2016-05-16', 3],
          ['2016-05-17', 2],
          ['2016-05-18', 7],
          ['2016-05-19', 5],
          ['2016-05-20', 3],
          ['2016-05-23', 9],
          ['2016-05-24', 11],
          ['2016-05-25', 5],
          ['2016-05-26', 9],
          ['2016-05-27', 4],
          ['2016-05-30', 5],
          ['2016-05-31', 7],
          ['2016-06-01', 9],
          ['2016-06-02', 5],
          ['2016-06-03', 5],
          ['2016-06-06', 6],
          ['2016-06-07', 7],
          ['2016-06-08', 8],
          ['2016-06-09', 5],
          ['2016-06-10', 8],
          ['2016-06-13', 6],
          ['2016-06-14', 6],
          ['2016-06-15', 2],
          ['2016-06-16', 7],
          ['2016-06-17', 5],
          ['2016-06-20', 5],
          ['2016-06-21', 8],
          ['2016-06-22', 8],
          ['2016-06-23', 8],
          ['2016-06-24', 10],
          ['2016-06-27', 7],
          ['2016-06-28', 12],
          ['2016-06-29', 7],
          ['2016-06-30', 6],
          ['2016-07-01', 12],
          ['2016-07-04', 3],
          ['2016-07-05', 4],
          ['2016-07-06', 9],
          ['2016-07-07', 11],
          ['2016-07-08', 5],
          ['2016-07-11', 5],
          ['2016-07-12', 9],
          ['2016-07-13', 9],
          ['2016-07-14', 9],
          ['2016-07-15', 4],
          ['2016-07-18', 6],
          ['2016-07-19', 5],
          ['2016-07-20', 6],
          ['2016-07-21', 2],
          ['2016-07-22', 5],
          ['2016-07-25', 9],
          ['2016-07-26', 6],
          ['2016-07-27', 6],
          ['2016-07-28', 7],
          ['2016-07-29', 7],
          ['2016-08-01', 12],
          ['2016-08-02', 3],
          ['2016-08-03', 3],
          ['2016-08-04', 9],
          ['2016-08-05', 9],
          ['2016-08-08', 9],
          ['2016-08-09', 4],
          ['2016-08-10', 5],
          ['2016-08-11', 8],
          ['2016-08-12', 8],
          ['2016-08-15', 3],
          ['2016-08-16', 7],
          ['2016-08-17', 5],
          ['2016-08-18', 9],
          ['2016-08-19', 6],
          ['2016-08-22', 5],
          ['2016-08-23', 8],
          ['2016-08-24', 10],
          ['2016-08-25', 4],
          ['2016-08-26', 5],
          ['2016-08-29', 9],
          ['2016-08-30', 9],
          ['2016-08-31', 3],
          ['2016-09-01', 3],
          ['2016-09-02', 4],
          ['2016-09-05', 2],
          ['2016-09-06', 10],
          ['2016-09-07', 9],
          ['2016-09-08', 7],
          ['2016-09-09', 8],
          ['2016-09-12', 7],
          ['2016-09-13', 8],
          ['2016-09-14', 8],
          ['2016-09-15', 2],
          ['2016-09-16', 3],
          ['2016-09-19', 4],
          ['2016-09-20', 5],
          ['2016-09-21', 6],
          ['2016-09-22', 7],
          ['2016-09-23', 8],
          ['2016-09-26', 8],
          ['2016-09-27', 9],
          ['2016-09-28', 7],
          ['2016-09-29', 9],
          ['2016-09-30', 7],
          ['2016-10-03', 5],
          ['2016-10-04', 6],
          ['2016-10-05', 9],
          ['2016-10-06', 4],
          ['2016-10-07', 8],
          ['2016-10-10', 9],
          ['2016-10-11', 3],
          ['2016-10-12', 5],
          ['2016-10-13', 5],
          ['2016-10-14', 8],
          ['2016-10-17', 8],
          ['2016-10-18', 9],
          ['2016-10-19', 3],
          ['2016-10-20', 6],
          ['2016-10-21', 12],
          ['2016-10-24', 6],
          ['2016-10-25', 5],
          ['2016-10-26', 5],
          ['2016-10-27', 11],
          ['2016-10-28', 9],
          ['2016-10-31', 3],
          ['2016-11-01', 5],
          ['2016-11-02', 4],
          ['2016-11-03', 9],
          ['2016-11-04', 5],
          ['2016-11-07', 5],
          ['2016-11-08', 7],
          ['2016-11-09', 7],
          ['2016-11-10', 5],
          ['2016-11-11', 3],
          ['2016-11-14', 2],
          ['2016-11-15', 7],
          ['2016-11-16', 5],
          ['2016-11-17', 3],
          ['2016-11-18', 9],
          ['2016-11-21', 11],
          ['2016-11-22', 5],
          ['2016-11-23', 9],
          ['2016-11-24', 4],
          ['2016-11-25', 5],
          ['2016-11-28', 7],
          ['2016-11-29', 9],
          ['2016-11-30', 5],
          ['2016-12-01', 5],
          ['2016-12-02', 6],
          ['2016-12-05', 7],
          ['2016-12-06', 8],
          ['2016-12-07', 5],
          ['2016-12-08', 8],
          ['2016-12-09', 6],
          ['2016-12-12', 6],
          ['2016-12-13', 2],
          ['2016-12-14', 7],
          ['2016-12-15', 5],
          ['2016-12-16', 5],
          ['2016-12-19', 8],
          ['2016-12-20', 8],
          ['2016-12-21', 8],
          ['2016-12-22', 10],
          ['2016-12-23', 7],
          ['2016-12-26', 12],
          ['2016-12-27', 7],
          ['2016-12-28', 6],
          ['2016-12-29', 5],
          ['2016-12-30', 11]
        ]
      },
      plotarea: {
        marginTop: '35%',
        marginBottom: '45%'
      }
    };
    
    zingchart.loadModules('calendar', function() {
      zingchart.render({
        id: 'myChart',
        data: chartConfig,
        height: 400,
        width: '100%'
      });
    });