Hi skp,
Check this example. Now please take its reference and correct your code.
Database
For this example I have used of Northwind database that you can download using the link given below.
Download Northwind Database
Controller
public string getEfficiencyDetails(string StartDate = null, string EndDate = null)
{
SqlConnection myConnection = new SqlConnection();
myConnection.ConnectionString = ConfigurationManager.ConnectionStrings["constr"].ConnectionString;
SqlCommand sqlCmd = new SqlCommand();
sqlCmd.CommandType = CommandType.Text;
sqlCmd.CommandText = "SELECT EmployeeID,FirstName FROM Employees WHERE BirthDate BETWEEN @StartDate AND @EndDate ORDER BY FirstName";
sqlCmd.Connection = myConnection;
sqlCmd.Parameters.AddWithValue("@StartDate", StartDate);
sqlCmd.Parameters.AddWithValue("@EndDate", EndDate);
SqlDataAdapter sda = new SqlDataAdapter(sqlCmd);
DataSet ds = new DataSet();
string jsonString = string.Empty;
myConnection.Open();
sda.Fill(ds);
myConnection.Close();
jsonString = Newtonsoft.Json.JsonConvert.SerializeObject(ds.Tables[0]);
return jsonString;
}
View
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/angular-material/1.0.4/angular-material.css" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular-animate.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular-aria.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular-material/1.0.4/angular-material.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-messages.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.2/moment.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.3.0/Chart.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular-chart.js/1.0.3/angular-chart.min.js"></script>
<script type="text/javascript">
var app = angular.module('MyApp', ['ngMaterial', 'chart.js']);
app.controller('MyController', function ($scope, $http, $filter) {
$scope.maxDate = new Date();
$scope.startDate = { date: new Date('1948-12-01') };
$scope.start = $filter('date')(new Date($scope.startDate.date), 'yyyy-MM-dd');
$scope.endDate = { date: new Date('1966-12-31') };
$scope.end = $filter('date')(new Date($scope.endDate.date), 'yyyy-MM-dd');
$scope.changeStartDate = function (date) {
$scope.startDate = { date: new Date(date) };
$scope.start = $filter('date')(new Date($scope.startDate.date), 'yyyy-MM-dd');
}
$scope.changeendDate = function (date) {
$scope.endDate = { date: new Date(date) };
$scope.end = $filter('date')(new Date($scope.endDate.date), 'yyyy-MM-dd');
}
$scope.submit = function () {
$http.get(url + "?StartDate=" + $scope.start + "&EndDate=" + $scope.end + "")
.then(function (response) {
$scope.employees = response.data;
$scope.colors = ['#00FF00'];
$scope.labels = [];
var value = [];
for (var i = 0; i < $scope.employees.length; i++) {
$scope.labels.push($scope.employees[i].FirstName);
value.push($scope.employees[i].EmployeeID);
}
$scope.data = [value];
});
}
});
app.config(function ($mdDateLocaleProvider) {
$mdDateLocaleProvider.formatDate = function (date) {
return date ? moment(date).format('YYYY-MM-DD') : '';
};
});
</script>
<div ng-app="MyApp" ng-controller="MyController">
<span><b>Start Date</b><br />
<md-datepicker ng-model="startDate.date" ng-change="changeStartDate(startDate.date)"
md-placeholder="Choose a date" md-max-date="maxDate"></md-datepicker>
<br />
</span>
<br />
<span><b>End Date</b><br />
<md-datepicker ng-model="endDate.date" ng-change="changeendDate(endDate.date)" md-placeholder="Choose a date"
md-max-date="maxDate"></md-datepicker>
<br />
</span>
<md-button ng-click="submit()" class="md-primary" type="button">Submit</md-button>
<hr />
<canvas id="base" class="chart-line" chart-data="data" chart-labels="labels" chart-colors="colors"></canvas>
</div>
Screenshot
