mirror of https://github.com/akveo/blur-admin
moris charts
alex
parent
d77f94d319
commit
6301316422
|
|
@ -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": {
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,10 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title></title>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
/**
|
||||
* Created by alex on 12/18/15.
|
||||
*/
|
||||
|
|
@ -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>
|
||||
|
|
@ -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'
|
||||
});
|
||||
}
|
||||
|
||||
})();
|
||||
|
|
@ -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];
|
||||
}
|
||||
|
||||
})();
|
||||
|
|
@ -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',
|
||||
|
|
|
|||
|
|
@ -31,6 +31,10 @@
|
|||
{
|
||||
title: 'Chartist',
|
||||
root: '#/charts/chartist'
|
||||
},
|
||||
{
|
||||
title: 'Morris',
|
||||
root: '#/charts/morris'
|
||||
}
|
||||
]
|
||||
},
|
||||
|
|
|
|||
|
|
@ -9,6 +9,7 @@
|
|||
'toastr',
|
||||
'chart.js',
|
||||
'angular-chartist',
|
||||
'angular.morris-chart',
|
||||
'BlurAdmin.theme.components'
|
||||
]);
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue