moris charts

pull/3/head
alex 2015-12-18 13:55:06 +03:00
parent d77f94d319
commit 6301316422
11 changed files with 139 additions and 2 deletions

View File

@ -45,7 +45,8 @@
"angular-progress-button-styles": "~0.1.0",
"angular-ui-router": "~0.2.15",
"angular-chart.js": "~0.8.8",
"angular-chartist.js": "~3.3.12"
"angular-chartist.js": "~3.3.12",
"angular-morris-chart": "~1.1.0"
},
"overrides": {
"amcharts": {

View File

@ -8,7 +8,8 @@
angular.module('BlurAdmin.pages.charts', [
'BlurAdmin.pages.charts.amCharts',
'BlurAdmin.pages.charts.chartJs',
'BlurAdmin.pages.charts.chartist'
'BlurAdmin.pages.charts.chartist',
'BlurAdmin.pages.charts.morris'
])
.config(routeConfig);

View File

@ -0,0 +1,10 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
</body>
</html>

View File

@ -0,0 +1,3 @@
/**
* Created by alex on 12/18/15.
*/

View File

@ -0,0 +1,80 @@
<section ng-controller="morrisCtrl">
<div class="row">
<div class="col-md-6 ">
<blur-panel title="Bar Chart" class-container="with-scroll ">
<div
bar-chart
bar-data='[
{ y: "2006", a: 100, b: 90 },
{ y: "2007", a: 75, b: 65 },
{ y: "2008", a: 50, b: 40 },
{ y: "2009", a: 75, b: 65 },
{ y: "2010", a: 50, b: 40 },
{ y: "2011", a: 75, b: 65 },
{ y: "2012", a: 100, b: 90 }
]'
bar-x='y'
bar-y='["a", "b"]'
bar-labels='["Series A", "Series B"]'
bar-colors='colors'>
</div>
</blur-panel>
</div>
<div class="col-md-6 ">
<blur-panel title="Donut" class-container="with-scroll ">
<div
donut-chart
donut-data='[
{label: "Download Sales", value: 12},
{label: "In-Store Sales",value: 30},
{label: "Mail-Order Sales", value: 20}
]'
donut-colors='colors'
donut-formatter='"currency"'>
</div>
</blur-panel>
</div>
</div>
<div class="row">
<div class="col-md-6 ">
<blur-panel title="Line Chart" class-container="with-scroll ">
<div
line-chart
line-data='[
{ y: "2006", a: 100, b: 90 },
{ y: "2007", a: 75, b: 65 },
{ y: "2008", a: 50, b: 40 },
{ y: "2009", a: 75, b: 65 },
{ y: "2010", a: 50, b: 40 },
{ y: "2011", a: 75, b: 65 },
{ y: "2012", a: 100, b: 90 }
]'
line-xkey='y'
line-ykeys='["a", "b"]'
line-labels='["Serie A", "Serie B"]'
line-colors='colors'>
</div>
</blur-panel>
</div>
<div class="col-md-6 ">
<blur-panel title="Area Chart" class-container="with-scroll ">
<div
area-chart
area-data='[
{ y: "2006", a: 100, b: 90 },
{ y: "2007", a: 75, b: 65 },
{ y: "2008", a: 50, b: 40 },
{ y: "2009", a: 75, b: 65 },
{ y: "2010", a: 50, b: 40 },
{ y: "2011", a: 75, b: 65 },
{ y: "2012", a: 100, b: 90 }
]'
area-xkey='y'
area-ykeys='["a", "b"]'
area-labels='["Serie A", "Serie B"]'
line-colors='colors'>
</div>
</blur-panel>
</div>
</div>
</section>

View File

@ -0,0 +1,20 @@
/**
* @author a.demeshko
* created on 12/18/15
*/
(function () {
'use strict';
angular.module('BlurAdmin.pages.charts.morris', [])
.config(routeConfig);
/** @ngInject */
function routeConfig($stateProvider) {
$stateProvider
.state('charts.morris', {
url: '/morris',
templateUrl: 'app/pages/charts/morris/morris.html'
});
}
})();

View File

@ -0,0 +1,16 @@
/**
* @author a.demeshko
* created on 12/16/15
*/
(function () {
'use strict';
angular.module('BlurAdmin.pages.charts.morris')
.controller('morrisCtrl', morrisCtrl);
/** @ngInject */
function morrisCtrl($scope,layoutColors) {
$scope.colors = [layoutColors.primary, layoutColors.danger, layoutColors.warning, layoutColors.success, layoutColors.default, layoutColors.primaryDark];
}
})();

View File

@ -22,6 +22,7 @@
'/charts/amCharts': 'amCharts',
'/charts/chartJs': 'Chart.js',
'/charts/chartist': 'Chartist.js',
'/charts/morris': 'Morris',
'/grid': 'Grid',
'/alerts': 'Alerts',
'/progressBars': 'Progress Bars',

View File

@ -31,6 +31,10 @@
{
title: 'Chartist',
root: '#/charts/chartist'
},
{
title: 'Morris',
root: '#/charts/morris'
}
]
},

View File

@ -9,6 +9,7 @@
'toastr',
'chart.js',
'angular-chartist',
'angular.morris-chart',
'BlurAdmin.theme.components'
]);