Skip to content

Commit

Permalink
Removing DRP and Cleaning code
Browse files Browse the repository at this point in the history
  • Loading branch information
@Madhuka
Madhuka committed Jun 10, 2015
1 parent f4e4785 commit 8fc88fd
Show file tree
Hide file tree
Showing 2 changed files with 85 additions and 108 deletions.
138 changes: 58 additions & 80 deletions js/controllers.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,43 +2,27 @@ var chartControllers = angular.module('chartControllers', ['googlechart', 'nvd3'

chartControllers.controller('chartCtrl', ['$scope',
function($scope) {
//sample csv file name
$scope.fileName = 'car';
$scope.chartType = 'HighChart';


//csv file data is load for all charts libraries
$scope.loadData = function() {
console.log('ccccssccc');
fileName = $scope.fileName
//loadFile(fileName);
$scope.loadCarDatatoHighChart(fileName);

};



//setting high chart labels and data seriees
$scope.loadCarDatatoHighChart = function(fileName) {
console.log('cccc');
renderChart(highxChart, data);
};

//setting ncd3 labels and data
$scope.loadCarDatatoNVD3 = function(fileName) {
$scope.loadData = function(fileName) {
//console.log("loading data "+fileName);
data = getData(fileName);
loadYAxisLabel(fileName);
renderChart(NVD3Chart, data);
$scope.options.chart.xAxis = {
'tickFormat': function(d) {
return nvd3AxisLabels[d]
}
};

$scope.a = true;
drawChart();
};

//setting google chart labels and data
$scope.loadCarDatatoGoogle = function(fileName) {
renderChart(googlexChart, data);
//default one
var myChart = {};

$scope.loadChartLibrary = function(libraryIndex) {
myChart = libraryName[libraryIndex];
switchChartLib(myChart.library);
$scope.b = true;
drawChart();

};


//getDataing highchart sample
$scope.chartConfig = highchart.chartConfig;
Expand Down Expand Up @@ -69,76 +53,68 @@ chartControllers.controller('chartCtrl', ['$scope',

};

$scope.drawChart = function() {
console.log('drawChart....')
//getData('car');

renderChart(NVD3Chart, data);
//
//renderChart(highxChart, data);

};

//switching chart libraries
$scope.switchChartLib = function(chartLib) {
$scope.highChartChartShow = false;
$scope.googlrChartShow = false;
$scope.nvd3Show = false;
switchChartLib = function(chartLib) {
console.log('switchChartLib to '+chartLib);
$scope.highxChart = false;
$scope.googlexChart = false;
$scope.NVD3Chart = false;
$scope[chartLib] = true;
};

drawChart = function() {
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]
}
};
}

//End of the scope level
var nvd3AxisLabels = {};

//loading csv file data set for chart
loadFile = function(fileName) {
d3.csv("data/" + fileName + ".csv", function(d) {
return {
year: new Date(+d.Year, 0, 1), // convert "Year" column to Date
make: d.Make,
model: d.Model,
length: +d.Length // convert "length" column to number
};
}, function(error, rows) {
//console.log(rows);
});
};
var nvd3AxisLabels = {};


//nvd3 chartting
loadYAxisLabel = function(fileName) {
d3.csv("data/" + fileName + ".csv", function(d) {
return d.Make;
}, function(error, rows) {
//console.log(rows);
nvd3AxisLabels = rows;
});
nvd3AxisLabels = getData(fileName).row(nvd3YaxisModel).get(getNVD3Yaxis);
};

//NVD3 Chart

function getData(fileName) {
getData = function(fileName) {
return d3.csv("data/" + fileName + ".csv")
};

function getNVD3(error, rows) {
getNVD3 = function(error, rows) {
$scope.data[0].values = rows;
};

function nvd3Model(d) {
nvd3Model = function(d) {
return {
label: d.Make,
value: +d.Length,
valuex: +d.No
}
};

getNVD3Yaxis = function(error, rows) {
nvd3AxisLabels = rows;
};

nvd3YaxisModel = function(d) {
return d.Make;
};

var NVD3Chart = {
model: nvd3Model,
get: getNVD3
};

//google chart
function googleChartModel(d) {
googleChartModel = function(d) {
return {
c: [{
v: d.Make
Expand All @@ -148,7 +124,7 @@ chartControllers.controller('chartCtrl', ['$scope',
}
};

function getGoogleChart(error, rows) {
getGoogleChart = function(error, rows) {
$scope.chart.data.rows = rows;
};

Expand All @@ -158,27 +134,29 @@ chartControllers.controller('chartCtrl', ['$scope',
};

//high chart
function highChartModel(d) {
highChartModel = function(d) {
return +d.Length;
};
};


function getHighChart(error, rows) {
getHighChart = function(error, rows) {
$scope.chartConfig.series[0].data = rows;
};
var highxChart = {
model: highChartModel,
get: getHighChart
};
//var chartPipe = getData(fileName).row(nvd3Model).get(getNVD3);
var data = getData('car');




function renderChart(chart, data) {
//console.log('drawing....')
renderChart = function(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"];
}
]);
55 changes: 27 additions & 28 deletions partials/milestone01.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,50 +2,49 @@


<h3 class="cover-heading">MileStone - 01</h3>
<!--chart libraries need to pick-->
<div>
<label>Chart Library</label>
<div class="btn-group">
<a class="btn btn-default" ng-click="switchChartLib('highChartChartShow')"><i class="fa fa-h-square"> HighChart</i></a>
<a class="btn btn-default" ng-click="switchChartLib('googlrChartShow')"><i class="fa fa-google"> GooglrChart</i></a>
<a class="btn btn-default" ng-click="switchChartLib('nvd3Show')"><i class="fa fa-align-right"> NVD3 Chart</i></a>
</div>
</div><br>


<!--sample data set is to pick from csv file-->
<div>
<label>Sample CSV Data Set:
<input type="text" ng-model="fileName" />
</label>
<label>1. Select the Data set: </label>
<div class="btn-group">
<a class="btn btn-default" ng-click="loadData('car')"><i class="fa fa-h-square"> Car</i></a>
<a class="btn btn-default" ng-click="loadData('bike')"><i class="fa fa-google"> Bike</i></a>
</div>
</div>
<br>

<div ng-show="a">
<label>2. Select the Chart Library</label>
<div class="btn-group">
<a class="btn btn-default" ng-click="loadCarDatatoHighChart(fileName)"><i class="fa fa-h-square"> Load</i></a>
<a class="btn btn-default" ng-click="loadCarDatatoGoogle(fileName)"><i class="fa fa-google"> Load</i></a>
<a class="btn btn-default" ng-click="loadCarDatatoNVD3(fileName)"><i class="fa fa-align-right"> Load</i></a>
<a class="btn btn-default" ng-click="drawChart()"><i class="fa fa-align-right">Draw</i></a>
<a class="btn btn-default" ng-click="loadData(fileName)"><i class="fa fa-download"> Load For All</i></a>
<a class="btn btn-default" ng-click="loadChartLibrary(1)"><i class="fa fa-h-square"> HighChart</i></a>
<a class="btn btn-default" ng-click="loadChartLibrary(2)"><i class="fa fa-google"> GooglrChart</i></a>
<a class="btn btn-default" ng-click="loadChartLibrary(0)"><i class="fa fa-align-right"> NVD3 Chart</i></a>
</div>
<a class="btn btn-default" ng-click="drawChart()"><i class="fa fa-bar-chart"> Draw Chart</i></a>
</div>

<!--chart type can be picked-->
<br>
<label>Chart Type</label>
<div class="btn-group">
<a class="btn btn-default" ng-click="switchChartType('LineChart','line','lineChart')"><i class="fa fa-line-chart"> Line Chart</i></a>
<a class="btn btn-default" ng-click="switchChartType('BarChart','bar','discreteBarChart')"><i class="fa fa-bar-chart"> Bar Chart</i></a>
<div ng-show="a && b">
<label>3. Selct the Chart Type</label>
<div class="btn-group">
<a class="btn btn-default" ng-click="switchChartType('LineChart','line','lineChart')"><i class="fa fa-line-chart"> Line Chart</i></a>
<a class="btn btn-default" ng-click="switchChartType('BarChart','bar','discreteBarChart')"><i class="fa fa-bar-chart"> Bar Chart</i></a>
</div>
</div>

<!--charts-->
<div class="box" ng-show="highChartChartShow">
<p class="lead">HighChart</p>
<div class="box" ng-show="highxChart">
<highchart id="chart1" config="chartConfig"></highchart>
</div>
<div class="box" ng-show="googlrChartShow">
<p class="lead">Google Chart</p>

<div class="box" ng-show="googlexChart">
<div google-chart chart="chart" style="{{chart.cssStyle}}" />
</div>
<div class="box" ng-show="nvd3Show">
<p class="lead">NVD3 Chart</p>

<div class="box" ng-show="NVD3Chart">
<nvd3 options='options' data='data'></nvd3>
</div>

</div>
</div>

0 comments on commit 8fc88fd

Please sign in to comment.