• 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://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>
        <div id="zc"></div>
        <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('zc', '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('zc', 'heatmap.setdata', {
                            graphid: g,
                            data: aData[g]
                        });
    
                    }
                }, 15);
            });
    
            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
                    });
                }
            });
    
            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://s3-us-west-2.amazonaws.com/s.cdpn.io/374756/fr_pop_2010.js'></script>
        
      </head>
    	<body>
    		<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 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('zc', '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('zc', 'heatmap.setdata', {
                    graphid : g,
                    data : aData[g]
                });
    
            }
        }, 15);
    });
    
    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
            });
        }
    });
    
    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'
      });
      
    });