• Edit
  • Download
    1. <!doctype html>
    2. <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. <body class="zc-body">
    26.   <div id="myChart">
    27.     <a href="https://www.zingchart.com/" rel="noopener" class="zc-ref">Powered by ZingChart</a>
    28.   </div>
    29.   <script>
    30.     ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"];
    31.     // INIT
    32.     // -----------------------------
    33.     // Define Module Location
    34.     zingchart.MODULESDIR = "https://cdn.zingchart.com/modules/";
    35.     // Load Maps
    36.     zingchart.loadModules('maps, maps-fraL2, color-scale', init);
    37.  
    38.     function init() {
    39.       let items = zingchart.maps.getItems('fraL2');
    40.  
    41.       // For each department, create fake data with percentages for each party
    42.       let scores = {
    43.         REM: {},
    44.         LR: {},
    45.         PS: {}
    46.       }
    47.       // Fill w/ data
    48.       for (let i = 0; i < items.length; i++) {
    49.         let base = 35000;
    50.         let above90 = rand(0, 100) > 90;
    51.         let lenCheck = i % (Math.round(items.length / 4)) === 0;
    52.         if (above90 || lenCheck) base = 25000;
    53.         let pp1 = parseFloat((rand(base, 45000) / 1000).toFixed(3));
    54.         let pp2 = parseFloat((rand(base, 45000) / 1000).toFixed(3));
    55.         let pp3 = parseFloat((100 - pp1 - pp2).toFixed(3));
    56.         scores['REM'][items[i]] = pp1;
    57.         scores['LR'][items[i]] = pp2;
    58.         scores['PS'][items[i]] = pp3;
    59.       }
    60.  
    61.       // Main chart config
    62.       let gmain = {
    63.         type: 'null',
    64.         title: {
    65.           fontSize: '13px',
    66.           text: 'Choropleth Demo'
    67.         },
    68.         shapes: [{
    69.           type: 'zingchart.maps',
    70.           options: {
    71.             name: 'fraL2',
    72.             scale: true,
    73.             zooming: false,
    74.             panning: false,
    75.             scrolling: false,
    76.             choropleth: {
    77.               aspect: 'gradient',
    78.               steps: [0, 1, 2, 3],
    79.               effect: 'darken',
    80.             },
    81.             style: {
    82.               borderAlpha: 0.1,
    83.               borderColor: '#fff',
    84.               controls: {
    85.                 visible: false
    86.               },
    87.               label: {
    88.                 visible: false
    89.               },
    90.               items: {}
    91.             }
    92.           }
    93.         }]
    94.       };
    95.  
    96.       for (let i = 0; i < items.length; i++) {
    97.         let fVal = 0,
    98.           sPreview = '';
    99.  
    100.         let aPreview = [];
    101.         aPreview.push(['REM', scores['REM'][items[i]]]);
    102.         aPreview.push(['LR', scores['LR'][items[i]]]);
    103.         aPreview.push(['PS', scores['PS'][items[i]]]);
    104.         aPreview.sort(function(a, b) {
    105.           return b[1] - a[1];
    106.         });
    107.  
    108.         if (scores['REM'][items[i]] > scores['LR'][items[i]] && scores['REM'][items[i]] > scores['PS'][items[i]]) {
    109.           fVal = 0.5;
    110.         }
    111.         if (scores['LR'][items[i]] > scores['REM'][items[i]] && scores['LR'][items[i]] > scores['PS'][items[i]]) {
    112.           fVal = 1.5;
    113.         }
    114.         if (scores['PS'][items[i]] > scores['REM'][items[i]] && scores['PS'][items[i]] > scores['LR'][items[i]]) {
    115.           fVal = 2.5;
    116.         }
    117.         gmain.shapes[0].options.style.items[items[i]] = {
    118.           dataValue: fVal,
    119.           dataPreview: sPreview
    120.         };
    121.       }
    122.  
    123.  
    124.  
    125.       // CHART CONFIG
    126.       // -----------------------------
    127.       let cdata = {
    128.         backgroundColor: '#fff',
    129.         borderColor: '#ddd',
    130.         borderWidth: '2px',
    131.         graphset: [gmain]
    132.       };
    133.  
    134.  
    135.       // RENDER CHARTS
    136.       // -----------------------------
    137.       zingchart.render({
    138.         id: 'myChart',
    139.         width: 600,
    140.         height: 600,
    141.         output: 'svg',
    142.         data: cdata,
    143.         modules: 'color-scale'
    144.       });
    145.     }
    146.  
    147.  
    148.     // HELPER FNS
    149.     // -----------------------------
    150.  
    151.     function createBar(score, color) {
    152.       let sBar = "<span style='font-weight:bold;color:" + color + "'>";
    153.       for (let b = 0; b < Math.round(score / 4); b++) {
    154.         sBar += '\u2588';
    155.       }
    156.       sBar += '</span>';
    157.       return sBar;
    158.     }
    159.  
    160.     function rand(min, max) {
    161.       return Math.round(min + (max - min) * Math.random());
    162.     };
    163.   </script>
    164. </body>
    165.  
    166. </html>
    1. <!doctype html>
    2. <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. <body class="zc-body">
    11.   <div id="myChart">
    12.     <a href="https://www.zingchart.com/" rel="noopener" class="zc-ref">Powered by ZingChart</a>
    13.   </div>
    14. </body>
    15.  
    16. </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. // INIT
    2. // -----------------------------
    3. // Define Module Location
    4. zingchart.MODULESDIR = "https://cdn.zingchart.com/modules/";
    5. // Load Maps
    6. zingchart.loadModules('maps, maps-fraL2, color-scale', init);
    7.  
    8. function init() {
    9.   let items = zingchart.maps.getItems('fraL2');
    10.  
    11.   // For each department, create fake data with percentages for each party
    12.   let scores = {
    13.     REM: {},
    14.     LR: {},
    15.     PS: {}
    16.   }
    17.   // Fill w/ data
    18.   for (let i = 0; i < items.length; i++) {
    19.     let base = 35000;
    20.     let above90 = rand(0, 100) > 90;
    21.     let lenCheck = i % (Math.round(items.length / 4)) === 0;
    22.     if (above90 || lenCheck) base = 25000;
    23.     let pp1 = parseFloat((rand(base, 45000) / 1000).toFixed(3));
    24.     let pp2 = parseFloat((rand(base, 45000) / 1000).toFixed(3));
    25.     let pp3 = parseFloat((100 - pp1 - pp2).toFixed(3));
    26.     scores['REM'][items[i]] = pp1;
    27.     scores['LR'][items[i]] = pp2;
    28.     scores['PS'][items[i]] = pp3;
    29.   }
    30.  
    31.   // Main chart config
    32.   let gmain = {
    33.     type: 'null',
    34.     title: {
    35.       fontSize: '13px',
    36.       text: 'Choropleth Demo'
    37.     },
    38.     shapes: [{
    39.       type: 'zingchart.maps',
    40.       options: {
    41.         name: 'fraL2',
    42.         scale: true,
    43.         zooming: false,
    44.         panning: false,
    45.         scrolling: false,
    46.         choropleth: {
    47.           aspect: 'gradient',
    48.           steps: [0, 1, 2, 3],
    49.           effect: 'darken',
    50.         },
    51.         style: {
    52.           borderAlpha: 0.1,
    53.           borderColor: '#fff',
    54.           controls: {
    55.             visible: false
    56.           },
    57.           label: {
    58.             visible: false
    59.           },
    60.           items: {}
    61.         }
    62.       }
    63.     }]
    64.   };
    65.  
    66.   for (let i = 0; i < items.length; i++) {
    67.     let fVal = 0,
    68.       sPreview = '';
    69.  
    70.     let aPreview = [];
    71.     aPreview.push(['REM', scores['REM'][items[i]]]);
    72.     aPreview.push(['LR', scores['LR'][items[i]]]);
    73.     aPreview.push(['PS', scores['PS'][items[i]]]);
    74.     aPreview.sort(function(a, b) {
    75.       return b[1] - a[1];
    76.     });
    77.  
    78.     if (scores['REM'][items[i]] > scores['LR'][items[i]] && scores['REM'][items[i]] > scores['PS'][items[i]]) {
    79.       fVal = 0.5;
    80.     }
    81.     if (scores['LR'][items[i]] > scores['REM'][items[i]] && scores['LR'][items[i]] > scores['PS'][items[i]]) {
    82.       fVal = 1.5;
    83.     }
    84.     if (scores['PS'][items[i]] > scores['REM'][items[i]] && scores['PS'][items[i]] > scores['LR'][items[i]]) {
    85.       fVal = 2.5;
    86.     }
    87.     gmain.shapes[0].options.style.items[items[i]] = {
    88.       dataValue: fVal,
    89.       dataPreview: sPreview
    90.     };
    91.   }
    92.  
    93.  
    94.  
    95.   // CHART CONFIG
    96.   // -----------------------------
    97.   let cdata = {
    98.     backgroundColor: '#fff',
    99.     borderColor: '#ddd',
    100.     borderWidth: '2px',
    101.     graphset: [gmain]
    102.   };
    103.  
    104.  
    105.   // RENDER CHARTS
    106.   // -----------------------------
    107.   zingchart.render({
    108.     id: 'myChart',
    109.     width: 600,
    110.     height: 600,
    111.     output: 'svg',
    112.     data: cdata,
    113.     modules: 'color-scale'
    114.   });
    115. }
    116.  
    117.  
    118. // HELPER FNS
    119. // -----------------------------
    120.  
    121. function createBar(score, color) {
    122.   let sBar = "<span style='font-weight:bold;color:" + color + "'>";
    123.   for (let b = 0; b < Math.round(score / 4); b++) {
    124.     sBar += '\u2588';
    125.   }
    126.   sBar += '</span>';
    127.   return sBar;
    128. }
    129.  
    130. function rand(min, max) {
    131.   return Math.round(min + (max - min) * Math.random());
    132. };