• Edit
  • Download
  • <!DOCTYPE html>
    <html>
    
    <head>
      <meta charset="utf-8">
      <title>ZingSoft Demo</title>
    
      <script src="https://cdn.zingchart.com/zingchart.min.js"></script>
      <style>
        html,
        body {
          height: 100%;
          width: 100%;
          margin: 0;
          padding: 0;
        }
    
        #myChart {
          height: 100%;
          width: 100%;
          min-height: 150px;
        }
    
        .zc-ref {
          display: none;
        }
      </style>
    </head>
    
    <body>
      <div id="myChart"><a class="zc-ref" href="https://www.zingchart.com">Powered by ZingChart</a></div>
      <script>
        ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"];
        var myConfig = {
          type: 'calendar',
          plot: {
            "selectionMode": "multiple",
            "selectedState": {
              "backgroundColor": "#f00 #0f0"
            }
          },
          options: {
            year: {
              text: '2016',
              visible: false
            },
            startMonth: 1,
            endMonth: 6,
            palette: ['none', '#4CAF50'],
            month: {
              item: {
                fontColor: 'gray',
                fontSize: 9
              }
            },
            weekday: {
              values: ['', 'M', '', 'W', '', 'F', ''],
              item: {
                fontColor: 'gray',
                fontSize: 9
              }
            },
            "day": {
              "flat": false
            },
            values: [
              ['2016-01-01', 3],
              ['2016-01-04', 12],
              ['2016-01-05', 3],
              ['2016-01-06', 4],
              ['2016-01-07', 9],
              ['2016-01-08', 11],
              ['2016-01-11', 5],
              ['2016-01-12', 5],
              ['2016-01-13', 9],
              ['2016-01-14', 9],
              ['2016-01-15', 9],
              ['2016-01-18', 4],
              ['2016-01-19', 6],
              ['2016-01-20', 5],
              ['2016-01-21', 6],
              ['2016-01-22', 2],
              ['2016-01-25', 5],
              ['2016-01-26', 9],
              ['2016-01-27', 6],
              ['2016-01-28', 6],
              ['2016-01-29', 7],
              ['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],
            ]
          },
          labels: [{ //Lefthand Label (container portion)
              borderColor: 'gray',
              borderWidth: 1,
              x: '8%',
              y: '60%',
              width: '40%',
              height: '30%'
            },
            { //Lefthand Label (top portion)
              text: 'Daily Contribution',
              fontColor: '#212121',
              textAlign: 'center',
              x: '10%',
              y: '65%',
              width: '36%'
            },
            { //Lefthand Label (middle portion)
              text: '%plot-value',
              fontColor: '#4CAF50',
              fontFamily: 'Georgia',
              fontSize: 35,
              textAlign: 'center',
              x: '10%',
              y: '68%',
              width: '36%'
            },
            // Note: the bottom portion of the Bottom-Left Label is the fixed tooltip, below.
    
            { //Rightside Label (container portion)
              borderColor: 'gray',
              borderWidth: 1,
              x: '52%',
              y: '60%',
              width: '40%',
              height: '30%',
            },
            { //Rightside Label (top portion)
              text: 'Total Contributions',
              fontColor: '#212121',
              textAlign: 'center',
              x: '54%',
              y: '65%',
              width: '36%'
            },
            { //Rightside Label (middle portion)
              text: '1414',
              fontColor: '#4CAF50',
              fontFamily: 'Georgia',
              fontSize: 35,
              textAlign: 'center',
              x: '54%',
              y: '68%',
              width: '36%'
            },
            { //Rightside Label (bottom portion)
              text: 'Jan 1 - Jun 30',
              fontColor: '#212121',
              padding: 2,
              textAlign: 'center',
              x: '54%',
              y: '80%',
              width: '36%'
            }
          ],
    
          tooltip: { //Lefthand Label (bottom portion)
            text: '%data-day',
            backgroundColor: 'none',
            borderColor: 'none',
            fontColor: '#212121',
            padding: 2,
            //textAlign: 'center',
            align: 'center',
            sticky: true,
            timeout: 30000,
            x: '10%',
            y: '80%',
            width: '36%'
          },
    
          plotarea: {
            marginTop: '15%',
            marginBottom: '55%',
            marginLeft: '8%',
            marginRight: '8%'
          }
        };
    
        zingchart.loadModules('calendar', function() {
          zingchart.render({
            id: 'myChart',
            data: myConfig,
            height: '100%',
            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"><a class="zc-ref" href="https://www.zingchart.com">Powered by ZingChart</a></div>
    </body>
    
    </html>
    html,
    body {
      height: 100%;
      width: 100%;
      margin: 0;
      padding: 0;
    }
    
    #myChart {
      height: 100%;
      width: 100%;
      min-height: 150px;
    }
    
    .zc-ref {
      display: none;
    }
    var myConfig = {
      type: 'calendar',
      plot: {
        "selectionMode": "multiple",
        "selectedState": {
          "backgroundColor": "#f00 #0f0"
        }
      },
      options: {
        year: {
          text: '2016',
          visible: false
        },
        startMonth: 1,
        endMonth: 6,
        palette: ['none', '#4CAF50'],
        month: {
          item: {
            fontColor: 'gray',
            fontSize: 9
          }
        },
        weekday: {
          values: ['', 'M', '', 'W', '', 'F', ''],
          item: {
            fontColor: 'gray',
            fontSize: 9
          }
        },
        "day": {
          "flat": false
        },
        values: [
          ['2016-01-01', 3],
          ['2016-01-04', 12],
          ['2016-01-05', 3],
          ['2016-01-06', 4],
          ['2016-01-07', 9],
          ['2016-01-08', 11],
          ['2016-01-11', 5],
          ['2016-01-12', 5],
          ['2016-01-13', 9],
          ['2016-01-14', 9],
          ['2016-01-15', 9],
          ['2016-01-18', 4],
          ['2016-01-19', 6],
          ['2016-01-20', 5],
          ['2016-01-21', 6],
          ['2016-01-22', 2],
          ['2016-01-25', 5],
          ['2016-01-26', 9],
          ['2016-01-27', 6],
          ['2016-01-28', 6],
          ['2016-01-29', 7],
          ['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],
        ]
      },
      labels: [{ //Lefthand Label (container portion)
          borderColor: 'gray',
          borderWidth: 1,
          x: '8%',
          y: '60%',
          width: '40%',
          height: '30%'
        },
        { //Lefthand Label (top portion)
          text: 'Daily Contribution',
          fontColor: '#212121',
          textAlign: 'center',
          x: '10%',
          y: '65%',
          width: '36%'
        },
        { //Lefthand Label (middle portion)
          text: '%plot-value',
          fontColor: '#4CAF50',
          fontFamily: 'Georgia',
          fontSize: 35,
          textAlign: 'center',
          x: '10%',
          y: '68%',
          width: '36%'
        },
        // Note: the bottom portion of the Bottom-Left Label is the fixed tooltip, below.
    
        { //Rightside Label (container portion)
          borderColor: 'gray',
          borderWidth: 1,
          x: '52%',
          y: '60%',
          width: '40%',
          height: '30%',
        },
        { //Rightside Label (top portion)
          text: 'Total Contributions',
          fontColor: '#212121',
          textAlign: 'center',
          x: '54%',
          y: '65%',
          width: '36%'
        },
        { //Rightside Label (middle portion)
          text: '1414',
          fontColor: '#4CAF50',
          fontFamily: 'Georgia',
          fontSize: 35,
          textAlign: 'center',
          x: '54%',
          y: '68%',
          width: '36%'
        },
        { //Rightside Label (bottom portion)
          text: 'Jan 1 - Jun 30',
          fontColor: '#212121',
          padding: 2,
          textAlign: 'center',
          x: '54%',
          y: '80%',
          width: '36%'
        }
      ],
    
      tooltip: { //Lefthand Label (bottom portion)
        text: '%data-day',
        backgroundColor: 'none',
        borderColor: 'none',
        fontColor: '#212121',
        padding: 2,
        //textAlign: 'center',
        align: 'center',
        sticky: true,
        timeout: 30000,
        x: '10%',
        y: '80%',
        width: '36%'
      },
    
      plotarea: {
        marginTop: '15%',
        marginBottom: '55%',
        marginLeft: '8%',
        marginRight: '8%'
      }
    };
    
    zingchart.loadModules('calendar', function() {
      zingchart.render({
        id: 'myChart',
        data: myConfig,
        height: '100%',
        width: '100%'
      });
    });