angularjs charts example

angularjs charts example mvc 5

<!DOCTYPE html>
<html ng-app="chartApp">
<head>
    <meta charset="utf-8" />
    <title>angularjs charts</title>
    <style>
        .chartCSS {
            width: 500px;
            height: 300px;
        }
    </style>
    <script data-require="[email protected]" src="http://code.angularjs.org/1.2.2/angular.js" data-semver="1.2.2"></script>
    <script data-require="[email protected]*" data-semver="3.3.11" src="//cdnjs.cloudflare.com/ajax/libs/d3/3.3.11/d3.js"></script>
    <script type="text/javascript" src="https://rawgit.com/chinmaymk/angular-charts/bower/dist/angular-charts.min.js"></script>
    <script>
        angular.module('chartApp', ['angularCharts']);

        function mainController($scope) {

            $scope.config = {
                title: 'Total cast of www.code-sample.com',
                tooltips: true,
                labels: false,
                mouseover: function () { },
                mouseout: function () { },
                click: function () { },
                legend: {
                    display: true,
                    position: 'left'
                }
            };

            $scope.dataSorce = {
                series: ['MyIncome', 'MyExpense'],
                data: [{
                    x: "2014",
                    y: [1000, 500, 90],
                    tooltip: "Years : 2014"
                }, {
                    x: "2015",
                    y: [300, 100, 100],
                    tooltip: "Years : 2015"
                }, {
                    x: "2016",
                    y: [351],
                    tooltip: "Years : 2016"
                }, {
                    x: "2017",
                    y: [54, 70, 879],
                    tooltip: "Years : 2017"
                }]
            };
        }
    </script>
</head>

<body ng-controller="mainController">
    <div data-ac-chart="'bar'" data-ac-data="dataSorce" data-ac-config="config" class="chartCSS">
    </div>
</body>

</html>


The out put look like the below image




For more detail, below link might help you

ANIL SINGH

Hey! I'm Anil Singh. I author this blog. I'm Active Blogger, Programmer. I love learning new technologies, programming, blogging and participating the forum discussions more...
My Blogs - http://www.code-sample.com and http://www.code-sample.xyz
My Books - Google Amazon and Flipkart Book Store!

You Might Also Like
Post a Comment
www.code-sample.com/. Powered by Blogger.
ASK Questions
SQL Server NodeJs TypeScript JavaScript Angular SQL Server My Book