• Edit
  • Download
  • <!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"];
        let chartConfig = {
          type: 'null',
          backgroundColor: '#fff',
          flat: true,
          colorScale: {
            alpha: 0.8,
            aspect: 'gradient',
            backgroundColor: null,
            gradientStops: '0.0 0.4 0.6 0.7 0.8 1.0',
            gradientColors: 'rgba(0,0,255,0) #0000ff #00ffff #bfff00 #ffff00 #ff0000',
            cursor: {
              type: 'gear3',
              size: 10,
              backgroundColor: 'red',
    
              mediaRules: [{
                maxWidth: 400,
                backgroundColor: 'blue',
              }]
            },
          },
          heatmap: {
            alpha: 1,
            tooltip: {
              decimals: 0,
              thousandsSeparator: '.',
              text: '~ %value people'
            },
            sortData: true,
            async: true,
            brushType: 'square',
            size: 3,
            blur: 1
          },
          tooltip: {
            callout: true,
            calloutPosition: 'bottom',
            calloutWidth: 10,
            calloutHeight: 6,
            fontSize: 11,
            padding: '5 10',
          },
          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: '100%',
            height: '100%',
            output: 'canvas',
            data: chartConfig,
            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>
    .zc-body {
      background: #fff;
    }
    
    .chart--container {
      height: 100%;
      width: 100%;
      min-height: 530px;
    }
    
    .zc-ref {
      display: none;
    }
    let chartConfig = {
      type: 'null',
      backgroundColor: '#fff',
      flat: true,
      colorScale: {
        alpha: 0.8,
        aspect: 'gradient',
        backgroundColor: null,
        gradientStops: '0.0 0.4 0.6 0.7 0.8 1.0',
        gradientColors: 'rgba(0,0,255,0) #0000ff #00ffff #bfff00 #ffff00 #ff0000',
        cursor: {
          type: 'gear3',
          size: 10,
          backgroundColor: 'red',
    
          mediaRules: [{
            maxWidth: 400,
            backgroundColor: 'blue',
          }]
        },
      },
      heatmap: {
        alpha: 1,
        tooltip: {
          decimals: 0,
          thousandsSeparator: '.',
          text: '~ %value people'
        },
        sortData: true,
        async: true,
        brushType: 'square',
        size: 3,
        blur: 1
      },
      tooltip: {
        callout: true,
        calloutPosition: 'bottom',
        calloutWidth: 10,
        calloutHeight: 6,
        fontSize: 11,
        padding: '5 10',
      },
      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: '100%',
        height: '100%',
        output: 'canvas',
        data: chartConfig,
        modules: 'heatmap,color-scale'
      });
    
    });