• 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,
            #myChart {
                height: 100%;
                width: 100%;
            }
    
            zing-grid[loading] {
                height: 450px;
            }
        </style>
    </head>
    
    <body>
        <div id='myChart'></div>
        <script>
            ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"];
            var myConfig = {
                "type": "heatmap",
                "plotarea": {
                    "margin": "dynamic"
                },
                "plot": {
                    "aspect": "brightness"
                },
                "series": [{
                        "values": [59, 15, 5, 30, 60, 99, 28, 33, 34, 51, 12, 30, 15, 39, 15, 71, 23, 51, 29, 20]
                    },
                    {
                        "values": [34, 32, 87, 65, 9, 17, 40, 12, 17, 22, 13, 42, 46, 27, 42, 33, 17, 63, 47, 42]
                    },
                    {
                        "values": [90, 19, 50, 39, 12, 49, 14, 61, 59, 60, 23, 42, 52, 12, 34, 23, 16, 45, 32, 31]
                    },
                    {
                        "values": [23, 45, 12, 37, 31, 35, 64, 71, 63, 26, 12, 36, 37, 21, 74, 35, 26, 41, 23, 21]
                    },
                    {
                        "values": [43, 50, 59, 60, 61, 49, 23, 14, 51, 46, 21, 63, 24, 12, 42, 31, 33, 25, 12, 15]
                    },
                    {
                        "values": [51, 59, 12, 15, 29, 31, 52, 32, 41, 23, 15, 63, 12, 23, 51, 41, 23, 32, 31, 17]
                    },
                    {
                        "values": [12, 23, 26, 35, 54, 34, 35, 36, 37, 38, 23, 18, 48, 54, 52, 56, 60, 70, 43, 62]
                    },
                    {
                        "values": [15, 59, 60, 61, 15, 79, 11, 21, 6, 19, 3, 28, 17, 34, 5, 20, 13, 15, 16, 31]
                    }
                ]
            };
    
            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'></div>
    	</body>
    </html>
    html,body,#myChart{height: 100%;width: 100%;}
    var myConfig = {
     	"type": "heatmap",
     	"plotarea" : {
     	  "margin" : "dynamic"
     	},
     	"plot":{
     	  "aspect":"brightness"
     	},
    	"series": [
    	  {"values": [59,15,5,30,60,99,28,33,34,51,12,30,15,39,15,71,23,51,29,20]},
    	  {"values": [34,32,87,65,9,17,40,12,17,22,13,42,46,27,42,33,17,63,47,42]},
    	  {"values": [90,19,50,39,12,49,14,61,59,60,23,42,52,12,34,23,16,45,32,31]},
    	  {"values": [23,45,12,37,31,35,64,71,63,26,12,36,37,21,74,35,26,41,23,21]},
    	  {"values": [43,50,59,60,61,49,23,14,51,46,21,63,24,12,42,31,33,25,12,15]},
    	  {"values": [51,59,12,15,29,31,52,32,41,23,15,63,12,23,51,41,23,32,31,17]},
    	  {"values": [12,23,26,35,54,34,35,36,37,38,23,18,48,54,52,56,60,70,43,62]},
    	  {"values": [15,59,60,61,15,79,11,21,6,19,3,28,17,34,5,20,13,15,16,31]}
    	]
    };
    
    zingchart.render({ 
    	id : 'myChart', 
    	data : myConfig, 
    	height : "100%", 
    	width: "100%" 
    });