• Edit
  • Download
    1. <!doctype html>
    2. <html class="zc-html">
    3.  
    4. <head>
    5.   <meta charset="utf-8">
    6.   <title>ZingSoft Demo</title>
    7.   <script nonce="undefined" src="https://cdn.zingchart.com/zingchart.min.js"></script>
    8.   <style>
    9.     .zc-body {
    10.       background: #fff;
    11.     }
    12.  
    13.     .chart--container {
    14.       height: 100%;
    15.       width: 100%;
    16.       min-height: 530px;
    17.     }
    18.  
    19.     .zc-ref {
    20.       display: none;
    21.     }
    22.   </style>
    23. </head>
    24. ​
    25.  
    26. <body class="zc-body">
    27.   ​
    28.   <input id="sc" type="checkbox" /><label for="sc">Show only small cities</label> (up to <select id="maxpop" disabled="disabled">
    29.     <option value="100000">100.000</option>
    30.     <option value="50000">50.000</option>
    31.     <option value="10000">10.000</option>
    32.     <option value="5000">5.000</option>
    33.     <option value="1000">1.000</option>
    34.     <option value="500">500</option>
    35.   </select> people)
    36.  
    37.   <div id="myChart" class="chart--container">
    38.     <a href="https://www.zingchart.com/" rel="noopener" class="zc-ref">Powered by ZingChart</a>
    39.   </div>
    40.  
    41.   <script nonce="undefined" src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/374756/fr_pop_2010.js'></script>
    42.  
    43.   <script>
    44.     ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"];
    45.     let chartConfig = {
    46.       type: 'null',
    47.       backgroundColor: '#fff',
    48.       flat: true,
    49.       colorScale: {
    50.         alpha: 0.8,
    51.         aspect: 'gradient',
    52.         backgroundColor: null,
    53.         gradientStops: '0.0 0.4 0.6 0.7 0.8 1.0',
    54.         gradientColors: 'rgba(0,0,255,0) #0000ff #00ffff #bfff00 #ffff00 #ff0000',
    55.         cursor: {
    56.           type: 'gear3',
    57.           size: 10,
    58.           backgroundColor: 'red',
    59.  
    60.           topState: {
    61.             backgroundColor: 'blue',
    62.             offsetX: 10,
    63.             offsetY: 10,
    64.           }
    65.         },
    66.       },
    67.       heatmap: {
    68.         alpha: 1,
    69.         tooltip: {
    70.           decimals: 0,
    71.           thousandsSeparator: '.',
    72.           text: '~ %value people'
    73.         },
    74.         sortData: true,
    75.         async: true,
    76.         brushType: 'square',
    77.         size: 3,
    78.         blur: 1
    79.       },
    80.       tooltip: {
    81.         callout: true,
    82.         calloutPosition: 'bottom',
    83.         calloutWidth: 10,
    84.         calloutHeight: 6,
    85.         fontSize: 11,
    86.         padding: '5 10',
    87.       },
    88.       shapes: [{
    89.         type: 'zingchart.maps',
    90.         options: {
    91.           id: 'mapmain',
    92.           name: 'fra',
    93.           scale: true,
    94.           zooming: false,
    95.           panning: false,
    96.           scrolling: false,
    97.           style: {
    98.             flat: true,
    99.             controls: {
    100.               visible: false
    101.             },
    102.             borderAlpha: 0.1,
    103.             borderColor: '#fff',
    104.             label: {
    105.               overlap: false,
    106.               text: '%long-text'
    107.             },
    108.             hoverState: {
    109.               visible: false,
    110.               backgroundColor: 'none',
    111.               shadowAlpha: 0.2,
    112.               shadowDistance: 2,
    113.               shadow: true,
    114.               shadowColor: '#333'
    115.             }
    116.           }
    117.         }
    118.       }]
    119.     };
    120.  
    121.     zingchart.bind('myChart', 'load', function() {
    122.       paintHeatmap();
    123.     });
    124.  
    125.     window.paintHeatmap = function(iMax, bSmallBrush) {
    126.       var aData = [];
    127.       var iMaxPop = 0;
    128.       for (var i = 0; i < FR_POP_2010.length; i++) {
    129.         if (iMax && FR_POP_2010[i][2] > iMax) {
    130.           continue;
    131.         }
    132.         var fLon = FR_POP_2010[i][0],
    133.           fLat = FR_POP_2010[i][1],
    134.           iPop = FR_POP_2010[i][2];
    135.         var aXY = zingchart.maps.getXY('mapmain', [fLon, fLat]);
    136.         aData.push([aXY[0], aXY[1], iPop]);
    137.         iMaxPop = Math.max(iMaxPop, iPop);
    138.       }
    139.       zingchart.exec('myChart', 'colorscale.update', {
    140.         data: {
    141.           maxValue: iMaxPop
    142.         }
    143.       });
    144.       var oCSInfo = zingchart.exec('myChart', 'colorscale.getinfo');
    145.       zingchart.exec('myChart', 'heatmap.setdata', {
    146.         minValue: 0,
    147.         maxValue: oCSInfo.max,
    148.         data: aData,
    149.         size: bSmallBrush ? 4 : 12,
    150.         blur: bSmallBrush ? 0 : 6
    151.       });
    152.     }
    153.  
    154.     zingchart.bind('myChart', 'heatmap.mousemove', function(oInfo) {
    155.       if (oInfo.value !== null) {
    156.         zingchart.exec(oInfo.id, 'colorscale.setvalue', {
    157.           graphid: oInfo.graphid,
    158.           value: oInfo.value
    159.         });
    160.       } else {
    161.         zingchart.exec(oInfo.id, 'colorscale.clear', {
    162.           graphid: oInfo.graphid
    163.         });
    164.       }
    165.     });
    166.  
    167.     document.querySelector('#sc').addEventListener('click', function() {
    168.       if (this.checked) {
    169.         paintHeatmap(100000, true);
    170.         let maxpopRef = document.querySelector('#maxpop');
    171.         maxpopRef.value = 100000;
    172.         maxpopRef.removeAttribute('disabled')
    173.       } else {
    174.         paintHeatmap();
    175.         let maxpopRef = document.querySelector('#maxpop');
    176.         maxpopRef.setAttribute('disabled', 'disabled')
    177.       }
    178.     });
    179.  
    180.     document.querySelector('#maxpop').addEventListener('change', function() {
    181.       paintHeatmap(this.value, true);
    182.     });
    183.  
    184.     zingchart.loadModules('heatmap,color-scale,maps,maps-fra', function() {
    185.  
    186.       zingchart.render({
    187.         id: 'myChart',
    188.         width: '100%',
    189.         height: '100%',
    190.         output: 'canvas',
    191.         data: chartConfig,
    192.         modules: 'heatmap,color-scale'
    193.       });
    194.  
    195.     });
    196.   </script>
    197. </body>
    198.  
    199. </html>
    1. <!doctype html>
    2. <html class="zc-html">
    3.  
    4. <head>
    5.   <meta charset="utf-8">
    6.   <title>ZingSoft Demo</title>
    7.   <script src="https://cdn.zingchart.com/zingchart.min.js"></script>
    8. </head>
    9. ​
    10.  
    11. <body class="zc-body">
    12.   ​
    13.   <input id="sc" type="checkbox" /><label for="sc">Show only small cities</label> (up to <select id="maxpop" disabled="disabled">
    14.     <option value="100000">100.000</option>
    15.     <option value="50000">50.000</option>
    16.     <option value="10000">10.000</option>
    17.     <option value="5000">5.000</option>
    18.     <option value="1000">1.000</option>
    19.     <option value="500">500</option>
    20.   </select> people)
    21.  
    22.   <div id="myChart" class="chart--container">
    23.     <a href="https://www.zingchart.com/" rel="noopener" class="zc-ref">Powered by ZingChart</a>
    24.   </div>
    25.  
    26.   <script src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/374756/fr_pop_2010.js'></script>
    27.  
    28. </body>
    29.  
    30. </html>
    1. .zc-body {
    2.   background: #fff;
    3. }
    4.  
    5. .chart--container {
    6.   height: 100%;
    7.   width: 100%;
    8.   min-height: 530px;
    9. }
    10.  
    11. .zc-ref {
    12.   display: none;
    13. }
    1. let chartConfig = {
    2.   type: 'null',
    3.   backgroundColor: '#fff',
    4.   flat: true,
    5.   colorScale: {
    6.     alpha: 0.8,
    7.     aspect: 'gradient',
    8.     backgroundColor: null,
    9.     gradientStops: '0.0 0.4 0.6 0.7 0.8 1.0',
    10.     gradientColors: 'rgba(0,0,255,0) #0000ff #00ffff #bfff00 #ffff00 #ff0000',
    11.     cursor: {
    12.       type: 'gear3',
    13.       size: 10,
    14.       backgroundColor: 'red',
    15.  
    16.       topState: {
    17.         backgroundColor: 'blue',
    18.         offsetX: 10,
    19.         offsetY: 10,
    20.       }
    21.     },
    22.   },
    23.   heatmap: {
    24.     alpha: 1,
    25.     tooltip: {
    26.       decimals: 0,
    27.       thousandsSeparator: '.',
    28.       text: '~ %value people'
    29.     },
    30.     sortData: true,
    31.     async: true,
    32.     brushType: 'square',
    33.     size: 3,
    34.     blur: 1
    35.   },
    36.   tooltip: {
    37.     callout: true,
    38.     calloutPosition: 'bottom',
    39.     calloutWidth: 10,
    40.     calloutHeight: 6,
    41.     fontSize: 11,
    42.     padding: '5 10',
    43.   },
    44.   shapes: [{
    45.     type: 'zingchart.maps',
    46.     options: {
    47.       id: 'mapmain',
    48.       name: 'fra',
    49.       scale: true,
    50.       zooming: false,
    51.       panning: false,
    52.       scrolling: false,
    53.       style: {
    54.         flat: true,
    55.         controls: {
    56.           visible: false
    57.         },
    58.         borderAlpha: 0.1,
    59.         borderColor: '#fff',
    60.         label: {
    61.           overlap: false,
    62.           text: '%long-text'
    63.         },
    64.         hoverState: {
    65.           visible: false,
    66.           backgroundColor: 'none',
    67.           shadowAlpha: 0.2,
    68.           shadowDistance: 2,
    69.           shadow: true,
    70.           shadowColor: '#333'
    71.         }
    72.       }
    73.     }
    74.   }]
    75. };
    76.  
    77. zingchart.bind('myChart', 'load', function() {
    78.   paintHeatmap();
    79. });
    80.  
    81. window.paintHeatmap = function(iMax, bSmallBrush) {
    82.   var aData = [];
    83.   var iMaxPop = 0;
    84.   for (var i = 0; i < FR_POP_2010.length; i++) {
    85.     if (iMax && FR_POP_2010[i][2] > iMax) {
    86.       continue;
    87.     }
    88.     var fLon = FR_POP_2010[i][0],
    89.       fLat = FR_POP_2010[i][1],
    90.       iPop = FR_POP_2010[i][2];
    91.     var aXY = zingchart.maps.getXY('mapmain', [fLon, fLat]);
    92.     aData.push([aXY[0], aXY[1], iPop]);
    93.     iMaxPop = Math.max(iMaxPop, iPop);
    94.   }
    95.   zingchart.exec('myChart', 'colorscale.update', {
    96.     data: {
    97.       maxValue: iMaxPop
    98.     }
    99.   });
    100.   var oCSInfo = zingchart.exec('myChart', 'colorscale.getinfo');
    101.   zingchart.exec('myChart', 'heatmap.setdata', {
    102.     minValue: 0,
    103.     maxValue: oCSInfo.max,
    104.     data: aData,
    105.     size: bSmallBrush ? 4 : 12,
    106.     blur: bSmallBrush ? 0 : 6
    107.   });
    108. }
    109.  
    110. zingchart.bind('myChart', 'heatmap.mousemove', function(oInfo) {
    111.   if (oInfo.value !== null) {
    112.     zingchart.exec(oInfo.id, 'colorscale.setvalue', {
    113.       graphid: oInfo.graphid,
    114.       value: oInfo.value
    115.     });
    116.   } else {
    117.     zingchart.exec(oInfo.id, 'colorscale.clear', {
    118.       graphid: oInfo.graphid
    119.     });
    120.   }
    121. });
    122.  
    123. document.querySelector('#sc').addEventListener('click', function() {
    124.   if (this.checked) {
    125.     paintHeatmap(100000, true);
    126.     let maxpopRef = document.querySelector('#maxpop');
    127.     maxpopRef.value = 100000;
    128.     maxpopRef.removeAttribute('disabled')
    129.   } else {
    130.     paintHeatmap();
    131.     let maxpopRef = document.querySelector('#maxpop');
    132.     maxpopRef.setAttribute('disabled', 'disabled')
    133.   }
    134. });
    135.  
    136. document.querySelector('#maxpop').addEventListener('change', function() {
    137.   paintHeatmap(this.value, true);
    138. });
    139.  
    140. zingchart.loadModules('heatmap,color-scale,maps,maps-fra', function() {
    141.  
    142.   zingchart.render({
    143.     id: 'myChart',
    144.     width: '100%',
    145.     height: '100%',
    146.     output: 'canvas',
    147.     data: chartConfig,
    148.     modules: 'heatmap,color-scale'
    149.   });
    150.  
    151. });