• Edit
  • Download
  • <!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>
    
      <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="zc"></div>
      <script>
        ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"];
        var cdata = {
          type: 'radar',
          heatmap: {
            graph: {
              keyScale: 'scale-k',
              valScale: 'scale-v'
            },
            brushType: 'circle',
            size: '10px',
            composite: true
          },
          plotarea: {
            margin: 10
          },
          scale: {
            sizeFactor: 0.9
          },
          scaleV: {
            offsetStart: 40,
            offsetEnd: 0,
            values: '0:100:25'
          },
          scaleK: {
            aspect: 'circle',
            offset: 0,
            values: '0:355:5',
            maxItems: 12
          },
          tooltip: {},
          plot: {},
          series: [{}]
        };
    
        var MAX = 100;
        var aData = [];
        zingchart.bind('zc', 'load', function() {
          var l, k, v;
          var iMaxPoints = 512;
          for (l = 0; l < iMaxPoints; l++) {
            k = 5 * Math.round(((iMaxPoints - l) % 355) / 5);
            v = 5 * Math.round((l % 100) / 5);
            aData.push([k, v, MAX]);
          }
          zingchart.exec('zc', 'heatmap.setdata', {
            data: aData
          });
        });
    
        zingchart.loadModules('heatmap', function() {
          zingchart.render({
            id: 'zc',
            width: 500,
            height: 500,
            output: 'svg',
            data: cdata,
            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="zc"></div>
      </body>
    </html>
    
    
    body { 
      margin:10px;
      padding:10px; 
    }
    
    *, input, button, select, textarea, label {
      font-family: 'Lucida Sans Unicode',Monaco,Tahoma,Verdana,Arial;
    }
    var cdata = {
        type : 'radar',
        heatmap : {
            graph : {
                keyScale : 'scale-k',
                valScale : 'scale-v'
            },
          	brushType: 'circle',
          	size: '10px',
          	composite: true
        },
        plotarea : {
            margin : 10
        },
        scale : {
            sizeFactor : 0.9
        },
        scaleV : {
            offsetStart : 40,
            offsetEnd : 0,
            values : '0:100:25'
        },
        scaleK : {
            aspect : 'circle',
            offset : 0,
            values : '0:355:5',
            maxItems : 12
        },
        tooltip : {
        },
        plot : {
        },
        series : [
            {}
        ]
    };
    
    var MAX = 100;
    var aData = [];
    zingchart.bind('zc', 'load', function() {
            var l, k, v;
            var iMaxPoints = 512;
            for (l=0;l<iMaxPoints;l++) {
                    k = 5 * Math.round(((iMaxPoints-l)%355) / 5);
                    v = 5 * Math.round((l%100) / 5);
                    aData.push([k, v, MAX]);
            }
            zingchart.exec('zc', 'heatmap.setdata', {
                data : aData
            });    
    });
    
    zingchart.loadModules('heatmap', function() {
      zingchart.render({
        id : 'zc',
        width : 500,
        height : 500,
        output : 'svg',
        data : cdata,
        modules : 'heatmap,color-scale'
      });
    });