<!DOCTYPE html>
<html>
<head>
<title>radar Chart</title>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.3/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.4/Chart.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.4/Chart.min.js"></script>
<script src="script.js"></script>
<script src="angular-chart.min.js"></script>
<script src="angular-chart.css"></script>
</head>
<body ng-app="app">
<div ng-controller="RadarCtrl">
<canvas id="area" class="chart chart-radar" chart-data="data"
chart-series="series" chart-labels="labels" chart-options="options" chart-legend = "true"></canvas>
</div>
</body>
</html>
angular.module("app", ["chart.js"])
.config(['ChartJsProvider', function (ChartJsProvider) {
// Configure all charts
ChartJsProvider.setOptions({
chartColors: ['#FF5252', '#FF8A80', '#80b6ff', '#c980ff'],
responsive: true
});
}])
.controller("RadarCtrl", function($scope) {
$scope.labels = ["Eating", "Drinking", "Sleeping", "Designing", "Coding", "Cycling", "Running"];
$scope.options = { legend: { display: true } };
$scope.series = ["Series A", "Series B", "Series C", "Series D"];
$scope.data = [
[65, 59, 90, 81, 56, 55, 40],
[28, 48, 40, 19, 96, 27, 100],
[65, 96, 37, 28, 56, 30, 27],
[48, 28, 30, 59, 26, 37, 60]
];
/* $scope.datasets: [
{
label: "My First dataset",
backgroundColor: "rgba(179,181,198,0.2)",
borderColor: "rgba(179,181,198,1)",
pointBackgroundColor: "rgba(179,181,198,1)",
pointBorderColor: "#fff",
pointHoverBackgroundColor: "#fff",
pointHoverBorderColor: "rgba(179,181,198,1)",
data: [65, 59, 90, 81, 56, 55, 40]
},
{
label: "My Second dataset",
backgroundColor: "rgba(255,99,132,0.2)",
borderColor: "rgba(255,99,132,1)",
pointBackgroundColor: "rgba(255,99,132,1)",
pointBorderColor: "#fff",
pointHoverBackgroundColor: "#fff",
pointHoverBorderColor: "rgba(255,99,132,1)",
data: [28, 48, 40, 19, 96, 27, 100]
}
]*/
});
.chart-legend,
.bar-legend,
.line-legend,
.pie-legend,
.radar-legend,
.polararea-legend,
.doughnut-legend {
list-style-type: none;
margin-top: 5px;
text-align: center;
/* NOTE: Browsers automatically add 40px of padding-left to all lists, so we should offset that, otherwise the legend is off-center */
-webkit-padding-start: 0;
/* Webkit */
-moz-padding-start: 0;
/* Mozilla */
padding-left: 0;
/* IE (handles all cases, really, but we should also include the vendor-specific properties just to be safe) */
}
.chart-legend li,
.bar-legend li,
.line-legend li,
.pie-legend li,
.radar-legend li,
.polararea-legend li,
.doughnut-legend li {
display: inline-block;
white-space: nowrap;
position: relative;
margin-bottom: 4px;
border-radius: 5px;
padding: 2px 8px 2px 28px;
font-size: smaller;
cursor: default;
}
.chart-legend-icon,
.bar-legend-icon,
.line-legend-icon,
.pie-legend-icon,
.radar-legend-icon,
.polararea-legend-icon,
.doughnut-legend-icon {
display: block;
position: absolute;
left: 0;
top: 0;
width: 20px;
height: 20px;
border-radius: 5px;
}
!function(t){"use strict";if("object"==typeof exports)module.exports=t("undefined"!=typeof angular?angular:require("angular"),"undefined"!=typeof Chart?Chart:require("chart.js"));else if("function"==typeof define&&define.amd)define(["angular","chart"],t);else{if("undefined"==typeof angular||"undefined"==typeof Chart)throw new Error("Chart.js library needs to included, see http://jtblin.github.io/angular-chart.js/");t(angular,Chart)}}(function(t,r){"use strict";function e(){var e={},a={Chart:r,getOptions:function(r){var a=r&&e[r]||{};return t.extend({},e,a)}};this.setOptions=function(r,a){return a?void(e[r]=t.extend(e[r]||{},a)):(a=r,void(e=t.extend(e,a)))},this.$get=function(){return a}}function a(e,a){function o(t,r){return t&&r&&t.length&&r.length?Array.isArray(t[0])?t.length===r.length&&t.every(function(t,e){return t.length===r[e].length}):r.reduce(c,0)>0?t.length===r.length:!1:!1}function c(t,r){return t+r}function i(r,e,a,n){var o=null;return function(c){var i=e.getElementsAtEvent||e.getPointsAtEvent;if(i){var u=i.call(e,c);n!==!1&&t.equals(o,u)!==!1||(o=u,r[a](u,c))}}}function u(a,n){for(var o=t.copy(n.chartColors||e.getOptions(a).chartColors||r.defaults.global.colors),c=o.length<n.chartData.length;o.length<n.chartData.length;)o.push(n.chartGetColor());return c&&(n.chartColors=o),o.map(l)}function l(t){return"object"==typeof t&&null!==t?t:"string"==typeof t&&"#"===t[0]?s(g(t.substr(1))):h()}function h(){var t=[f(0,255),f(0,255),f(0,255)];return s(t)}function s(t){return{backgroundColor:d(t,.2),borderColor:d(t,1),pointBackgroundColor:d(t,1),pointBorderColor:"#fff",pointHoverBackgroundColor:"#fff",pointHoverBorderColor:d(t,.8)}}function f(t,r){return Math.floor(Math.random()*(r-t+1))+t}function d(t,r){return n?"rgb("+t.join(",")+")":"rgba("+t.concat(r).join(",")+")"}function g(t){var r=parseInt(t,16),e=r>>16&255,a=r>>8&255,n=255&r;return[e,a,n]}function p(r,e,a,n,o){return{labels:r,datasets:e.map(function(r,e){var c=t.extend({},n[e],{label:a[e],data:r});return o&&(c.yAxisID=o[e]),c})}}function C(t,r,e){return{labels:t,datasets:[{data:r,backgroundColor:e.map(function(t){return t.pointBackgroundColor}),hoverBackgroundColor:e.map(function(t){return t.backgroundColor})}]}}function v(t,r,e){Array.isArray(e.chartData[0])?t.data.datasets.forEach(function(t,e){t.data=r[e]}):t.data.datasets[0].data=r,t.update(),e.$emit("chart-update",t)}function y(t){return!t||Array.isArray(t)&&!t.length||"object"==typeof t&&!Object.keys(t).length}function b(a,n){var o=t.extend({},r.defaults.global,e.getOptions(a),n.chartOptions);return o.responsive}function m(t,r){t&&(t.destroy(),r.$emit("chart-destroy",t))}return function(r){return{restrict:"CA",scope:{chartGetColor:"=?",chartType:"=",chartData:"=?",chartLabels:"=?",chartOptions:"=?",chartSeries:"=?",chartColors:"=?",chartClick:"=?",chartHover:"=?",chartYAxes:"=?"},link:function(c,l){function s(e,a){if(!y(e)&&!t.equals(e,a)){var n=r||c.chartType;n&&f(n)}}function f(r){if(b(r,c)&&0===l[0].clientHeight)return a(function(){f(r)},50,!1);if(c.chartData&&c.chartData.length){c.chartGetColor="function"==typeof c.chartGetColor?c.chartGetColor:h;var n=u(r,c),o=l[0],s=o.getContext("2d"),g=Array.isArray(c.chartData[0])?p(c.chartLabels,c.chartData,c.chartSeries||[],n,c.chartYAxes):C(c.chartLabels,c.chartData,n),v=t.extend({},e.getOptions(r),c.chartOptions);m(d,c),d=new e.Chart(s,{type:r,data:g,options:v}),c.$emit("chart-create",d),o.onclick=c.chartClick?i(c,d,"chartClick",!1):t.noop,o.onmousemove=c.chartHover?i(c,d,"chartHover",!0):t.noop}}var d;n&&window.G_vmlCanvasManager.initElement(l[0]),c.$watch("chartData",function(t,e){if(!t||!t.length||Array.isArray(t[0])&&!t[0].length)return void m(d,c);var a=r||c.chartType;if(a)return d&&o(t,e)?v(d,t,c):void f(a)},!0),c.$watch("chartSeries",s,!0),c.$watch("chartLabels",s,!0),c.$watch("chartOptions",s,!0),c.$watch("chartColors",s,!0),c.$watch("chartType",function(r,e){y(r)||t.equals(r,e)||f(r)}),c.$on("$destroy",function(){m(d,c)})}}}}r.defaults.global.multiTooltipTemplate="<%if (datasetLabel){%><%=datasetLabel%>: <%}%><%= value %>",r.defaults.global.elements.line.borderWidth=2,r.defaults.global.elements.rectangle.borderWidth=2,r.defaults.global.legend.display=!1,r.defaults.global.colors=["#97BBCD","#DCDCDC","#F7464A","#46BFBD","#FDB45C","#949FB1","#4D5360"];var n="object"==typeof window.G_vmlCanvasManager&&null!==window.G_vmlCanvasManager&&"function"==typeof window.G_vmlCanvasManager.initElement;return n&&(r.defaults.global.animation=!1),t.module("chart.js",[]).provider("ChartJs",e).factory("ChartJsFactory",["ChartJs","$timeout",a]).directive("chartBase",["ChartJsFactory",function(t){return new t}]).directive("chartLine",["ChartJsFactory",function(t){return new t("line")}]).directive("chartBar",["ChartJsFactory",function(t){return new t("bar")}]).directive("chartRadar",["ChartJsFactory",function(t){return new t("radar")}]).directive("chartDoughnut",["ChartJsFactory",function(t){return new t("doughnut")}]).directive("chartPie",["ChartJsFactory",function(t){return new t("pie")}]).directive("chartPolarArea",["ChartJsFactory",function(t){return new t("polarArea")}])});
//# sourceMappingURL=angular-chart.min.js.map