• Edit
  • Download
  • <!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>
      <style>
        .zc-body {
          background: #fff;
        }
    
        .chart--container {
          height: 100%;
          width: 100%;
          min-height: 530px;
        }
    
        .zc-ref {
          display: none;
        }
      </style>
    </head>
    ​
    
    <body class="zc-body">
      ​
      <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>
      <script>
        ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"];
        var MAX = [20, 10, 20, 150];
        var GRAD = [{
            stops: '0 0.4 0.6 0.7 0.8 1.0',
            colors: 'rgba(0,0,255,0) #0000ff #00ffff #bfff00 #ffff00 #ff0000'
          },
          {
            stops: '0 0.25 0.5 0.75 1',
            colors: '#B4E89F #A4E38A #8ADB69 #70D448 #5CAE3B'
          },
          {
            stops: '0 0.25 0.5 0.75 1',
            colors: '#75C3E5 #0E6BA8 #0A2472 #001C55 #00072D'
          },
          {
            stops: '0 0.4 0.5 0.6 0.7 1',
            colors: '#2B45B4 #5E37AE #B020AF #FF2D98 #FC840A'
          }
        ];
    
        var gdata = function(idx, title) {
          return {
            type: "null",
            title: {
              text: title,
              fontSize: 11
            },
            backgroundColor: "#fff",
            flat: true,
            heatmap: {
              size: 5,
              blur: 15,
              alpha: 0.75,
              minValue: 0,
              maxValue: MAX[idx],
              gradientStops: GRAD[idx].stops,
              gradientColors: GRAD[idx].colors
            },
            colorScale: {
              aspect: 'gradient',
              gradientStops: GRAD[idx].stops,
              gradientColors: GRAD[idx].colors,
              backgroundColor: null,
              alpha: 0.75,
              height: 100,
              minValue: 0,
              maxValue: MAX[idx]
            },
            plotarea: {
              margin: '25 10 10 10'
            },
            shapes: [{
              type: "zingchart.maps",
              options: {
                id: "mapmain" + idx,
                name: "fra",
                scale: true,
                zooming: false,
                panning: false,
                scrolling: false,
                style: {
                  flat: true,
                  controls: {
                    visible: false
                  },
                  borderAlpha: 0.1,
                  borderColor: "#fff",
                  label: {
                    visible: false,
                    overlap: false,
                    text: "%long-text"
                  },
                  hoverState: {
                    visible: false,
                    backgroundColor: "none",
                    shadowAlpha: 0.2,
                    shadowDistance: 2,
                    shadow: true,
                    shadowColor: "#333"
                  }
                }
              }
            }]
          };
        };
    
        var cdata = {
          layout: '2x2',
          flat: true,
          graphset: [
            gdata(0, 'Temperature'),
            gdata(1, 'Water quality'),
            gdata(2, 'Air pollution'),
            gdata(3, 'Wind speed')
          ]
        };
    
        var aData = [
          [],
          [],
          [],
          []
        ];
    
        zingchart.bind('myChart', 'load', function() {
          window.setInterval(function() {
            var l, iIndex, fLon, fLat, iPop, aXY;
            var iMaxPoints = 2 * 256;
    
            for (var g = 0; g < 4; g++) {
    
              if (aData[g].length === 0) {
                for (l = 0; l < iMaxPoints; l++) {
                  iIndex = ZC._r_(0, FR_POP_2010.length - 1);
                  fLon = FR_POP_2010[iIndex][0];
                  fLat = FR_POP_2010[iIndex][1];
                  iPop = FR_POP_2010[iIndex][2];
                  aXY = zingchart.maps.getXY('mapmain' + g, [fLon, fLat]);
                  aData[g].push([aXY[0], aXY[1], MAX[g] * Math.random()]);
                }
              } else {
                for (l = aData[g].length - 1; l >= 0; l--) {
                  aData[g][l][2] = Math.min(MAX[g], aData[g][l][2] - (MAX[g] / 19) + (MAX[g] / 20) * Math.random());
                  if (aData[g][l][2] <= 0) {
                    aData[g].splice(l, 1);
                  }
                }
                for (l = 0; l < iMaxPoints - aData[g].length; l++) {
                  iIndex = ZC._r_(0, FR_POP_2010.length - 1);
                  fLon = FR_POP_2010[iIndex][0];
                  fLat = FR_POP_2010[iIndex][1];
                  iPop = FR_POP_2010[iIndex][2];
                  aXY = zingchart.maps.getXY('mapmain' + g, [fLon, fLat]);
                  aData[g].push([aXY[0], aXY[1], MAX[g] * Math.random()]);
                }
              }
              zingchart.exec('myChart', 'heatmap.setdata', {
                graphid: g,
                data: aData[g]
              });
    
            }
          }, 15);
        });
    
        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
            });
          }
        });
    
        zingchart.loadModules('heatmap,color-scale,maps,maps-fra', function() {
    
          zingchart.render({
            id: 'myChart',
            width: '100%',
            height: '100%',
            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">
      ​
      <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;
    }
    var MAX = [20, 10, 20, 150];
    var GRAD = [{
        stops: '0 0.4 0.6 0.7 0.8 1.0',
        colors: 'rgba(0,0,255,0) #0000ff #00ffff #bfff00 #ffff00 #ff0000'
      },
      {
        stops: '0 0.25 0.5 0.75 1',
        colors: '#B4E89F #A4E38A #8ADB69 #70D448 #5CAE3B'
      },
      {
        stops: '0 0.25 0.5 0.75 1',
        colors: '#75C3E5 #0E6BA8 #0A2472 #001C55 #00072D'
      },
      {
        stops: '0 0.4 0.5 0.6 0.7 1',
        colors: '#2B45B4 #5E37AE #B020AF #FF2D98 #FC840A'
      }
    ];
    
    var gdata = function(idx, title) {
      return {
        type: "null",
        title: {
          text: title,
          fontSize: 11
        },
        backgroundColor: "#fff",
        flat: true,
        heatmap: {
          size: 5,
          blur: 15,
          alpha: 0.75,
          minValue: 0,
          maxValue: MAX[idx],
          gradientStops: GRAD[idx].stops,
          gradientColors: GRAD[idx].colors
        },
        colorScale: {
          aspect: 'gradient',
          gradientStops: GRAD[idx].stops,
          gradientColors: GRAD[idx].colors,
          backgroundColor: null,
          alpha: 0.75,
          height: 100,
          minValue: 0,
          maxValue: MAX[idx]
        },
        plotarea: {
          margin: '25 10 10 10'
        },
        shapes: [{
          type: "zingchart.maps",
          options: {
            id: "mapmain" + idx,
            name: "fra",
            scale: true,
            zooming: false,
            panning: false,
            scrolling: false,
            style: {
              flat: true,
              controls: {
                visible: false
              },
              borderAlpha: 0.1,
              borderColor: "#fff",
              label: {
                visible: false,
                overlap: false,
                text: "%long-text"
              },
              hoverState: {
                visible: false,
                backgroundColor: "none",
                shadowAlpha: 0.2,
                shadowDistance: 2,
                shadow: true,
                shadowColor: "#333"
              }
            }
          }
        }]
      };
    };
    
    var cdata = {
      layout: '2x2',
      flat: true,
      graphset: [
        gdata(0, 'Temperature'),
        gdata(1, 'Water quality'),
        gdata(2, 'Air pollution'),
        gdata(3, 'Wind speed')
      ]
    };
    
    var aData = [
      [],
      [],
      [],
      []
    ];
    
    zingchart.bind('myChart', 'load', function() {
      window.setInterval(function() {
        var l, iIndex, fLon, fLat, iPop, aXY;
        var iMaxPoints = 2 * 256;
    
        for (var g = 0; g < 4; g++) {
    
          if (aData[g].length === 0) {
            for (l = 0; l < iMaxPoints; l++) {
              iIndex = ZC._r_(0, FR_POP_2010.length - 1);
              fLon = FR_POP_2010[iIndex][0];
              fLat = FR_POP_2010[iIndex][1];
              iPop = FR_POP_2010[iIndex][2];
              aXY = zingchart.maps.getXY('mapmain' + g, [fLon, fLat]);
              aData[g].push([aXY[0], aXY[1], MAX[g] * Math.random()]);
            }
          } else {
            for (l = aData[g].length - 1; l >= 0; l--) {
              aData[g][l][2] = Math.min(MAX[g], aData[g][l][2] - (MAX[g] / 19) + (MAX[g] / 20) * Math.random());
              if (aData[g][l][2] <= 0) {
                aData[g].splice(l, 1);
              }
            }
            for (l = 0; l < iMaxPoints - aData[g].length; l++) {
              iIndex = ZC._r_(0, FR_POP_2010.length - 1);
              fLon = FR_POP_2010[iIndex][0];
              fLat = FR_POP_2010[iIndex][1];
              iPop = FR_POP_2010[iIndex][2];
              aXY = zingchart.maps.getXY('mapmain' + g, [fLon, fLat]);
              aData[g].push([aXY[0], aXY[1], MAX[g] * Math.random()]);
            }
          }
          zingchart.exec('myChart', 'heatmap.setdata', {
            graphid: g,
            data: aData[g]
          });
    
        }
      }, 15);
    });
    
    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
        });
      }
    });
    
    zingchart.loadModules('heatmap,color-scale,maps,maps-fra', function() {
    
      zingchart.render({
        id: 'myChart',
        width: '100%',
        height: '100%',
        output: 'canvas',
        data: cdata,
        modules: 'heatmap,color-scale'
      });
    
    });