Gallery Back to Gallery

France Population Heat Map

​ (up to people)
Powered by ZingChart
<!doctype html>
<html class="zc-html">

<head>
  <meta charset="utf-8">
  <title>ZingSoft Demo</title>
  <script nonce="undefined" src="https://cdn.zingchart.com/zingchart.min.js"></script>
  <style>
    .zc-body {
      background: #fff;
    }

    .chart--container {
      height: 100%;
      width: 100%;
      min-height: 530px;
    }

    .zc-ref {
      display: none;
    }
  </style>
</head>
​

<body class="zc-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="myChart" class="chart--container">
    <a href="https://www.zingchart.com/" rel="noopener" class="zc-ref">Powered by ZingChart</a>
  </div>

  <script nonce="undefined" src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/374756/fr_pop_2010.js'></script>

  <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('myChart', '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('myChart', 'colorscale.update', {
        data: {
          maxValue: iMaxPop
        }
      });
      var oCSInfo = zingchart.exec('myChart', 'colorscale.getinfo');
      zingchart.exec('myChart', 'heatmap.setdata', {
        minValue: 0,
        maxValue: oCSInfo.max,
        data: aData,
        size: bSmallBrush ? 4 : 12,
        blur: bSmallBrush ? 0 : 6
      });
    }

    zingchart.bind('myChart', '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
        });
      }
    });

    document.querySelector('#sc').addEventListener('click', function() {
      if (this.checked) {
        paintHeatmap(100000, true);
        let maxpopRef = document.querySelector('#maxpop');
        maxpopRef.value = 100000;
        maxpopRef.removeAttribute('disabled')
      } else {
        paintHeatmap();
        let maxpopRef = document.querySelector('#maxpop');
        maxpopRef.setAttribute('disabled', 'disabled')
      }
    });

    document.querySelector('#maxpop').addEventListener('change', function() {
      paintHeatmap(this.value, true);
    });

    zingchart.loadModules('heatmap,color-scale,maps,maps-fra', function() {

      zingchart.render({
        id: 'myChart',
        width: 600,
        height: 600,
        output: 'canvas',
        data: cdata,
        modules: 'heatmap,color-scale'
      });

    });
  </script>
</body>

</html>
<!doctype html>
<html class="zc-html">
  <head>
    <meta charset="utf-8">
    <title>ZingSoft Demo</title>
    <script src="https://cdn.zingchart.com/zingchart.min.js"></script>
  </head>
  ​
  <body class="zc-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="myChart" class="chart--container">
      <a href="https://www.zingchart.com/" rel="noopener" class="zc-ref">Powered by ZingChart</a>
    </div>

    <script src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/374756/fr_pop_2010.js'></script>

  </body>
</html>
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('myChart', '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('myChart', 'colorscale.update', {
        data : {
            maxValue : iMaxPop
        }
    });
    var oCSInfo = zingchart.exec('myChart', 'colorscale.getinfo');
    zingchart.exec('myChart', 'heatmap.setdata', {
        minValue : 0,
        maxValue : oCSInfo.max,
        data : aData,
        size : bSmallBrush?4:12,
        blur : bSmallBrush?0:6
    });
}

zingchart.bind('myChart', '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    
        });
    }
});

document.querySelector('#sc').addEventListener('click', function() {
    if (this.checked) {
        paintHeatmap(100000, true);
      let maxpopRef = document.querySelector('#maxpop');
        maxpopRef.value = 100000;
        maxpopRef.removeAttribute('disabled')
    } else {
        paintHeatmap();
        let maxpopRef = document.querySelector('#maxpop');
        maxpopRef.setAttribute('disabled', 'disabled')
    }
});

document.querySelector('#maxpop').addEventListener('change', function() {
    paintHeatmap(this.value, true);
});

zingchart.loadModules('heatmap,color-scale,maps,maps-fra', function() {

  zingchart.render({
      id : 'myChart',
      width : 600,
      height : 600,
      output : 'canvas',
      data : cdata,
      modules : 'heatmap,color-scale'
  });
  
});
.zc-body { background:#fff; }

.chart--container {
  height: 100%;
  width: 100%;
  min-height: 530px;
}

.zc-ref {
  display: none;
}
Mixed Chart Dashboard 62/270 Water Quality Heat Map Chart

Related Documentation: