• 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>
      <script nonce="undefined">
        zingchart.MODULESDIR = "https://cdn.zingchart.com/modules/";
      </script>
    
      <script nonce="undefined" src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous">
      </script>
    
      <style>
        body {
          margin: 10px;
          padding: 10px;
        }
    
        *,
        input,
        button,
        select,
        textarea,
        label {
          font-family: 'Lucida Sans Unicode', Monaco, Tahoma, Verdana, Arial;
        }
      </style>
    </head>
    
    <body>
      <div id="myChart"></div>
      <script>
        ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"];
        let chartConfig = {
          type: 'radar',
          heatmap: {
            alpha: 1,
            async: false,
            blur: 20,
            brushType: 'circle',
            composite: true,
            graph: {
              keyScale: 'scale-k',
              valScale: 'scale-v'
            },
            size: '10px',
            tooltip: {
              decimals: 1,
    
              backgroundColor: '#f90',
              borderColor: '#f60',
              borderRadius: -5,
              borderWidth: 2,
              callout: true,
              calloutHeight: 20,
              calloutPosition: 'bottom',
              calloutWidth: 0,
              padding: 10,
              shadow: true,
              calloutTip: {
                type: 'circle',
                backgroundColor: '#fff',
                borderWidth: 2,
                borderColor: '#f60',
                size: 5,
                offsetY: 5,
              }
            },
          },
          plotarea: {
            margin: '10px'
          },
          scale: {
            sizeFactor: 0.9
          },
          scaleV: {
            values: '0:100:25',
            offsetStart: '40px',
            offsetEnd: 0
          },
          scaleK: {
            values: '0:355:5',
            aspect: 'circle',
            maxItems: 12,
            offset: 0,
          },
          tooltip: {},
          plot: {},
          series: [{}]
        };
    
        let MAX = 100;
        let aData = [];
        zingchart.bind('myChart', 'load', function() {
          window.setInterval(function() {
            let l, k, v;
            let iMaxPoints = 512;
            if (aData.length === 0) {
              for (l = 0; l < iMaxPoints; l++) {
                k = 5 * Math.round(ZC._r_(0, 355) / 5);
                v = 5 * Math.round(ZC._r_(10, 100) / 5);
                aData.push([k, v, MAX * Math.random()]);
              }
            } else {
              for (l = aData.length - 1; l >= 0; l--) {
                aData[l][2] = Math.min(MAX, aData[l][2] - (MAX / 19) + (MAX / 20) * Math.random());
                if (aData[l][2] <= 0) {
                  aData.splice(l, 1);
                }
              }
              for (l = 0; l < iMaxPoints - aData.length; l++) {
                k = 5 * Math.round(ZC._r_(0, 355) / 5);
                v = 5 * Math.round(ZC._r_(10, 100) / 5);
                aData.push([k, v, MAX * Math.random()]);
              }
            }
            zingchart.exec('myChart', 'heatmap.setdata', {
              data: aData
            });
          }, 15);
        });
    
        zingchart.loadModules('heatmap', function() {
          zingchart.render({
            id: 'myChart',
            width: 500,
            height: 500,
            output: 'svg',
            data: chartConfig,
            modules: 'heatmap,color-scale'
          });
        });
      </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>
      <script>
        zingchart.MODULESDIR = "https://cdn.zingchart.com/modules/";
      </script>
    
      <script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous">
      </script>
    
    </head>
    
    <body>
      <div id="myChart"></div>
    </body>
    
    </html>
    body {
      margin: 10px;
      padding: 10px;
    }
    
    *,
    input,
    button,
    select,
    textarea,
    label {
      font-family: 'Lucida Sans Unicode', Monaco, Tahoma, Verdana, Arial;
    }
    let chartConfig = {
      type: 'radar',
      heatmap: {
        alpha: 1,
        async: false,
        blur: 20,
        brushType: 'circle',
        composite: true,
        graph: {
          keyScale: 'scale-k',
          valScale: 'scale-v'
        },
        size: '10px',
        tooltip: {
          decimals: 1,
    
          backgroundColor: '#f90',
          borderColor: '#f60',
          borderRadius: -5,
          borderWidth: 2,
          callout: true,
          calloutHeight: 20,
          calloutPosition: 'bottom',
          calloutWidth: 0,
          padding: 10,
          shadow: true,
          calloutTip: {
            type: 'circle',
            backgroundColor: '#fff',
            borderWidth: 2,
            borderColor: '#f60',
            size: 5,
            offsetY: 5,
          }
        },
      },
      plotarea: {
        margin: '10px'
      },
      scale: {
        sizeFactor: 0.9
      },
      scaleV: {
        values: '0:100:25',
        offsetStart: '40px',
        offsetEnd: 0
      },
      scaleK: {
        values: '0:355:5',
        aspect: 'circle',
        maxItems: 12,
        offset: 0,
      },
      tooltip: {},
      plot: {},
      series: [{}]
    };
    
    let MAX = 100;
    let aData = [];
    zingchart.bind('myChart', 'load', function() {
      window.setInterval(function() {
        let l, k, v;
        let iMaxPoints = 512;
        if (aData.length === 0) {
          for (l = 0; l < iMaxPoints; l++) {
            k = 5 * Math.round(ZC._r_(0, 355) / 5);
            v = 5 * Math.round(ZC._r_(10, 100) / 5);
            aData.push([k, v, MAX * Math.random()]);
          }
        } else {
          for (l = aData.length - 1; l >= 0; l--) {
            aData[l][2] = Math.min(MAX, aData[l][2] - (MAX / 19) + (MAX / 20) * Math.random());
            if (aData[l][2] <= 0) {
              aData.splice(l, 1);
            }
          }
          for (l = 0; l < iMaxPoints - aData.length; l++) {
            k = 5 * Math.round(ZC._r_(0, 355) / 5);
            v = 5 * Math.round(ZC._r_(10, 100) / 5);
            aData.push([k, v, MAX * Math.random()]);
          }
        }
        zingchart.exec('myChart', 'heatmap.setdata', {
          data: aData
        });
      }, 15);
    });
    
    zingchart.loadModules('heatmap', function() {
      zingchart.render({
        id: 'myChart',
        width: 500,
        height: 500,
        output: 'svg',
        data: chartConfig,
        modules: 'heatmap,color-scale'
      });
    });