<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>ZingSoft Demo</title> <script nonce="undefined" src="https://cdn.zingchart.com/zingchart.min.js"></script> <style></style> </head> <body> <div id='myChart'></div> <script> ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"]; zingchart.MODULESDIR = "http://cdn.zingchart.com/modules/"; zingchart.loadModules("maps,maps-world-countries"); var chartData = { "graphset": [{ "shapes": [{ "type": "zingchart.maps", "options": { "id": "map", "name": "world.countries", "width": 500, "height": 531, "x": "25%", "groups": ["AFRICA"], "graphid": 0, "style": { "items": { "DZA": { "tooltip": { "text": "This is a custom tooltip for Algeria", "background-color": "#00CC33" } }, "ZAF": { "tooltip": { "text": "This is a custom tooltip for South Africa", "background-color": "#cc3300", "color": "#FFFFFF" } } } } } }] }] } zingchart.render({ id: "myChart", data: chartData }); </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.MODULESDIR = "http://cdn.zingchart.com/modules/"; zingchart.loadModules("maps,maps-world-countries"); var chartData = { "graphset": [{ "shapes": [{ "type": "zingchart.maps", "options": { "id": "map", "name": "world.countries", "width": 500, "height": 531, "x": "25%", "groups": ["AFRICA"], "graphid": 0, "style": { "items": { "DZA": { "tooltip": { "text": "This is a custom tooltip for Algeria", "background-color": "#00CC33" } }, "ZAF": { "tooltip": { "text": "This is a custom tooltip for South Africa", "background-color": "#cc3300", "color": "#FFFFFF" } } } } } }] }] } zingchart.render({ id: "myChart", data: chartData });