<html>
	<head>
		<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>
    
    <script>
      window.setTimeout(function() {
        $(document.body).append('<iframe style="border:0px;position:absolute;top:0px;right:0px;width:270px;height:480px;" src="https://codepen.io/zingchart/full/ef639d5ca7dd69ae067720228a01d542"></iframe>');
      }, 2500);
    </script>
    
		<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',
        composite : true,
        size : 10,
        blur : 20,
        alpha : 1,
        tooltip : {
          decimals : 1
        },
        async : false
    },
    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() {
    window.setInterval(function() {
        var l, k, v;
        var 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('zc', 'heatmap.setdata', {
            data : aData
        });    
    }, 15);
});

zingchart.loadModules('heatmap', function() {
  zingchart.render({
    id : 'zc',
    width : 500,
    height : 500,
    output : 'svg',
    data : cdata,
    modules : 'heatmap,color-scale'
  });
});
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.