<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ZingSoft Demo</title>
<script nonce="undefined" src='https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.3/angular.min.js'></script>
<script nonce="undefined" src='https://rawgit.com/zingchart/ZingChart-AngularJS/master/src/zingchart-angularjs.js'></script>
<script nonce="undefined" src="https://cdn.zingchart.com/zingchart.min.js"></script>
<style></style>
</head>
<body ng-app="myApp">
<div ng-controller="MainController">
<zingchart id="chart-1" zc-json="myObj"></zingchart>
</div>
<script>
ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"];
var app = angular.module('myApp', ['zingchart-angularjs']);
app.controller('MainController', function($scope) {
$scope.myObj = {
"graphset": [{
"type": "treemap",
"plotarea": {
"margin": "0 0 30 0"
},
"tooltip": {
},
"options": {
},
"series": [{
"text": "North America",
"children": [{
"text": "United States",
"children": [{
"text": "Texas",
"value": 21
},
{
"text": "California",
"value": 53
},
{
"text": "Ohio",
"value": 12
},
{
"text": "New York",
"value": 46
},
{
"text": "Michigan",
"value": 39
},
{
"text": "Alabama",
"value": 25
}
]
},
{
"text": "Canada",
"value": 113
},
{
"text": "Mexico",
"value": 78
}
]
},
{
"text": "Europe",
"children": [{
"text": "France",
"value": 42
},
{
"text": "Spain",
"value": 28
},
{
"text": "Switzerland",
"value": 13
},
{
"text": "Germany",
"value": 56
},
{
"text": "Cyprus",
"value": 7
}
]
},
{
"text": "Africa",
"children": [{
"text": "Egypt",
"value": 22
},
{
"text": "Congo",
"value": 38
},
{
"text": "Lesotho",
"value": 9
}
]
},
{
"text": "Asia",
"children": [{
"text": "India",
"value": 92
},
{
"text": "China",
"value": 68
},
{
"text": "Mongolia",
"value": 25
}
]
},
{
"text": "South America",
"children": [{
"text": "Brazil",
"value": 42
},
{
"text": "Argentina",
"value": 28
},
{
"text": "Peru",
"value": 15
},
{
"text": "Uruguay",
"value": 33
}
]
},
{
"text": "Australia (continent)",
"children": [{
"text": "Australia (country)",
"value": 121
},
{
"text": "New Zealand",
"value": 24
}
]
}
]
}]
};
});
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ZingSoft Demo</title>
<script src='https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.3/angular.min.js'></script>
<script src='https://rawgit.com/zingchart/ZingChart-AngularJS/master/src/zingchart-angularjs.js'></script>
<script src="https://cdn.zingchart.com/zingchart.min.js"></script>
</head>
<body ng-app="myApp">
<div ng-controller="MainController">
<zingchart id="chart-1" zc-json="myObj"></zingchart>
</div>
</body>
</html>
var app = angular.module('myApp', ['zingchart-angularjs']);
app.controller('MainController', function($scope) {
$scope.myObj = {
"graphset": [{
"type": "treemap",
"plotarea": {
"margin": "0 0 30 0"
},
"tooltip": {
},
"options": {
},
"series": [{
"text": "North America",
"children": [{
"text": "United States",
"children": [{
"text": "Texas",
"value": 21
},
{
"text": "California",
"value": 53
},
{
"text": "Ohio",
"value": 12
},
{
"text": "New York",
"value": 46
},
{
"text": "Michigan",
"value": 39
},
{
"text": "Alabama",
"value": 25
}
]
},
{
"text": "Canada",
"value": 113
},
{
"text": "Mexico",
"value": 78
}
]
},
{
"text": "Europe",
"children": [{
"text": "France",
"value": 42
},
{
"text": "Spain",
"value": 28
},
{
"text": "Switzerland",
"value": 13
},
{
"text": "Germany",
"value": 56
},
{
"text": "Cyprus",
"value": 7
}
]
},
{
"text": "Africa",
"children": [{
"text": "Egypt",
"value": 22
},
{
"text": "Congo",
"value": 38
},
{
"text": "Lesotho",
"value": 9
}
]
},
{
"text": "Asia",
"children": [{
"text": "India",
"value": 92
},
{
"text": "China",
"value": 68
},
{
"text": "Mongolia",
"value": 25
}
]
},
{
"text": "South America",
"children": [{
"text": "Brazil",
"value": 42
},
{
"text": "Argentina",
"value": 28
},
{
"text": "Peru",
"value": 15
},
{
"text": "Uruguay",
"value": 33
}
]
},
{
"text": "Australia (continent)",
"children": [{
"text": "Australia (country)",
"value": 121
},
{
"text": "New Zealand",
"value": 24
}
]
}
]
}]
};
});