• 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></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
                },
              }
            }
          }
        }]
      }
    });