ZingChart-AngularJS-Map
How do I make an zingchart-angularjs-map?
A ZingChart U.S map created with our AngularJs directive. . What is a zingchart-angularjs-map? How do you make a zingchart-angularjs-map? This script and codes were developed by ZingChart on 28 July 2022, Thursday.
ZingChart-AngularJS-Map - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>ZingChart-AngularJS-Map</title> <link rel='stylesheet prefetch' href='css/epvrnk.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <body ng-app="myApp"> <div ng-controller="MainController"> <div zingchart id="chart-1" zc-json="myJson" zc-width="100%" zc-height="100%"></div> </div>
</body> <script src='http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.14/angular.min.js'></script>
<script src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/374756/zingchart-2.1.4.min.js'></script>
<script src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/374756/zingchart-angularjs-1.0.4.js'></script> <script src="js/index.js"></script>
</body>
</html>
ZingChart-AngularJS-Map - Script Codes CSS Codes
html,body{ margin: 0px;
}
ZingChart-AngularJS-Map - Script Codes JS Codes
zingchart.MODULESDIR = 'https://cdn.zingchart.com/2.1.4/modules/';
zingchart.loadModules('maps,maps-world-countries,maps-usa');
var app = angular.module('myApp', ['zingchart-angularjs']);
app.controller('MainController', function($scope) { $scope.myJson = { gui: { contextMenu: { button: { visible: false } } }, globals: { shadow:false }, "background-color":"#FFF", shapes: [ { type: 'zingchart.maps', options: { name: 'usa', style: { label: { visible:false }, "background-color":"#7CA82B", "border-color":"#FFF", items: { "CA": { "background-color":"#C30" }, "VA": { "background-color":"#00BAF0" }, "TX": { "background-color":"#003849" }, "MT": { "background-color":"#333" }, "IL": { "background-color":"#F0F0F0" }, "FL": { "background-color":"#D9D9D9" } } } } } ] };
});
Developer | ZingChart |
Username | zingchart |
Uploaded | July 28, 2022 |
Rating | 3 |
Size | 2,330 Kb |
Views | 44,528 |
Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!
Name | Size |
Responsive Dashboard With Media Queries | 3,871 Kb |
Responsive Live Update Dashboard | 3,300 Kb |
Responsive Flexbox Dashboard | 4,159 Kb |
Fantasy Election Generator | 14,205 Kb |
ZingChart-AngularJS - Responsive | 2,637 Kb |
Flexbox Dashboard | 3,956 Kb |
ZingChart-AngularJS - Basic | 1,963 Kb |
ZingChart-AngularJS - Customizable | 2,871 Kb |
ZingChart-AngularJS - Updatable | 2,457 Kb |
Real-Time Feed Material Design | 2,668 Kb |
Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!
Name | Username | Size |
Web Spiral - p5.js | TWAIN | 2,183 Kb |
SVG Animation | Pollardld | 3,133 Kb |
Count up | Alanshortis | 2,391 Kb |
Svg penguin | _massimo | 2,990 Kb |
Animating characters with jQuery | 042 | 2,776 Kb |
CSS3 Button Examples | Volusion | 3,377 Kb |
Rows with image hover effect | Amit-webdesigner | 12,875 Kb |
Haml Calendar | Katydecorah | 5,643 Kb |
Mini Profile | Frytyler | 3,828 Kb |
Responsive Table-less Shopping Cart | Alex_rodrigues | 6,637 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!