• Edit
  • Download
  • <!DOCTYPE html>
    <html>
    
    <head>
        <meta charset="utf-8">
        <title>ZingSoft Demo</title>
    
        <script src="https://cdn.zingchart.com/zingchart.min.js"></script>
        <style>
            zing-grid[loading] {
                height: 800px;
            }
        </style>
    </head>
    
    <body>
        <div id='myChart'></div>
        <script>
            ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"];
            zingchart.loadModules('maps,maps-fra');
            zingchart.render({
                "id": 'myChart',
                "width": '100%',
                "height": 400,
                "data": {
                    "title": {
                        "text": "Patriotic France",
                        "align": "left",
                        "font-size": 14
                    },
                    "shapes": [{
                        "type": "zingchart.maps",
                        "options": {
                            "name": "fra",
                            "offsetY": 10,
                            "style": {
                                "controls": {
                                    "placement": "bl"
                                },
                                "background-color": '#EF3E36', // update bg color here,
                                "border-color": "#000",
                                "label": { // text displaying. Like valueBox
                                    "visible": true,
                                    "font-size": 8
                                },
                                "hover-state": {
                                    "visible": 1
                                },
                                "tooltip": {
                                    "gradient-colors": "#EF3E36 #FFFFFF #0055A5",
                                    "gradient-stops": ".1 .5 .75",
                                    "fill-angle": 180,
                                    "font-color": "#000",
                                    "font-size": 18,
                                    "border-width": 1,
                                    "border-color": "#000"
                                },
                                "group": 3,
                                "items": {
                                    "BR": {
                                        "background-color": "#0055A5",
                                        "group": 1
                                    },
                                    "NR": {
                                        "background-color": "#0055A5",
                                        "group": 1
                                    },
                                    "PD": {
                                        "background-color": "#0055A5",
                                        "group": 1
                                    },
                                    "PC": {
                                        "background-color": "#0055A5",
                                        "group": 1
                                    },
                                    "AQ": {
                                        "background-color": "#0055A5",
                                        "group": 1,
                                    },
                                    "HN": {
                                        "background-color": "#FFF",
                                        "group": 2
                                    },
                                    "CE": {
                                        "background-color": "#FFF",
                                        "group": 2
                                    },
                                    "LI": {
                                        "background-color": "#FFF",
                                        "group": 2
                                    },
                                    "MI": {
                                        "background-color": "#FFF",
                                        "group": 2
                                    },
                                    "NO": {
                                        "background-color": "#FFF",
                                        "group": 2
                                    },
                                    "PI": {
                                        "background-color": "#FFF",
                                        "group": 2
                                    },
                                    "LL": {
                                        "background-color": "#FFF",
                                        "group": 2
                                    },
                                    "CH": {
                                        "background-color": "#FFF",
                                        "group": 2
                                    },
                                    "BU": {
                                        "background-color": "#FFF",
                                        "group": 2
                                    },
                                    "AU": {
                                        "background-color": "#FFF",
                                        "group": 2
                                    },
                                    "LA": {
                                        "background-color": "#FFF",
                                        "group": 2
                                    },
                                }
                            }
                        }
                    }]
                }
            });
        </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>
    </head>
    	<body>
    		<div id='myChart'></div>
    	</body>
    </html>
    
          
    zingchart.loadModules('maps,maps-fra');
    zingchart.render({
      "id":'myChart',
      "width":'100%',
      "height":400,
      "data":{
        "title":{
          "text":"Patriotic France",
          "align":"left",
          "font-size":14
        },
        "shapes": [
          {
            "type": "zingchart.maps",
            "options":{
              "name": "fra",
              "offsetY":10,
              "style":{
                "controls":{"placement":"bl"},
                "background-color":'#EF3E36', // update bg color here,
                "border-color":"#000",
                "label":{ // text displaying. Like valueBox
                  "visible":true,
                  "font-size":8
                },
                "hover-state":{
                  "visible":1
                },
                "tooltip":{
                  "gradient-colors":"#EF3E36 #FFFFFF #0055A5",
                  "gradient-stops":".1 .5 .75",
                  "fill-angle":180,
                  "font-color":"#000",
                  "font-size":18,
                  "border-width":1,
                  "border-color":"#000"
                },
                "group": 3,
                "items":{
                  "BR":{
                    "background-color":"#0055A5",
                    "group": 1
                  },
                  "NR":{
                    "background-color":"#0055A5",
                    "group": 1
                  },
                  "PD":{
                    "background-color":"#0055A5",
                    "group": 1
                  },
                  "PC":{
                    "background-color":"#0055A5",
                    "group": 1
                  },
                  "AQ":{
                    "background-color":"#0055A5",
                    "group": 1,
                  },
                  "HN":{
                    "background-color":"#FFF",
                    "group": 2
                  },
                  "CE":{
                    "background-color":"#FFF",
                    "group": 2
                  },
                  "LI":{
                    "background-color":"#FFF",
                    "group": 2
                  },
                  "MI":{
                    "background-color":"#FFF",
                    "group": 2
                  },
                  "NO":{
                    "background-color":"#FFF",
                    "group": 2
                  },
                  "PI":{
                    "background-color":"#FFF",
                    "group": 2
                  },
                  "LL":{
                    "background-color":"#FFF",
                    "group": 2
                  },
                  "CH":{
                    "background-color":"#FFF",
                    "group": 2
                  },
                  "BU":{
                    "background-color":"#FFF",
                    "group": 2
                  },
                  "AU":{
                    "background-color":"#FFF",
                    "group": 2
                  },
                  "LA":{
                    "background-color":"#FFF",
                    "group": 2
                  },
                }
              }
            }
          }
        ]
      }
    });