Angular Highcharts Application PHP MySQLi

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

READ :  Angular Dynamic Counter Update value

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


    <title>Highcharts and AngularJS Chart Examples</title>


    <div></div>
    <a href="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.3/angular.js">https://ajax.googleapis.com/ajax/libs/angularjs/1.0.3/angular.js</a>
    <a href="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js">http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js</a>
    <a href="http://code.highcharts.com/highcharts.js">http://code.highcharts.com/highcharts.js</a>
    <a href="http://chart.js">http://chart.js</a>
    
        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
            })
    })
    


chart.js

angular.module('AngularChart', []).directive('chart', function () {
    return {
        restrict:'E',
        template:'<div></div>',
        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 '<b>' + this.y + '</b>'
                    }
                },
                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);
            });
        }
    }

})

View Demo

Leave a Reply

Your email address will not be published. Required fields are marked *