-
-
+
+
+
+
+
+
+
+
+
+ Apache Zeppelin GSOC15
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
-
+
+
\ No newline at end of file
diff --git a/app/scripts/app.js b/app/scripts/app.js
index 780ec2e..2c1d9ea 100644
--- a/app/scripts/app.js
+++ b/app/scripts/app.js
@@ -13,7 +13,7 @@ angular
.module('apacheZeppelinGsocApp', [
'ngResource',
'ngRoute',
- 'googlechart',
+ 'googlechart',
'highcharts-ng',
'nvd3'
])
@@ -22,19 +22,11 @@ angular
.when('/home', {
templateUrl: 'views/about.html'
})
- .when('/chart', {
- templateUrl: 'views/chart.html',
- controller: 'ChartCtrl'
- })
.when('/milestone01', {
templateUrl: 'views/milestone01.html',
- controller: 'ChartCtrl'
- })
- .when('/about', {
- templateUrl: 'views/about.html',
- controller: 'AboutCtrl'
+ controller:'ChartCtrl'
})
- .when('/contact', {
+ .when('/contact', {
templateUrl: 'views/contact.html'
})
.when('/', {
diff --git a/app/scripts/chart-factory/google-chart-factory.js b/app/scripts/chart-factory/google-chart-factory.js
index 280533c..d3347a6 100644
--- a/app/scripts/chart-factory/google-chart-factory.js
+++ b/app/scripts/chart-factory/google-chart-factory.js
@@ -1,5 +1,4 @@
'use strict';
-
/**
* @ngdoc function
* @name apacheZeppelinGsocApp.GoogleChartFactory
@@ -7,70 +6,51 @@
* # Extending Gobal Chart Factory for Google Chart Model
*
*/
-
-angular.module('apacheZeppelinGsocApp').factory('GoogleChartFactory', function(ChartFactory) {
-
-
- var ChartList = {'Bar':'BarChart','Line':'LineChart'};
+angular.module('apacheZeppelinGsocApp').factory('GoogleChartFactory', function(
+ ChartFactory) {
+ var ChartList = {
+ 'Bar': 'BarChart',
+ 'Line': 'LineChart'
+ };
//googleChart model (sample chart data model)
//TO-DO Sample Data will remove after model set.
var GoogelChartChartModel = {
type: 'BarChart',
- cssStyle : 'height:400px; width:600px;',
- data : {
- 'cols': [{
- id: 'pizza',
- label: 'Pizza',
- type: 'string'
-}, {
- id: 'populartiy',
- label: 'Populartiy',
- type: 'number'
-}
-
- ],
- 'rows': [{
-c: [{
- v: 'Pepperoni'
-}, {
- v: 14
-}]
- }, {
-c: [{
- v: 'Mushroom'
-}, {
- v: 6
-}]
- }, {
-c: [{
- v: 'Hawaiian'
-}, {
- v: 5
-}]
- }, {
-c: [{
- v: 'Sausage'
-}, {
- v: 10
-}]
- }]
-},
- options : {
- 'isStacked': 'true',
- 'fill': 20,
- 'height': 300,
- 'displayExactValues': true,
- 'vAxis': {
- 'gridlines': {
- 'count': 6
-}
+ cssStyle: 'height:400px; width:500px;',
+ data: {
+ 'cols': [{
+ id: 'pizza',
+ label: 'Pizza',
+ type: 'string'
+ }, {
+ id: 'populartiy',
+ label: 'Populartiy',
+ type: 'number'
+ }],
+ 'rows': [{
+ c: [{
+ v: 'Pepperoni'
+ }, {
+ v: 14
+ }]
+ }]
},
- 'hAxis': {
+ options: {
+ 'isStacked': 'true',
+ 'fill': 20,
+ 'height': 300,
+ 'displayExactValues': true,
+ 'vAxis': {
+ 'gridlines': {
+ 'count': 6
+ }
+ },
+ 'hAxis': {
'title': 'hAxis title'
- }
-},
-formatters : {}
-};
+ }
+ },
+ formatters: {}
+ };
function googleChartModel(d) {
return {
@@ -85,30 +65,22 @@ formatters : {}
function getGoogleChart(error, rows) {
GoogelChartChartModel.data.rows = rows;
}
-
var googlexChart = {
model: googleChartModel,
get: getGoogleChart
};
- function setChatTypeView(chartType){
+ function setChartTypeView(chartType) {
GoogleChartFactory.viewModel.type = ChartList[chartType];
}
-
//google chart
var GoogleChartFactory = new ChartFactory('googleChart', googlexChart);
GoogleChartFactory.viewModel = GoogelChartChartModel;
-
-
GoogleChartFactory.setChartType = function(chartType) {
- GoogleChartFactory.type = chartType;
- setChatTypeView(chartType);
- };
-
+ GoogleChartFactory.type = chartType;
+ setChartTypeView(chartType);
+ };
// define a new internal private method for this chart object
- function setChartAxis() {
- }
-
+ function setChartAxis() {}
return GoogleChartFactory;
-
});
\ No newline at end of file
diff --git a/app/scripts/chart-factory/high-chart-factory.js b/app/scripts/chart-factory/high-chart-factory.js
index 79dcc7f..8d59daf 100644
--- a/app/scripts/chart-factory/high-chart-factory.js
+++ b/app/scripts/chart-factory/high-chart-factory.js
@@ -1,5 +1,4 @@
'use strict';
-
/**
* @ngdoc function
* @name apacheZeppelinGsocApp.HighChartFactory
@@ -7,11 +6,12 @@
* # Extending Gobal Chart Factory for High Chart Model
*
*/
-
-angular.module('apacheZeppelinGsocApp').factory('HighChartFactory', function(ChartFactory) {
-
-
- var ChartList = {'Bar':'bar','Line':'line'};
+angular.module('apacheZeppelinGsocApp').factory('HighChartFactory', function(
+ ChartFactory) {
+ var ChartList = {
+ 'Bar': 'bar',
+ 'Line': 'line'
+ };
//highChart model
var HighChartChartModel = {
options: {
@@ -31,41 +31,52 @@ angular.module('apacheZeppelinGsocApp').factory('HighChartFactory', function(Cha
},
loading: false
};
-
//high chart
// define a new internal private method for this chart object
function highChartModel(d) {
return +d.Length;
}
-
function getHighChart(error, rows) {
+ console.log('loading for view');
+ console.log(rows);
HighChartChartModel.series[0].data = rows;
}
- function setChatTypeView(chartType) {
+ function setChartTypeView(chartType) {
HighChartFactory.viewModel.options.chart.type = ChartList[chartType];
}
function setChartAxis() {}
-
var highxChart = {
model: highChartModel,
get: getHighChart
};
-
//setting up the highchart and chart view model for this chart
var HighChartFactory = new ChartFactory('highxChart', highxChart);
+ HighChartChartModel.series[0].data = null;
HighChartFactory.viewModel = HighChartChartModel;
-
-
HighChartFactory.setChartType = function(chartType) {
HighChartFactory.type = chartType;
- setChatTypeView(chartType);
+ setChartTypeView(chartType);
+ };
+ HighChartFactory.setChartAxis = function(data) {
+ loadYAxisLabel(data);
};
+ var highAxisLabels = {};
+ function getHighYaxis(error, rows) {
+ console.log(rows);
+ highAxisLabels = rows;
+ HighChartFactory.viewModel.xAxis.categories = highAxisLabels;
+ }
+ function highYaxisModel(d) {
+ return d.Make;
+ }
+ function loadYAxisLabel(fileName) {
+ highAxisLabels = d3.csv(fileName).row(highYaxisModel).get(getHighYaxis);
+ }
return HighChartFactory;
-
});
\ No newline at end of file
diff --git a/app/scripts/chart-factory/nvd3-chart-factory.js b/app/scripts/chart-factory/nvd3-chart-factory.js
index 1409185..0454e92 100644
--- a/app/scripts/chart-factory/nvd3-chart-factory.js
+++ b/app/scripts/chart-factory/nvd3-chart-factory.js
@@ -1,5 +1,4 @@
'use strict';
-
/**
* @ngdoc function
* @name apacheZeppelinGsocApp.NVD3ChartFactory
@@ -7,22 +6,25 @@
* # Extending Gobal Chart Factory for NVD3 Chart Model
*
*/
-
-angular.module('apacheZeppelinGsocApp').factory('NVD3ChartFactory', function(ChartFactory) {
-
- var ChartList = {'Bar':'discreteBarChart','Line':'lineChart'};
- ////TO-DO Sample Data will remove after model set.
+angular.module('apacheZeppelinGsocApp').factory('NVD3ChartFactory', function(
+ ChartFactory) {
+ var ChartList = {
+ 'Bar': 'discreteBarChart',
+ 'Line': 'lineChart'
+ };
+ //NVD3 Chart model
var NVD3ChartChartModel = {
options: {
chart: {
type: 'discreteBarChart',
height: 300,
- width: 400,
+ width: 500,
+ showLegend: true,
margin: {
top: 20,
right: 20,
- bottom: 60,
- left: 55
+ bottom: 20,
+ left: 20
},
x: function(d) {
return d.valuex;
@@ -41,30 +43,15 @@ angular.module('apacheZeppelinGsocApp').factory('NVD3ChartFactory', function(Cha
}
}
},
- data: [{
-
- values: [{
- 'label': 'A',
- 'value': 5,
- 'valuex': 0
- }, {
- 'label': 'B',
- 'value': 10,
- 'valuex': 1
- }, {
- 'label': 'C',
- 'value': 24,
- 'valuex': 2
- }, {
- 'label': 'D',
- 'value': 8,
- 'valuex': 3
- }]
- }]
+ data: []
};
function getNVD3(error, rows) {
- NVD3ChartChartModel.data[0].values = rows;
+ var data = {
+ 'values': rows
+ };
+ NVD3ChartChartModel.data[0] = data;
+ console.log(NVD3ChartChartModel.data);
}
function nvd3Model(d) {
@@ -75,29 +62,43 @@ angular.module('apacheZeppelinGsocApp').factory('NVD3ChartFactory', function(Cha
};
}
- function setChatTypeView(chartType) {
+ function setChartTypeView(chartType) {
NVD3ChartFactory.viewModel.options.chart.type = ChartList[chartType];
}
-
var NVD3Chart = {
model: nvd3Model,
get: getNVD3
};
-
//nvd3 chart
var NVD3ChartFactory = new ChartFactory('NVD3Chart', NVD3Chart);
NVD3ChartFactory.viewModel = NVD3ChartChartModel;
-
-
NVD3ChartFactory.setChartType = function(chartType) {
NVD3ChartFactory.type = chartType;
- setChatTypeView(chartType);
+ setChartTypeView(chartType);
};
+ NVD3ChartFactory.setChartAxis = function(data) {
+ loadYAxisLabel(data);
+ };
+ // define a new internal private method for this chart object
+ var nvd3AxisLabels = {};
+ function getNVD3Yaxis(error, rows) {
+ console.log(rows);
+ nvd3AxisLabels = rows;
+ NVD3ChartFactory.viewModel.options.chart.xAxis = {
+ 'axisLabel': 'Make',
+ 'tickFormat': function(d) {
+ return nvd3AxisLabels[d];
+ }
+ };
+ }
- // define a new internal private method for this chart object
- function setChartAxis() {}
+ function nvd3YaxisModel(d) {
+ return d.Make;
+ }
+ function loadYAxisLabel(fileName) {
+ nvd3AxisLabels = d3.csv(fileName).row(nvd3YaxisModel).get(getNVD3Yaxis);
+ }
return NVD3ChartFactory;
-
});
\ No newline at end of file
diff --git a/app/scripts/config/chart-config.js b/app/scripts/config/chart-config.js
new file mode 100644
index 0000000..22c5b5a
--- /dev/null
+++ b/app/scripts/config/chart-config.js
@@ -0,0 +1,24 @@
+'use strict';
+/**
+ * @ngdoc function
+ * @name apacheZeppelinGsocApp.configure
+ * @description
+ * # configures will contains the configuration details for charting library
+ *
+ * @author madhuka udantha
+ */
+angular.module('apacheZeppelinGsocApp')
+ .constant('chartConfig', {
+ 'libraryName': [{
+ 'library': 'highChart',
+ 'template': 'views/charts/highchart.html'
+ }, {
+ 'library': 'NVD3Chart',
+ 'template': 'views/charts/nvd3chart.html'
+ }, {
+ 'library': 'googleChart',
+ 'template': 'views/charts/googlechart.html'
+ }],
+ 'dataFiles': ['car', 'bike'],
+ 'chartTypes': ['Line', 'Bar']
+ });
\ No newline at end of file
diff --git a/app/scripts/controllers/about.js b/app/scripts/controllers/about.js
deleted file mode 100755
index ddfdcbe..0000000
--- a/app/scripts/controllers/about.js
+++ /dev/null
@@ -1,17 +0,0 @@
-'use strict';
-
-/**
- * @ngdoc function
- * @name apacheZeppelinGsocApp.controller:AboutCtrl
- * @description
- * # AboutCtrl
- * Controller of the apacheZeppelinGsocApp
- */
-angular.module('apacheZeppelinGsocApp')
- .controller('AboutCtrl', function ($scope) {
- $scope.awesomeThings = [
- 'HTML5 Boilerplate',
- 'AngularJS',
- 'Karma'
- ];
- });
diff --git a/app/scripts/controllers/chart-controllers.js b/app/scripts/controllers/chart-controllers.js
index b488e77..1a7d0a8 100644
--- a/app/scripts/controllers/chart-controllers.js
+++ b/app/scripts/controllers/chart-controllers.js
@@ -1,34 +1,25 @@
'use strict';
-
/**
* @ngdoc function
* @name apacheZeppelinGsocApp.controller:ChartCtrl
* @description
* # ChartCtrl
- * Controller of the top navigation, mainly use for the dropdown menu
+ * Controller of chart library, type.
*
* @author madhuka udantha
*/
-
-angular.module('apacheZeppelinGsocApp').controller('ChartCtrl', function($scope, ChartFactory, GoogleChartFactory, HighChartFactory, NVD3ChartFactory, ChartService, ChartMetaService) {
-
+angular.module('apacheZeppelinGsocApp').controller('ChartCtrl', function($scope,
+ ChartFactory, GoogleChartFactory, HighChartFactory, NVD3ChartFactory,
+ ChartService, ChartMetaService, chartConfig) {
var vm = this;
- var myChart = {};
-
- var libraryName = [{
- 'library': 'NVD3Chart'
- }, {
- 'library': 'highChart'
- }, {
- 'library': 'googleChart'
- }];
-
- //var chartTypes = ['Line', 'Bar'];
+ //loading from chart config file.
+ var libraryName = chartConfig.libraryName;
+ var files = chartConfig.dataFiles;
+ var chartTypes = chartConfig.chartTypes;
function renderChart(chart, datax) {
datax.row(chart.model).get(chart.get);
}
-
var data = {};
function loadData(fileName) {
@@ -36,57 +27,61 @@ angular.module('apacheZeppelinGsocApp').controller('ChartCtrl', function($scope,
data = getData(fileName);
ChartMetaService.setChartDataSetName(fileName);
drawChart(data);
-
}
function loadChartLibrary(libraryIndex) {
setButtonActive('chartLibraryButton', libraryName[libraryIndex].library);
ChartMetaService.setChartLib(libraryName[libraryIndex].library);
+ ChartMetaService.setChartTemplateURL(libraryName[libraryIndex].template);
+ if (ChartMetaService.getChartType() === null) {
+ //setting default chart type
+ ChartMetaService.setChartType('Bar');
+ }
drawChart(data);
}
+ function getChartTemplateURL() {
+ return ChartMetaService.getChartTemplateURL();
+ }
+
function loadChartType(chartType) {
ChartMetaService.setChartType(chartType);
setButtonActive('chartTypeButton', chartType);
drawChart(data);
//To-Do CHart model will be completing for rendering the chart
}
-
+ //chart is generated from service, service is using HighChartfactory.HighCHart Factory is extended version of ChartFactory.
function drawChart(data) {
- //Checking chart requirement is completed
- if (ChartMetaService.isMetaCompleted()) {
- var myNewChart = {};
- var myChartType = ChartMetaService.getChartType();
- console.log(myChartType);
- switch (ChartMetaService.getChartLib()) {
- case 'NVD3Chart':
- //chart is genrated from servie, service is using HighChartfactory.HighCHart Factory is extended version of ChartFactory.
- myNewChart = ChartService.getNVD3Chart(myChartType);
- vm.data[0] = myNewChart.viewModel.data[0];
- vm.options = myNewChart.viewModel.options;
- break;
- case 'highChart':
- myNewChart = ChartService.getHighChart(myChartType);
- vm.chartConfig = myNewChart.viewModel;
- break;
- case 'googleChart':
- myNewChart = ChartService.getGoogleChart(myChartType);
- vm.chart = myNewChart.viewModel;
- break;
-
- }
-
-
+ //Checking chart requirement is completed
+ var myNewChart = {};
+ var myChartType = ChartMetaService.getChartType();
+ console.log(myChartType);
+ switch (ChartMetaService.getChartLib()) {
+ case 'NVD3Chart':
+ //set data for NVD3
+ myNewChart = ChartService.getNVD3Chart(myChartType);
+ vm.data = myNewChart.viewModel.data;
+ vm.options = myNewChart.viewModel.options;
+ break;
+ case 'highChart':
+ myNewChart = ChartService.getHighChart(myChartType);
+ vm.chartConfig = myNewChart.viewModel;
+ break;
+ case 'googleChart':
+ myNewChart = ChartService.getGoogleChart(myChartType);
+ vm.chart = myNewChart.viewModel;
+ break;
+ }
+ if (myNewChart.model) {
renderChart(myNewChart.model, data);
- //nvd3 axis update
}
+ //NVD3 axis update
}
function getData(fileName) {
return d3.csv('data/' + fileName + '.csv');
}
-
- //deafult button picker
+ //default button picker
var active = {
'dataButton': false,
'chartLibraryButton': false,
@@ -104,17 +99,13 @@ angular.module('apacheZeppelinGsocApp').controller('ChartCtrl', function($scope,
function isButtonSelected(set) {
return active[set];
}
-
vm.loadData = loadData;
vm.isButtonActive = isButtonActive;
vm.isButtonSelected = isButtonSelected;
vm.loadChartLibrary = loadChartLibrary;
vm.loadChartType = loadChartType;
- /*To-DO (Testing) chart lib testing for lib */
- vm.options = ncd3Chart1.options;
- vm.data = ncd3Chart1.data;
- vm.chartConfig = highchart.chartConfig;
- vm.chart = googleChart;
- /*END*/
-
+ vm.files = files;
+ vm.libraryName = libraryName;
+ vm.chartTypes = chartTypes;
+ vm.getChartTemplateURL = getChartTemplateURL;
});
\ No newline at end of file
diff --git a/app/scripts/controllers/chart.js b/app/scripts/controllers/chart.js
deleted file mode 100644
index 8c43b2f..0000000
--- a/app/scripts/controllers/chart.js
+++ /dev/null
@@ -1,128 +0,0 @@
-'use strict';
-
-/**
- * @ngdoc function
- * @name apacheZeppelinGsocApp.controller:AboutCtrl
- * @description
- * # AboutCtrl
- * Controller of the apacheZeppelinGsocApp
- */
-angular.module('apacheZeppelinGsocApp')
- .controller('ChartCtrl', function ($scope) {
- $scope.chartObject = {
- 'type': 'AreaChart',
- 'displayed': true,
- 'data': {
- 'cols': [
- {
- 'id': 'month',
- 'label': 'Month',
- 'type': 'string',
- 'p': {}
- },
- {
- 'id': 'laptop-id',
- 'label': 'Laptop',
- 'type': 'number',
- 'p': {}
- },
- {
- 'id': 'desktop-id',
- 'label': 'Desktop',
- 'type': 'number',
- 'p': {}
- },
- {
- 'id': 'server-id',
- 'label': 'Server',
- 'type': 'number',
- 'p': {}
- },
- {
- 'id': 'cost-id',
- 'label': 'Shipping',
- 'type': 'number'
- }
- ],
- 'rows': [
- {
- 'c': [
- {
- 'v': 'January'
- },
- {
- 'v': 19,
- 'f': '42 items'
- },
- {
- 'v': 12,
- 'f': 'Ony 12 items'
- },
- {
- 'v': 7,
- 'f': '7 servers'
- },
- {
- 'v': 4
- }
- ]
- },
- {
- 'c': [
- {
- 'v': 'February'
- },
- {
- 'v': 13
- },
- {
- 'v': 1,
- 'f': '1 unit (Out of stock this month)'
- },
- {
- 'v': 12
- },
- {
- 'v': 2
- }
- ]
- },
- {
- 'c': [
- {
- 'v': 'March'
- },
- {
- 'v': 24
- },
- {
- 'v': 5
- },
- {
- 'v': 11
- },
- {
- 'v': 6
- }
- ]
- }
- ]
- },
- 'options': {
- 'title': 'Sales per month',
- 'isStacked': 'true',
- 'fill': 20,
- 'displayExactValues': true,
- 'vAxis': {
- 'title': 'Sales unit',
- 'gridlines': {
- 'count': 10
- }
- },
- 'hAxis': {
- 'title': 'Date'
- }
- },
- 'formatters': {}
-};
- });
diff --git a/app/scripts/controllers/controllers.js b/app/scripts/controllers/controllers.js
deleted file mode 100644
index 9ded90f..0000000
--- a/app/scripts/controllers/controllers.js
+++ /dev/null
@@ -1,181 +0,0 @@
-var chartControllers = angular.module('chartControllers', ['googlechart', 'nvd3', 'highcharts-ng']);
-
-
-chartControllers.controller('chartCtrl', ['$scope', '$location', 'Datax',
- function($scope, $location, Datax) {
-
-
-
-
- //csv file data is load for all charts libraries
- $scope.loadData = function(fileName) {
- //console.log("loading data "+fileName);
- data = getData(fileName);
- console.log(data);
- $scope.setActive('b1',fileName);
- //$scope.Datax = Datax;
- console.log(Datax)
- loadYAxisLabel(fileName);
- $scope.a = true;
- drawChart();
- };
-
- //default one
- var myChart = {};
-
- $scope.loadChartLibrary = function(libraryIndex) {
- myChart = libraryName[libraryIndex];
- switchChartLib(myChart.library);
- $scope.setActive('b2',myChart.library);
- $scope.b = true;
- drawChart();
-
- };
-
-
- //getDataing highchart sample
- $scope.chartConfig = highchart.chartConfig;
-
- //getting nvd3 chart sample
- $scope.options = ncd3Chart1.options;
- $scope.data = ncd3Chart1.data;
-
- //getting google chart sample
- $scope.chart = googleChart;
-
- //Switch all chart libaraies chart types at one
- $scope.switchChartType = function(gchartType, hchartType, dchartType) {
- $scope.chart.type = gchartType;
- $scope.chartConfig.options.chart.type = hchartType;
- $scope.options.chart.type = dchartType;
- $scope.setActive('b3',hchartType);
- //nvd3
- loadYAxisLabel($scope.fileName);
- var nvdLabels = nvd3AxisLabels;
- $scope.options.chart.xAxis = {
- 'axisLabel': 'Make',
- 'tickFormat': function(d) {
- return nvdLabels[d]
- }
- };
-
- };
-
- //deafult button picker
- $scope.active={'b1':false,'b2':false,'b3':'bar'};
-
- $scope.setActive = function(set,type) {
- $scope.active[set] = type;
- };
-
- $scope.isBActive = function(set,type) {
- return $scope.active[set] === type;
- };
-
- function switchChartLib (chartLib) {
- console.log('switchChartLib to '+chartLib);
- $scope.highxChart = false;
- $scope.googlexChart = false;
- $scope.NVD3Chart = false;
- $scope[chartLib] = true;
- };
-
- function drawChart() {
- console.log('draw the chart '+myChart.library);
- if(myChart.model != null) {
- renderChart(myChart.model, data);
- //nvd3 axis update
- $scope.options.chart.xAxis = {
- 'tickFormat': function(d) {
- return nvd3AxisLabels[d]
- }
- };
- }
-
- };
- var nvd3AxisLabels = {};
-
-
- //nvd3 chartting
- function loadYAxisLabel(fileName) {
- nvd3AxisLabels = getData(fileName).row(nvd3YaxisModel).get(getNVD3Yaxis);
- };
-
- //NVD3 Chart
-
- function getData(fileName) {
- return d3.csv("data/" + fileName + ".csv")
- };
-
- function getNVD3(error, rows) {
- $scope.data[0].values = rows;
- };
-
- function nvd3Model(d) {
- return {
- label: d.Make,
- value: +d.Length,
- valuex: +d.No
- }
- };
-
- function getNVD3Yaxis(error, rows) {
- nvd3AxisLabels = rows;
- };
-
- function nvd3YaxisModel(d) {
- return d.Make;
- };
-
- var NVD3Chart = {
- model: nvd3Model,
- get: getNVD3
- };
-
- //google chart
- function googleChartModel(d) {
- return {
- c: [{
- v: d.Make
- }, {
- v: +d.Length
- }]
- }
- };
-
- function getGoogleChart(error, rows) {
- $scope.chart.data.rows = rows;
- };
-
- var googlexChart = {
- model: googleChartModel,
- get: getGoogleChart
- };
-
- //high chart
- function highChartModel(d) {
- return +d.Length;
- };
-
-
- function getHighChart(error, rows) {
- $scope.chartConfig.series[0].data = rows;
- };
- var highxChart = {
- model: highChartModel,
- get: getHighChart
- };
- //var chartPipe = getData(fileName).row(nvd3Model).get(getNVD3);
-
-
-
-
- function renderChart(chart, data) {
- console.log('drawing....')
- data.row(chart.model).get(chart.get)
- };
-
- libraryName = [ { 'library': 'NVD3Chart', 'model':NVD3Chart}, { 'library':'highxChart', 'model':highxChart}, { 'library': 'googlexChart','model':googlexChart}];
- chartTypes = ["Line","Bar"];
- }
-]);
\ No newline at end of file
diff --git a/app/scripts/controllers/main.js b/app/scripts/controllers/main.js
deleted file mode 100755
index 48887bf..0000000
--- a/app/scripts/controllers/main.js
+++ /dev/null
@@ -1,17 +0,0 @@
-'use strict';
-
-/**
- * @ngdoc function
- * @name apacheZeppelinGsocApp.controller:MainCtrl
- * @description
- * # MainCtrl
- * Controller of the apacheZeppelinGsocApp
- */
-angular.module('apacheZeppelinGsocApp')
- .controller('MainCtrl', function ($scope) {
- $scope.awesomeThings = [
- 'HTML5 Boilerplate',
- 'AngularJS',
- 'Karma'
- ];
- });
diff --git a/app/scripts/controllers/sample-charts.js b/app/scripts/controllers/sample-charts.js
deleted file mode 100644
index 3e9cbbe..0000000
--- a/app/scripts/controllers/sample-charts.js
+++ /dev/null
@@ -1,141 +0,0 @@
-'use strict';
-
-/**
- * @ngdoc function
- * @name apacheZeppelinGsocApp.controller:sample chart
- * @description
- * This contains the sample chats for google charts, nvd3 and high charts
- * Just for new comers to get chart models in apacheZeppelinGsocApp
- */
-
-//google chart
-var googleChart = {};
-googleChart.type = 'BarChart';
-googleChart.cssStyle = 'height:400px; width:600px;';
-googleChart.data = {
- 'cols': [{
- id: 'pizza',
- label: 'Pizza',
- type: 'string'
-}, {
- id: 'populartiy',
- label: 'Populartiy',
- type: 'number'
-}
-
- ],
- 'rows': [{
-c: [{
- v: 'Pepperoni'
-}, {
- v: 14
-}]
- }, {
-c: [{
- v: 'Mushroom'
-}, {
- v: 6
-}]
- }, {
-c: [{
- v: 'Hawaiian'
-}, {
- v: 5
-}]
- }, {
-c: [{
- v: 'Sausage'
-}, {
- v: 10
-}]
- }]
-};
-
-googleChart.options = {
- 'isStacked': 'true',
- 'fill': 20,
- 'height': 300,
- 'displayExactValues': true,
- 'vAxis': {
- 'gridlines': {
- 'count': 6
-}
- },
- 'hAxis': {
- 'title': 'hAxis title'
- }
-};
-
-googleChart.formatters = {};
-
-//nvd3 chart
-var ncd3Chart1 = {};
-ncd3Chart1.options = {
- chart: {
-type: 'discreteBarChart',
-height: 300,
-width: 400,
-margin: {
- top: 20,
- right: 20,
- bottom: 60,
- left: 55
-},
-x: function(d) {
- return d.valuex;
-},
-y: function(d) {
- return d.value;
-},
-showValues: true,
-transitionDuration: 500,
-xAxis: {
- axisLabel: 'X Axis'
-},
-yAxis: {
- axisLabel: 'Y Axis',
- axisLabelDistance: 10
-}
- }
-};
-ncd3Chart1.data = [{
-
- values: [{
-'label': 'A',
-'value': 5,
-'valuex': 0
- }, {
-'label': 'B',
-'value': 10,
-'valuex': 1
- }, {
-'label': 'C',
-'value': 24,
-'valuex': 2
- }, {
-'label': 'D',
-'value': 8,
-'valuex': 3
- }]
-}];
-
-//highchart
-var highchart = {};
-highchart.chartConfig = {
- options: {
-chart: {
- type: 'bar'
-}
- },
- xAxis: {
-categories: ['A', 'B', 'C', 'D']
- },
- series: [{
-data: [10, 15, 12, 8]
- }],
- size: {
-width: 500,
-height: 300
- },
- loading: false
-};
\ No newline at end of file
diff --git a/app/scripts/services/chart-meta-service.js b/app/scripts/services/chart-meta-service.js
index d05f77f..e839e09 100644
--- a/app/scripts/services/chart-meta-service.js
+++ b/app/scripts/services/chart-meta-service.js
@@ -1,5 +1,4 @@
'use strict';
-
/**
* @ngdoc function
* @name apacheZeppelinGsocApp.ChartMetaService
@@ -7,46 +6,52 @@
* # ChartMetaService will be using Handle Basic Chart Meta Details.
*
*/
-
-
angular.module('apacheZeppelinGsocApp').service('ChartMetaService', function() {
-
/*Chart Meta Data Service*/
var MetaModel = {
- ChartLib:null,
- ChartType:null,
- ChartDataSetName:null
- }
-
+ ChartLib: null,
+ ChartTemplateURL: null,
+ ChartType: null,
+ ChartDataSetName: null,
+ ChartDataSetPath: null,
+ ChartData: null
+ };
//getters
this.getChartLib = function() {
- return MetaModel.ChartLib ;
+ return MetaModel.ChartLib;
};
-
this.getChartType = function() {
- return MetaModel.ChartType ;
+ return MetaModel.ChartType;
+ };
+ this.getChartTemplateURL = function() {
+ return MetaModel.ChartTemplateURL;
};
-
this.getChartDataSetName = function() {
- return MetaModel.ChartDataSetName ;
+ return MetaModel.ChartDataSetName;
+ };
+ this.getChartDataSetPath = function() {
+ return MetaModel.ChartDataSetPath;
+ };
+ this.getChartData = function() {
+ return MetaModel.ChartData;
};
-
//setters
this.setChartLib = function(ChartLib) {
- MetaModel.ChartLib = ChartLib ;
+ MetaModel.ChartLib = ChartLib;
};
-
this.setChartType = function(ChartType) {
- MetaModel.ChartType = ChartType ;
+ MetaModel.ChartType = ChartType;
+ };
+ this.setChartTemplateURL = function(ChartTemplateURL) {
+ MetaModel.ChartTemplateURL = ChartTemplateURL;
};
-
this.setChartDataSetName = function(ChartDataSetName) {
- MetaModel.ChartDataSetName = ChartDataSetName ;
+ MetaModel.ChartDataSetName = ChartDataSetName;
+ MetaModel.ChartDataSetPath = 'data/' + ChartDataSetName + '.csv';
+ MetaModel.ChartData = d3.csv(MetaModel.ChartDataSetPath);
};
-
- //looking for UI model logic
- this.isMetaCompleted = function() {
- return MetaModel.ChartType !== null ;
+ //looking for UI model logic
+ this.isMetaCompleted = function() {
+ return MetaModel.ChartType !== null;
};
-
});
\ No newline at end of file
diff --git a/app/scripts/services/chart-service.js b/app/scripts/services/chart-service.js
index bccd5ad..163c757 100644
--- a/app/scripts/services/chart-service.js
+++ b/app/scripts/services/chart-service.js
@@ -9,12 +9,13 @@
*/
-angular.module('apacheZeppelinGsocApp').service('ChartService', function(HighChartFactory, GoogleChartFactory, NVD3ChartFactory) {
+angular.module('apacheZeppelinGsocApp').service('ChartService', function(HighChartFactory, GoogleChartFactory, NVD3ChartFactory,ChartMetaService) {
/*using chart facotry*/
this.getHighChart = function(chartType) {
var myChart = HighChartFactory;
myChart.setChartType(chartType);
+ myChart.setChartAxis(ChartMetaService.getChartDataSetPath());
return myChart;
};
@@ -27,6 +28,7 @@ angular.module('apacheZeppelinGsocApp').service('ChartService', function(HighCha
this.getNVD3Chart = function(chartType) {
var myChart = NVD3ChartFactory;
myChart.setChartType(chartType);
+ myChart.setChartAxis(ChartMetaService.getChartDataSetPath());
return myChart;
};
diff --git a/app/styles/chart.css b/app/styles/chart.css
index d01a46b..d01957f 100644
--- a/app/styles/chart.css
+++ b/app/styles/chart.css
@@ -1,5 +1,5 @@
/*nvd3 chart svg size fixing */
svg {
width: 550px !important;
- height: 300px !important;
+ height: 350px !important;
}
\ No newline at end of file
diff --git a/app/views/chart.html b/app/views/chart.html
deleted file mode 100644
index b93ee19..0000000
--- a/app/views/chart.html
+++ /dev/null
@@ -1,2 +0,0 @@
-....
- diff --git a/app/views/charts/googlechart.html b/app/views/charts/googlechart.html new file mode 100644 index 0000000..143dd55 --- /dev/null +++ b/app/views/charts/googlechart.html @@ -0,0 +1,4 @@ +
+
+
+
\ No newline at end of file
diff --git a/app/views/charts/highchart.html b/app/views/charts/highchart.html
new file mode 100644
index 0000000..f9a3342
--- /dev/null
+++ b/app/views/charts/highchart.html
@@ -0,0 +1,4 @@
+
+
+
\ No newline at end of file
diff --git a/app/views/charts/nvd3chart.html b/app/views/charts/nvd3chart.html
new file mode 100644
index 0000000..6760d18
--- /dev/null
+++ b/app/views/charts/nvd3chart.html
@@ -0,0 +1,4 @@
+
+
+
\ No newline at end of file
diff --git a/app/views/main.html b/app/views/main.html
deleted file mode 100755
index 787f33e..0000000
--- a/app/views/main.html
+++ /dev/null
@@ -1,23 +0,0 @@
-
-
-
-
diff --git a/app/views/milestone01.html b/app/views/milestone01.html
index 9b6cffc..7aaafb5 100644
--- a/app/views/milestone01.html
+++ b/app/views/milestone01.html
@@ -1,52 +1,37 @@
HTML5 Boilerplate
-- HTML5 Boilerplate is a professional front-end template for building fast, robust, and adaptable web apps or sites. -
- -Angular
-- AngularJS is a toolset for building the framework most suited to your application development. -
- -Karma
-Spectacular Test Runner for JavaScript.
-
-
-
-
MileStone - 01
+MileStone - 01
+
+
\ No newline at end of file
diff --git a/bower.json b/bower.json
index 8767835..d00b505 100644
--- a/bower.json
+++ b/bower.json
@@ -2,13 +2,13 @@
"name": "apacheZeppelinGsoc",
"version": "0.0.0",
"dependencies": {
- "angular": "^1.3.0",
- "bootstrap": "^3.2.0",
+ "angular": "^1.4.1",
+ "bootstrap": "~3.2.0",
"angular-resource": "^1.3.0",
"angular-route": "^1.3.0",
"angular-bootstrap": "~0.13.0",
"angular-google-chart": "~0.0.11",
- "d3": "~3.5.5",
+ "d3": "~3.3.13",
"nvd3": "~1.1.15-beta",
"highcharts-release": "~4.1.6",
"highcharts-ng": "~0.0.8",
diff --git a/test/spec/controllers/chart-controllers.js b/test/spec/controllers/chart-controllers.js
index 1643202..188a7a7 100644
--- a/test/spec/controllers/chart-controllers.js
+++ b/test/spec/controllers/chart-controllers.js
@@ -12,8 +12,7 @@ describe('Controller: ChartCtrl', function() {
// load the controller's module
beforeEach(module('apacheZeppelinGsocApp'));
- var ChartCtrl,
- scope;
+ var ChartCtrl, scope;
// Initialize the controller and a mock scope
beforeEach(inject(function($controller, $rootScope) {
@@ -31,28 +30,25 @@ describe('Controller: ChartCtrl', function() {
expect(ChartCtrl.vm).toBeUndefined();
});
-/*
-//ChartCtrl scope is not solve for test
it('Chart Controller Option should to be defined', function() {
expect(ChartCtrl.loadData).toBeDefined();
expect(ChartCtrl.loadChartLibrary).toBeDefined();
});
-
it('Chart Controller Button functions should to be defined', function() {
expect(ChartCtrl.isButtonActive).toBeDefined();
expect(ChartCtrl.isButtonSelected).toBeDefined();
});
-
-
it('Button Group function testing', function() {
expect(ChartCtrl.isButtonActive instanceof Function).toBe(true);
- expect(ChartCtrl.isButtonSelected instanceof Function).toBe(true);
- expect(ChartCtrl.isActive('dataButton')).toBe(false);
- ChartCtrl.isButtonActive('dataButton','car');
- expect(ChartCtrl.isActive('dataButton')).toBe(true);
- });
-*/
+ expect(ChartCtrl.isButtonSelected instanceof Function).toBe(true);
+ expect(ChartCtrl.isButtonActive('dataButton','car')).toBe(false);
+ });
+
+ it('Get ChartTemplate URL testing', function() {
+ expect(ChartCtrl.getChartTemplateURL).toBeDefined();
+ expect(ChartCtrl.getChartTemplateURL instanceof Function).toBe(true);
+ });
});
diff --git a/test/spec/controllers/nav-controller.js b/test/spec/controllers/nav-controller.js
index 169d93c..48fafe3 100644
--- a/test/spec/controllers/nav-controller.js
+++ b/test/spec/controllers/nav-controller.js
@@ -5,8 +5,7 @@ describe('Controller: NavCtrl', function() {
// load the controller's module
beforeEach(module('apacheZeppelinGsocApp'));
- var NavCtrl,
- scope;
+ var NavCtrl, scope;
// Initialize the controller and a mock scope
beforeEach(inject(function($controller, $rootScope) {
@@ -30,4 +29,5 @@ describe('Controller: NavCtrl', function() {
expect(NavCtrl.isActive('home')).toBe(false);
expect(NavCtrl.isActive('')).toBe(true);
});
+
});