Angularjs line chart- Angularjs line chart demo and example
In this post we will show you how to use Angularjs line chart with demo and example, hear we will give you demo for Angularjs line chart and gow to pass data in to Angularjs line chart and how to implement it.
Angularjs line chart is a widespread consumer aspect framework for net applications. It provides increased markup language practicality, knowledge binding, MVC pattern structure, routing support and far additional. during this article we’ll think again a number of the ways that line chart may be used with Angularjs line chart.
In its simplest type, line chart may be loaded ANd initialized in pure JavaScript from at intervals an Angular controller or in plain JavaScript. The code below shows AN example of a webpage exploitation Angularjs line chart.
View Demo Download
<!DOCTYPE html>
<html ng-app="onlinecodeModule">
<head>
<title>Angularjs line chart demo and example - onlinecode</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
</head>
<body ng-controller="onlinecodeController">
<div id="container">Placeholder for Angularjs line chart</div>
<script>
angular.module('onlinecodeModule', [])
.controller('onlinecodeController', function ($scope) {
Highcharts.chart('container', {
xAxis: {
categories: ['Janaury', 'February', 'March', 'April', 'May', 'June',
'July', 'August', 'September', 'October', 'November', 'December']
},
series: [{
data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
}]
});
});
</script>
</body>
</html>The code above is not ideal, since it doesn’t separate introduction code from rationale and information. It additionally does not exploit the additional usefulness given by Angular, for example, information authoritative for instance. One way to deal with enhance the code is to compose a basic custom Angular mandate for line chart. This would enable us to take after Angular’s examples for code partition and reuse. A bland order may take diagram choices as a contention. A moment approach is compose an order for each graph layout utilized, giving the information as a contention. Check the accompanying case to take in more about how to utilize a custom Angular mandate for line chart
<!DOCTYPE html>
<html ng-app="onlinecodeModule">
<head>
<meta charset="utf-8" />
<title>Angularjs line chart directive demo and example - onlinecode</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
<script type="text/javascript" src="https://code.highcharts.com/highcharts.js"></script>
</head>
<body ng-controller="onlinecodeController">
<hc-chart options="chartOptions">Placeholder for Angularjs line char</hc-chart>
<hc-pie-chart title="Browser usage chart - onlincode" data="pieData">Placeholder for pie chart - onlincode</hc-pie-chart>
<script>
angular.module('onlinecodeModule', [])
// add generic chart Directive for and pass in chart options
.directive('hcChart', function () {
return {
// set restrict directive
restrict: 'E',
// set template directive
template: '<div></div>',
// set scope directive
scope: {
options: '='
},
// set link directive
link: function (scope, element) {
// line char chart scope
Highcharts.chart(element[0], scope.options);
}
};
})
// pie charts Directive and pass in to title and data only
.directive('hcPieChart', function () {
return {
// set restrict directive
restrict: 'E',
// set template directive
template: '<div></div>',
// set scope directive
scope: {
title: '@',
data: '='
},
// set link directive
link: function (scope, element) {
// Angularjs line char chart scope
Highcharts.chart(element[0], {
// set chart type
chart: {
type: 'pie'
},
// set title
title: {
text: scope.title
},
// set plot Options
plotOptions: {
pie: {
// set other option
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
format: '<b>{point.name}</b>: {point.percentage:.1f} %'
}
}
},
// set series scope data
series: [{
data: scope.data
}]
});
}
};
})
.controller('onlinecodeController', function ($scope) {
// first chart Sample options
$scope.chartOptions = {
title: {
text: 'This is Temperature data'
},
xAxis: {
categories: ['Janaury', 'February', 'March', 'April', 'May', 'June',
'July', 'August', 'September', 'October', 'November', 'December']
},
series: [{
data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
}]
};
// Angularjs pie chart Sample data
$scope.pieData = [{
name: "IE(Internet Explorer)",
y: 55.32
}, {
name: "Google Chrome",
y: 25.04,
sliced: true,
selected: true
}, {
name: "Missoula Firefox",
y: 11.37
}, {
name: "Uc",
y: 3.76
}, {
name: "Safari",
y: 0.90
}, {
name: "Others",
y: 0.5
}]
});
</script>
</body>
</html>
The above given code could likewise be extended utilizing Angular’s watch usefulness. In mix with its information authoritative, this could enable changes in the basic information to naturally refresh the graph.
There are a few more perplexing open source Angular mandates for Angularjs line chart. Take in more about the most prevalent order for Angularjs line chart. This mandate is not kept up or formally upheld by Angularjs line chart, but rather stays famous among Angularjs line chart designers and clients.
You also like google recaptcha using javascript and google recaptcha using php
Reference @ highcharts.com