Angular Highcharts Application PHP MySQLi
Today, We want to share with you Angular Highcharts Application PHP MySQLi.
In this post we will show you Highcharts and AngularJS Application Example, hear for angular2-highcharts – npm we will give you demo and example for implement.
In this post, we will learn about Simple angular Highcharts Chart Example using PHP MySQL Database with an example.
Welcome to the In infinityknow.com website! You will Step By Step learn web programming, easy and very fun. This website allmost provides you with a complete web programming tutorial presented in an easy-to-follow manner. Each web programming tutorial has all the practical examples with web programming script and screenshots available.Highcharts and AngularJS Application
Simple Four steps to making a chart in AngularJS
1st : Simple Include required JavaScript files in AngularJS app
2nd : Simple Create the AngularJS app
3rd : Simple Define the controller chart in your apps
4th : Simple Render the chart in your apps
angularchart.html
[php]
https://ajax.googleapis.com/ajax/libs/angularjs/1.0.3/angular.js
http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js
http://code.highcharts.com/highcharts.js
http://chart.js
function MainCtrl($scope, $http){
var data = {“xData”: [“2010”, “2011”, “2012”, “2013”, “2014”, “2015”,”2016″, “2017”, “2018”, “2019”, “2020”, “2021”],”yData”:[{
“name”: “Laravel”,
“data”: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
}, {
“name”: “Vue.Js”,
“data”: [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 24.1, 20.1, 14.1, 8.6, 2.5]
}, {
“name”: “PHP”,
“data”: [-0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6, 17.9, 14.3, 9.0, 3.9, 1.0]
}, {
“name”: “Asp.net”,
“data”: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]
}]}
$scope.lineChartYData=data.yData
$scope.lineChartXData=data.xData
}
angular.module(‘AngularChartExample’,[‘AngularChart’], function( $routeProvider, $locationProvider ){
$routeProvider.when(‘/’,{
template: ”,
controller: MainCtrl
})
})
[/php]
chart.js
[php]
angular.module(‘AngularChart’, []).directive(‘chart’, function () {
return {
restrict:’E’,
template:’
‘,
transclude:true,
replace:true,
scope: ‘=’,
link:function (scope, element, attrs) {
console.log(‘oo’,attrs,scope[attrs.formatter])
var opt = {
chart:{
renderTo:element[0],
type:’line’,
marginRight:130,
marginBottom:40
},
title:{
text:attrs.title,
x:-20 //center
},
subtitle:{
text:attrs.subtitle,
x:-20
},
xAxis:{
tickInterval:1,
title:{
text:attrs.xname
}
},
plotOptions:{
lineWidth:0.5
},
yAxis:{
title:{
text:attrs.yname
},
tickInterval:(attrs.yinterval)?new Number(attrs.yinterval):null,
max:attrs.ymax,
min: attrs.ymin
},
tooltip:{
formatter:scope[attrs.formatter]||function () {
return ‘‘ + this.y + ‘‘
}
},
legend:{
layout:’vertical’,
align:’right’,
verticalAlign:’top’,
x:-10,
y:100,
borderWidth:0
},
series:[
{
name:’Laravel’,
data:[7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
}
]
}
//Update when charts data changes
scope.$watch(function (scope) {
return JSON.stringify({
xAxis:{
categories:scope[attrs.xdata]
},
series:scope[attrs.ydata]
});
}, function (news) {
news = JSON.parse(news)
if (!news.series)return;
angular.extend(opt,news)
console.log(‘opt.xAxis.title.text’,opt)
var chart = new Highcharts.Chart(opt);
});
}
}
})
[/php]