• Edit
  • Download
    1. <!DOCTYPE html>
    2. <html>
    3.  
    4. <head>
    5.   <meta charset="utf-8">
    6.   <title>ZingSoft Demo</title>
    7.  
    8.   <script nonce="undefined" src="https://cdn.zingchart.com/zingchart.min.js"></script>
    9.   <style></style>
    10. </head>
    11.  
    12. <body>
    13.   <div id='myChart'></div>
    14.   <script>
    15.     ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"];
    16.     zingchart.loadModules('maps,maps-fra');
    17.     zingchart.render({
    18.       "id": 'myChart',
    19.       "width": '100%',
    20.       "height": 400,
    21.       "data": {
    22.         "title": {
    23.           "text": "Patriotic France",
    24.           "align": "left",
    25.           "font-size": 14
    26.         },
    27.         "shapes": [{
    28.           "type": "zingchart.maps",
    29.           "options": {
    30.             "name": "fra",
    31.             "offsetY": 10,
    32.             "style": {
    33.               "controls": {
    34.                 "placement": "bl"
    35.               },
    36.               "background-color": '#EF3E36', // update bg color here,
    37.               "border-color": "#000",
    38.               "label": { // text displaying. Like valueBox
    39.                 "visible": true,
    40.                 "font-size": 8
    41.               },
    42.               "hover-state": {
    43.                 "visible": 1
    44.               },
    45.               "tooltip": {
    46.                 "gradient-colors": "#EF3E36 #FFFFFF #0055A5",
    47.                 "gradient-stops": ".1 .5 .75",
    48.                 "fill-angle": 180,
    49.                 "font-color": "#000",
    50.                 "font-size": 18,
    51.                 "border-width": 1,
    52.                 "border-color": "#000"
    53.               },
    54.               "group": 3,
    55.               "items": {
    56.                 "BR": {
    57.                   "background-color": "#0055A5",
    58.                   "group": 1
    59.                 },
    60.                 "NR": {
    61.                   "background-color": "#0055A5",
    62.                   "group": 1
    63.                 },
    64.                 "PD": {
    65.                   "background-color": "#0055A5",
    66.                   "group": 1
    67.                 },
    68.                 "PC": {
    69.                   "background-color": "#0055A5",
    70.                   "group": 1
    71.                 },
    72.                 "AQ": {
    73.                   "background-color": "#0055A5",
    74.                   "group": 1,
    75.                 },
    76.                 "HN": {
    77.                   "background-color": "#FFF",
    78.                   "group": 2
    79.                 },
    80.                 "CE": {
    81.                   "background-color": "#FFF",
    82.                   "group": 2
    83.                 },
    84.                 "LI": {
    85.                   "background-color": "#FFF",
    86.                   "group": 2
    87.                 },
    88.                 "MI": {
    89.                   "background-color": "#FFF",
    90.                   "group": 2
    91.                 },
    92.                 "NO": {
    93.                   "background-color": "#FFF",
    94.                   "group": 2
    95.                 },
    96.                 "PI": {
    97.                   "background-color": "#FFF",
    98.                   "group": 2
    99.                 },
    100.                 "LL": {
    101.                   "background-color": "#FFF",
    102.                   "group": 2
    103.                 },
    104.                 "CH": {
    105.                   "background-color": "#FFF",
    106.                   "group": 2
    107.                 },
    108.                 "BU": {
    109.                   "background-color": "#FFF",
    110.                   "group": 2
    111.                 },
    112.                 "AU": {
    113.                   "background-color": "#FFF",
    114.                   "group": 2
    115.                 },
    116.                 "LA": {
    117.                   "background-color": "#FFF",
    118.                   "group": 2
    119.                 },
    120.               }
    121.             }
    122.           }
    123.         }]
    124.       }
    125.     });
    126.   </script>
    127. </body>
    128.  
    129. </html>
    1. <!DOCTYPE html>
    2. <html>
    3.  
    4. <head>
    5.   <meta charset="utf-8">
    6.   <title>ZingSoft Demo</title>
    7.  
    8.   <script src="https://cdn.zingchart.com/zingchart.min.js"></script>
    9. </head>
    10.  
    11. <body>
    12.   <div id='myChart'></div>
    13. </body>
    14.  
    15. </html>
    1.  
    1. zingchart.loadModules('maps,maps-fra');
    2. zingchart.render({
    3.   "id": 'myChart',
    4.   "width": '100%',
    5.   "height": 400,
    6.   "data": {
    7.     "title": {
    8.       "text": "Patriotic France",
    9.       "align": "left",
    10.       "font-size": 14
    11.     },
    12.     "shapes": [{
    13.       "type": "zingchart.maps",
    14.       "options": {
    15.         "name": "fra",
    16.         "offsetY": 10,
    17.         "style": {
    18.           "controls": {
    19.             "placement": "bl"
    20.           },
    21.           "background-color": '#EF3E36', // update bg color here,
    22.           "border-color": "#000",
    23.           "label": { // text displaying. Like valueBox
    24.             "visible": true,
    25.             "font-size": 8
    26.           },
    27.           "hover-state": {
    28.             "visible": 1
    29.           },
    30.           "tooltip": {
    31.             "gradient-colors": "#EF3E36 #FFFFFF #0055A5",
    32.             "gradient-stops": ".1 .5 .75",
    33.             "fill-angle": 180,
    34.             "font-color": "#000",
    35.             "font-size": 18,
    36.             "border-width": 1,
    37.             "border-color": "#000"
    38.           },
    39.           "group": 3,
    40.           "items": {
    41.             "BR": {
    42.               "background-color": "#0055A5",
    43.               "group": 1
    44.             },
    45.             "NR": {
    46.               "background-color": "#0055A5",
    47.               "group": 1
    48.             },
    49.             "PD": {
    50.               "background-color": "#0055A5",
    51.               "group": 1
    52.             },
    53.             "PC": {
    54.               "background-color": "#0055A5",
    55.               "group": 1
    56.             },
    57.             "AQ": {
    58.               "background-color": "#0055A5",
    59.               "group": 1,
    60.             },
    61.             "HN": {
    62.               "background-color": "#FFF",
    63.               "group": 2
    64.             },
    65.             "CE": {
    66.               "background-color": "#FFF",
    67.               "group": 2
    68.             },
    69.             "LI": {
    70.               "background-color": "#FFF",
    71.               "group": 2
    72.             },
    73.             "MI": {
    74.               "background-color": "#FFF",
    75.               "group": 2
    76.             },
    77.             "NO": {
    78.               "background-color": "#FFF",
    79.               "group": 2
    80.             },
    81.             "PI": {
    82.               "background-color": "#FFF",
    83.               "group": 2
    84.             },
    85.             "LL": {
    86.               "background-color": "#FFF",
    87.               "group": 2
    88.             },
    89.             "CH": {
    90.               "background-color": "#FFF",
    91.               "group": 2
    92.             },
    93.             "BU": {
    94.               "background-color": "#FFF",
    95.               "group": 2
    96.             },
    97.             "AU": {
    98.               "background-color": "#FFF",
    99.               "group": 2
    100.             },
    101.             "LA": {
    102.               "background-color": "#FFF",
    103.               "group": 2
    104.             },
    105.           }
    106.         }
    107.       }
    108.     }]
    109.   }
    110. });