• 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.       heatmap: {
    50.         tooltip: {
    51.           text: '~ %value people',
    52.           thousandsSeparator: '.',
    53.           decimals: 0
    54.         },
    55.         alpha: 1,
    56.         sortData: true,
    57.         async: true,
    58.         brushType: 'square',
    59.         size: 3,
    60.         blur: 1,
    61.       },
    62.       tooltip: {
    63.         padding: '5 10',
    64.         fontSize: '11px',
    65.         callout: true,
    66.         calloutWidth: '10px',
    67.         calloutHeight: '6px',
    68.         calloutPosition: 'bottom',
    69.       },
    70.       colorScale: {
    71.         aspect: 'gradient',
    72.         gradientStops: '0.0 0.4 0.6 0.7 0.8 1.0',
    73.         gradientColors: 'rgba(0,0,255,0) #0000ff #00ffff #bfff00 #ffff00 #ff0000',
    74.         backgroundColor: null,
    75.         alpha: 0.8,
    76.       },
    77.       shapes: [{
    78.         type: 'zingchart.maps',
    79.         options: {
    80.           id: 'mapmain',
    81.           name: 'fra',
    82.           scale: true,
    83.           zooming: false,
    84.           panning: false,
    85.           scrolling: false,
    86.           style: {
    87.             flat: true,
    88.             controls: {
    89.               visible: false,
    90.             },
    91.             borderAlpha: 0.1,
    92.             borderColor: '#fff',
    93.             label: {
    94.               overlap: false,
    95.               text: '%long-text',
    96.             },
    97.             hoverState: {
    98.               visible: false,
    99.               backgroundColor: 'none',
    100.               shadowAlpha: 0.2,
    101.               shadowDistance: 2,
    102.               shadow: true,
    103.               shadowColor: '#333',
    104.             },
    105.           },
    106.         },
    107.       }, ],
    108.     };
    109.  
    110.     zingchart.bind('myChart', 'load', function() {
    111.       paintHeatmap();
    112.     });
    113.  
    114.     window.paintHeatmap = function(iMax, bSmallBrush) {
    115.       let aData = [];
    116.       let iMaxPop = 0;
    117.       for (let i = 0; i < FR_POP_2010.length; i++) {
    118.         if (iMax && FR_POP_2010[i][2] > iMax) {
    119.           continue;
    120.         }
    121.         let fLon = FR_POP_2010[i][0],
    122.           fLat = FR_POP_2010[i][1],
    123.           iPop = FR_POP_2010[i][2];
    124.         let aXY = zingchart.maps.getXY('mapmain', [fLon, fLat]);
    125.         aData.push([aXY[0], aXY[1], iPop]);
    126.         iMaxPop = Math.max(iMaxPop, iPop);
    127.       }
    128.       zingchart.exec('myChart', 'colorscale.update', {
    129.         data: {
    130.           maxValue: iMaxPop,
    131.         },
    132.       });
    133.       let oCSInfo = zingchart.exec('myChart', 'colorscale.getinfo');
    134.       zingchart.exec('myChart', 'heatmap.setdata', {
    135.         minValue: 0,
    136.         maxValue: oCSInfo.max,
    137.         data: aData,
    138.         size: bSmallBrush ? 4 : 12,
    139.         blur: bSmallBrush ? 0 : 6,
    140.       });
    141.     };
    142.  
    143.     zingchart.bind('myChart', 'heatmap.mousemove', function(oInfo) {
    144.       if (oInfo.value !== null) {
    145.         zingchart.exec(oInfo.id, 'colorscale.setvalue', {
    146.           graphid: oInfo.graphid,
    147.           value: oInfo.value,
    148.         });
    149.       } else {
    150.         zingchart.exec(oInfo.id, 'colorscale.clear', {
    151.           graphid: oInfo.graphid,
    152.         });
    153.       }
    154.     });
    155.  
    156.     document.querySelector('#sc').addEventListener('click', function() {
    157.       if (this.checked) {
    158.         paintHeatmap(100000, true);
    159.         let maxpopRef = document.querySelector('#maxpop');
    160.         maxpopRef.value = 100000;
    161.         maxpopRef.removeAttribute('disabled');
    162.       } else {
    163.         paintHeatmap();
    164.         let maxpopRef = document.querySelector('#maxpop');
    165.         maxpopRef.setAttribute('disabled', 'disabled');
    166.       }
    167.     });
    168.  
    169.     document.querySelector('#maxpop').addEventListener('change', function() {
    170.       paintHeatmap(this.value, true);
    171.     });
    172.  
    173.     zingchart.loadModules('heatmap,color-scale,maps,maps-fra', function() {
    174.       zingchart.render({
    175.         id: 'myChart',
    176.         width: '600px',
    177.         height: '600px',
    178.         output: 'canvas',
    179.         data: chartConfig,
    180.         modules: 'heatmap,color-scale',
    181.       });
    182.     });
    183.   </script>
    184. </body>
    185.  
    186. </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.   heatmap: {
    6.     tooltip: {
    7.       text: '~ %value people',
    8.       thousandsSeparator: '.',
    9.       decimals: 0
    10.     },
    11.     alpha: 1,
    12.     sortData: true,
    13.     async: true,
    14.     brushType: 'square',
    15.     size: 3,
    16.     blur: 1,
    17.   },
    18.   tooltip: {
    19.     padding: '5 10',
    20.     fontSize: '11px',
    21.     callout: true,
    22.     calloutWidth: '10px',
    23.     calloutHeight: '6px',
    24.     calloutPosition: 'bottom',
    25.   },
    26.   colorScale: {
    27.     aspect: 'gradient',
    28.     gradientStops: '0.0 0.4 0.6 0.7 0.8 1.0',
    29.     gradientColors: 'rgba(0,0,255,0) #0000ff #00ffff #bfff00 #ffff00 #ff0000',
    30.     backgroundColor: null,
    31.     alpha: 0.8,
    32.   },
    33.   shapes: [{
    34.     type: 'zingchart.maps',
    35.     options: {
    36.       id: 'mapmain',
    37.       name: 'fra',
    38.       scale: true,
    39.       zooming: false,
    40.       panning: false,
    41.       scrolling: false,
    42.       style: {
    43.         flat: true,
    44.         controls: {
    45.           visible: false,
    46.         },
    47.         borderAlpha: 0.1,
    48.         borderColor: '#fff',
    49.         label: {
    50.           overlap: false,
    51.           text: '%long-text',
    52.         },
    53.         hoverState: {
    54.           visible: false,
    55.           backgroundColor: 'none',
    56.           shadowAlpha: 0.2,
    57.           shadowDistance: 2,
    58.           shadow: true,
    59.           shadowColor: '#333',
    60.         },
    61.       },
    62.     },
    63.   }, ],
    64. };
    65.  
    66. zingchart.bind('myChart', 'load', function() {
    67.   paintHeatmap();
    68. });
    69.  
    70. window.paintHeatmap = function(iMax, bSmallBrush) {
    71.   let aData = [];
    72.   let iMaxPop = 0;
    73.   for (let i = 0; i < FR_POP_2010.length; i++) {
    74.     if (iMax && FR_POP_2010[i][2] > iMax) {
    75.       continue;
    76.     }
    77.     let fLon = FR_POP_2010[i][0],
    78.       fLat = FR_POP_2010[i][1],
    79.       iPop = FR_POP_2010[i][2];
    80.     let aXY = zingchart.maps.getXY('mapmain', [fLon, fLat]);
    81.     aData.push([aXY[0], aXY[1], iPop]);
    82.     iMaxPop = Math.max(iMaxPop, iPop);
    83.   }
    84.   zingchart.exec('myChart', 'colorscale.update', {
    85.     data: {
    86.       maxValue: iMaxPop,
    87.     },
    88.   });
    89.   let oCSInfo = zingchart.exec('myChart', 'colorscale.getinfo');
    90.   zingchart.exec('myChart', 'heatmap.setdata', {
    91.     minValue: 0,
    92.     maxValue: oCSInfo.max,
    93.     data: aData,
    94.     size: bSmallBrush ? 4 : 12,
    95.     blur: bSmallBrush ? 0 : 6,
    96.   });
    97. };
    98.  
    99. zingchart.bind('myChart', 'heatmap.mousemove', function(oInfo) {
    100.   if (oInfo.value !== null) {
    101.     zingchart.exec(oInfo.id, 'colorscale.setvalue', {
    102.       graphid: oInfo.graphid,
    103.       value: oInfo.value,
    104.     });
    105.   } else {
    106.     zingchart.exec(oInfo.id, 'colorscale.clear', {
    107.       graphid: oInfo.graphid,
    108.     });
    109.   }
    110. });
    111.  
    112. document.querySelector('#sc').addEventListener('click', function() {
    113.   if (this.checked) {
    114.     paintHeatmap(100000, true);
    115.     let maxpopRef = document.querySelector('#maxpop');
    116.     maxpopRef.value = 100000;
    117.     maxpopRef.removeAttribute('disabled');
    118.   } else {
    119.     paintHeatmap();
    120.     let maxpopRef = document.querySelector('#maxpop');
    121.     maxpopRef.setAttribute('disabled', 'disabled');
    122.   }
    123. });
    124.  
    125. document.querySelector('#maxpop').addEventListener('change', function() {
    126.   paintHeatmap(this.value, true);
    127. });
    128.  
    129. zingchart.loadModules('heatmap,color-scale,maps,maps-fra', function() {
    130.   zingchart.render({
    131.     id: 'myChart',
    132.     width: '600px',
    133.     height: '600px',
    134.     output: 'canvas',
    135.     data: chartConfig,
    136.     modules: 'heatmap,color-scale',
    137.   });
    138. });