• 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>
    
        <script src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/374756/fr_pop_2010.js'></script>
    
        <style>
            body {
                margin: 10px;
                padding: 10px;
            }
    
            *,
            input,
            button,
            select,
            textarea,
            label {
                font-family: 'Lucida Sans Unicode', Monaco, Tahoma, Verdana, Arial;
            }
    
            zing-grid[loading] {
                height: nullpx;
            }
        </style>
    </head>
    
    <body>
        <input id="sc" type="checkbox" /><label for="sc">Show only small cities</label> (up to <select id="maxpop" disabled="disabled">
            <option value="100000">100.000</option>
            <option value="50000">50.000</option>
            <option value="10000">10.000</option>
            <option value="5000">5.000</option>
            <option value="1000">1.000</option>
            <option value="500">500</option>
        </select> people)
    
        <div id="zc"></div>
    
        <script>
            ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"];
            var cdata = {
                type: "null",
                backgroundColor: "#fff",
                flat: true,
                tooltip: {
                    padding: '5 10',
                    fontSize: 11,
                    callout: true,
                    calloutWidth: 10,
                    calloutHeight: 6,
                    calloutPosition: 'bottom'
                },
                heatmap: {
                    alpha: 1,
                    tooltip: {
                        decimals: 0,
                        thousandsSeparator: '.',
                        text: '~ %value people'
                    },
                    sortData: true,
                    async: true,
                    brushType: 'square',
                    size: 3,
                    blur: 1
                },
                colorScale: {
                    aspect: 'gradient',
                    gradientStops: '0.0 0.4 0.6 0.7 0.8 1.0',
                    gradientColors: 'rgba(0,0,255,0) #0000ff #00ffff #bfff00 #ffff00 #ff0000',
                    backgroundColor: null,
                    alpha: 0.8
                },
                shapes: [{
                    type: "zingchart.maps",
                    options: {
                        id: "mapmain",
                        name: "fra",
                        scale: true,
                        zooming: false,
                        panning: false,
                        scrolling: false,
                        style: {
                            flat: true,
                            controls: {
                                visible: false
                            },
                            borderAlpha: 0.1,
                            borderColor: "#fff",
                            label: {
                                overlap: false,
                                text: "%long-text"
                            },
                            hoverState: {
                                visible: false,
                                backgroundColor: "none",
                                shadowAlpha: 0.2,
                                shadowDistance: 2,
                                shadow: true,
                                shadowColor: "#333"
                            }
                        }
                    }
                }]
            };
    
            zingchart.bind('zc', 'load', function() {
                paintHeatmap();
            });
    
            window.paintHeatmap = function(iMax, bSmallBrush) {
                var aData = [];
                var iMaxPop = 0;
                for (var i = 0; i < FR_POP_2010.length; i++) {
                    if (iMax && FR_POP_2010[i][2] > iMax) {
                        continue;
                    }
                    var fLon = FR_POP_2010[i][0],
                        fLat = FR_POP_2010[i][1],
                        iPop = FR_POP_2010[i][2];
                    var aXY = zingchart.maps.getXY('mapmain', [fLon, fLat]);
                    aData.push([aXY[0], aXY[1], iPop]);
                    iMaxPop = Math.max(iMaxPop, iPop);
                }
                zingchart.exec('zc', 'colorscale.update', {
                    data: {
                        maxValue: iMaxPop
                    }
                });
                var oCSInfo = zingchart.exec('zc', 'colorscale.getinfo');
                zingchart.exec('zc', 'heatmap.setdata', {
                    minValue: 0,
                    maxValue: oCSInfo.max,
                    data: aData,
                    size: bSmallBrush ? 4 : 12,
                    blur: bSmallBrush ? 0 : 6
                });
            }
    
            zingchart.bind('zc', 'heatmap.mousemove', function(oInfo) {
                if (oInfo.value !== null) {
                    zingchart.exec(oInfo.id, 'colorscale.setvalue', {
                        graphid: oInfo.graphid,
                        value: oInfo.value
                    });
                } else {
                    zingchart.exec(oInfo.id, 'colorscale.clear', {
                        graphid: oInfo.graphid
                    });
                }
            });
    
            $('#sc').on('click', function() {
                if (this.checked) {
                    paintHeatmap(100000, true);
                    $('#maxpop').removeAttr('disabled').val(100000);
                } else {
                    paintHeatmap();
                    $('#maxpop').attr('disabled', 'disabled');
                }
            });
    
            $('#maxpop').on('change', function() {
                paintHeatmap(this.value, true);
            });
    
            zingchart.loadModules('heatmap,color-scale,maps,maps-fra', function() {
    
                zingchart.render({
                    id: 'zc',
                    width: 600,
                    height: 600,
                    output: 'canvas',
                    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>
        
        <script src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/374756/fr_pop_2010.js'></script>
        
      </head>
    	<body>
        <input id="sc" type="checkbox" /><label for="sc">Show only small cities</label> (up to <select id="maxpop" disabled="disabled">
          <option value="100000">100.000</option>
          <option value="50000">50.000</option>
          <option value="10000">10.000</option>
          <option value="5000">5.000</option>
          <option value="1000">1.000</option>
          <option value="500">500</option>
          </select> people)
        
    		<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 : "null",
        backgroundColor : "#fff",
        flat : true,
        tooltip : {
            padding : '5 10',
            fontSize : 11,
            callout : true,
            calloutWidth : 10,
            calloutHeight : 6,
            calloutPosition : 'bottom'
        },
        heatmap : {
            alpha : 1,
            tooltip : {
                decimals : 0,
                thousandsSeparator : '.',
                text : '~ %value people'
            },
            sortData : true,
            async : true,
            brushType : 'square',
            size : 3,
            blur : 1
        },
        colorScale : {
            aspect : 'gradient',
            gradientStops : '0.0 0.4 0.6 0.7 0.8 1.0',
            gradientColors : 'rgba(0,0,255,0) #0000ff #00ffff #bfff00 #ffff00 #ff0000',
            backgroundColor : null,
            alpha : 0.8
        },
        shapes:[
            {
                type : "zingchart.maps",
                options : {
                    id : "mapmain",
                    name : "fra",
                    scale : true,
                    zooming : false,
                    panning : false,
                    scrolling : false,
                    style : {
                        flat : true,
                        controls : {
                            visible : false
                        },
                        borderAlpha : 0.1,
                        borderColor : "#fff",
                        label : {
                            overlap : false,
                            text : "%long-text"
                        },
                        hoverState : {
                            visible : false,
                            backgroundColor : "none",
                            shadowAlpha : 0.2,
                            shadowDistance : 2,
                            shadow : true,
                            shadowColor : "#333"
                        }
                    }
                }
            }
        ]
    };
    
    zingchart.bind('zc', 'load', function() {
        paintHeatmap();
    });
    
    window.paintHeatmap = function(iMax, bSmallBrush) {
        var aData = [];
        var iMaxPop = 0;
        for (var i=0;i<FR_POP_2010.length;i++) {
            if (iMax && FR_POP_2010[i][2] > iMax) {
                continue;
            }
            var fLon = FR_POP_2010[i][0], fLat = FR_POP_2010[i][1], iPop = FR_POP_2010[i][2];
            var aXY = zingchart.maps.getXY('mapmain', [fLon, fLat]);
            aData.push([aXY[0], aXY[1], iPop]);
            iMaxPop = Math.max(iMaxPop, iPop);
        }
        zingchart.exec('zc', 'colorscale.update', {
            data : {
                maxValue : iMaxPop
            }
        });
        var oCSInfo = zingchart.exec('zc', 'colorscale.getinfo');
        zingchart.exec('zc', 'heatmap.setdata', {
            minValue : 0,
            maxValue : oCSInfo.max,
            data : aData,
            size : bSmallBrush?4:12,
            blur : bSmallBrush?0:6
        });
    }
    
    zingchart.bind('zc', 'heatmap.mousemove', function(oInfo) {
        if (oInfo.value !== null) {
            zingchart.exec(oInfo.id, 'colorscale.setvalue', {
              graphid : oInfo.graphid,
        		  value : oInfo.value
        	});
        } else {
            zingchart.exec(oInfo.id, 'colorscale.clear', {
                graphid : oInfo.graphid    
            });
        }
    });
    
    $('#sc').on('click', function() {
        if (this.checked) {
            paintHeatmap(100000, true);
            $('#maxpop').removeAttr('disabled').val(100000);
        } else {
            paintHeatmap();
            $('#maxpop').attr('disabled', 'disabled');
        }
    });
    
    $('#maxpop').on('change', function() {
        paintHeatmap(this.value, true);
    });
    
    zingchart.loadModules('heatmap,color-scale,maps,maps-fra', function() {
    
      zingchart.render({
          id : 'zc',
          width : 600,
          height : 600,
          output : 'canvas',
          data : cdata,
          modules : 'heatmap,color-scale'
      });
      
    });