• 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></style>
    </head>
    
    <body>
      <div id='myChart'></div>
      <script>
        ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"];
    
        function formatDate(type) {
          var values = [];
          var date = new Date();
    
          switch (type) {
            case 'date':
              for (var n = 0; n < 8; n++) {
                var day = date.getDate();
                var month = date.getMonth() + 1;
                var year = date.getFullYear();
                var formatted = year + '-' + month + '-' + day;
                values.push(formatted);
                date = new Date(date.getTime() + 24 * 60 * 60 * 1000); // Increment by 24 hours
              }
              break;
            case 'datetime':
              for (var n = 0; n < 8; n++) {
                var day = date.getDate();
                var month = date.getMonth() + 1;
                var year = date.getFullYear();
                var hour = date.getHours();
                var minute = date.getMinutes();
                var second = date.getSeconds();
                var formatted = year + '-' + month + '-' + day + ' ' + hour + ':' + minute + ':' + second;
                values.push(formatted);
                date = new Date(date.getTime() + 24 * 60 * 60 * 1000); // Increment by 24 hours
              }
          }
          return values;
        }
    
        var myConfig = {
          type: "bar",
          title: {
            text: 'Custom Scale Labels'
          },
          crosshairX: {
            plotLabel: {
              text: "%data-datetime" // Custom token for plot label
            }
          },
          tooltip: {
            visible: false
          },
          scaleX: {
            values: formatDate('date'),
            itemsOverlap: true,
            item: {
              angle: 45
            }
          },
          series: [{
            values: [35, 42, 67, 89, 25, 34, 67, 85],
            "data-datetime": formatDate('datetime')
          }]
        };
    
        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>
    
      <script src="https://cdn.zingchart.com/zingchart.min.js"></script>
    </head>
    
    <body>
      <div id='myChart'></div>
    </body>
    
    </html>
    
          
    function formatDate(type) {
      var values = [];
      var date = new Date();
    
      switch (type) {
        case 'date':
          for (var n = 0; n < 8; n++) {
            var day = date.getDate();
            var month = date.getMonth() + 1;
            var year = date.getFullYear();
            var formatted = year + '-' + month + '-' + day;
            values.push(formatted);
            date = new Date(date.getTime() + 24 * 60 * 60 * 1000); // Increment by 24 hours
          }
          break;
        case 'datetime':
          for (var n = 0; n < 8; n++) {
            var day = date.getDate();
            var month = date.getMonth() + 1;
            var year = date.getFullYear();
            var hour = date.getHours();
            var minute = date.getMinutes();
            var second = date.getSeconds();
            var formatted = year + '-' + month + '-' + day + ' ' + hour + ':' + minute + ':' + second;
            values.push(formatted);
            date = new Date(date.getTime() + 24 * 60 * 60 * 1000); // Increment by 24 hours
          }
      }
      return values;
    }
    
    var myConfig = {
      type: "bar",
      title: {
        text: 'Custom Scale Labels'
      },
      crosshairX: {
        plotLabel: {
          text: "%data-datetime" // Custom token for plot label
        }
      },
      tooltip: {
        visible: false
      },
      scaleX: {
        values: formatDate('date'),
        itemsOverlap: true,
        item: {
          angle: 45
        }
      },
      series: [{
        values: [35, 42, 67, 89, 25, 34, 67, 85],
        "data-datetime": formatDate('datetime')
      }]
    };
    
    zingchart.render({
      id: 'myChart',
      data: myConfig,
      height: 400,
      width: '100%'
    });