My Technical Lessons: March 2016

Wednesday, March 9, 2016

Creating HiCharts

HiCharts is one of the easiest as finest utility I found to generate different kinds of charts in my Web Application

This is again a JS library which provides wonderful functionality to draw.
we just need to define x axis and y axis . and the data . rest JS will take care of itself

Below is an example of a Line Chart.
Note: I have hardcoded the values for testing purpose . in the next post I will show it can generated dynamically with database values

Include CDN :
<script src="https://code.highcharts.com/highcharts.js"></script>

<script src="https://code.highcharts.com/modules/exporting.js"></script>

Write a function
<script>

$(function () {

$('#container').highcharts({

chart: {
type: 'column'

},

title: {
text: 'Salary'

},

subtitle: {
text: 'Employee Name'

},

xAxis: {
categories: ['tom', 'Kedar', 'Sameer', 'Amit','Mohit']

},

yAxis: {

title: {
text: 'Salary'

},

labels: {
formatter: function () {

return '$'+ this.value;

}

}

},

tooltip: {
crosshairs: true,

shared: true

},

plotOptions: {

spline: {

marker: {

radius: 4,
lineColor: '#666666',

lineWidth: 1

}

}

},

series: [{
name: 'EMployee Salary',

marker: {
symbol: 'square'

},

data: [10000, 5700, 15000, 8000, 12800, {

y: 26.5,

marker: {
symbol: 'url(https://www.highcharts.com/samples/graphics/sun.png)'

}

}, 23.3, 18.3, 13.9, 9.6]

}]

});

});
</script>

The Above code has 4 different components
Title:to display user defined title for your graph
Axes: which defines what should be your X and Y axes values
Series
ToolTip
run the html file. you will see the below output

Angular | Filter |Limit no of Rows

Here we will see how we can limit the no of rows of a table.
we will give user an option to set how many rows he wants to see .

No. of rows to display<input type="number" ng-model="limit" step="1" min="0" max="50"/>

Now apply the filter :

<tr ng-repeat="Emp in Employee|filter:aa|limitTo:limit">

Tuesday, March 8, 2016

Angular| Filter Data

Earlier we saw some of the filter like sorting and formatting the data we shall now see how to filter data.

you just need 2 thing in addition to your display functionality
a) a search box
b) filter expression in angular
Note: This data is retrieved using WebApi and angular js ajax calls

code for the searchbox is as below

Search: <input type="search" name="EmployeeSearch" ng-model="aa" />

Now I wish to apply the filter to whole table so that it tries to match the criteria with any of the column data available

<tr ng-repeat="Emp in Employee|filter:aa">

<td>

{{Emp.EmployeeID}}

</td>

<td>{{Emp.EmployeeName}}</td>

<td>{{Emp.Email}}</td>

<td>{{Emp.RoleId}}</td>

<td>{{Emp.FunctionID}}</td>

<td>

<span ng-click="editBook(Emp)" class="btn btn-primary">Edit</span>

<span ng-click="deleteBook(Emp)" class="btn btn-danger">Delete</span>

</td>

</tr>

Tuesday, March 1, 2016

Angular JS with WebApi-Get

Earlier we saw how to make ajax calls from JQuery to consume WebApi Services .
the Same is shown here with angular js as a JavaScript framework .

Create a webApi controller and its method to get the data from Database

public class EmployeeController : ApiController

{

private DRMSEntities1 db = new DRMSEntities1();

// GET api/Employee

public IQueryable<DRMS_Tbl_Employee> GetDRMS_Tbl_Employee()

{

return db.DRMS_Tbl_Employee;

}

}

Create an HTML page to make ajax calls and display the result on the browser

View

<!DOCTYPE html>

<head>

//CDN//

</head>

//binding Json result to table

<tr>

<td>

</td>

<td>{{Emp.EmployeeName}}</td>

<td>{{Emp.Email}}</td>

<td>{{Emp.RoleId}}</td>

</tr>

</table>

//Making Ajax calls

var app = angular.module("RiskModule", []);

app.controller("RiskDetailsController", function ($scope, $http) {

$http.get('http://localhost:60228/api/Employee').

success(function (data, status, header, config) {

$scope.Employee = data;

}).

error(function (data, status, header, config) {

alert("Error");

});

</script>

</div>

</body>

</html>

Run the solution and you will see the result as below

Menu