Integrating TinyMCE with AngularJS

First we need AngularJS. After that we need to download TinyMCE. Extract it and upload all the data to javascript folder.

<!DOCTYPE html>
<html>
<head>
	<title>TinyMCE</title>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
	<!-- TinyMCE -->
	<script src="js/tinymce/tinymce.min.js"></script>
	<script src="js/angular-tinymce.min.js"></script>
	<script src="js/tinymce.js"></script>
</head>
<body ng-app="myApp">
<div ng-controller="MainController">
		<textarea value="{{News.News}}" ui-tinymce="tinymceOptions" ng-model="News.News"></textarea></div>
</body>
</html>

This is tinymce.js

var app = angular.module('myApp', ['ui.tinymce']);

app.controller('MainController', function($scope) {
	$scope.tinymceModel = '';

	$scope.getContent = function() {
		console.log('Editor content:', $scope.tinymceModel);
	};

	$scope.setContent = function() {
		$scope.tinymceModel = 'Time: ' + (new Date());
	};

	$scope.tinymceOptions = {
		plugins: 'link image code',
		toolbar: 'undo redo | bold italic | alignleft aligncenter alignright | code',
		height : '250'
	};
});

Result:

tinymce

Source:
https://github.com/angular-ui/ui-tinymce

Advertisements

Integrating ChartJS with AngularJS

First we need AngularJS and ChartJS library.

<!DOCTYPE html>
<html>
<head>
	<title>Pie Chart</title>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<script src="http://jtblin.github.io/angular-chart.js/node_modules/angular/angular.min.js"></script>
	<script src="http://jtblin.github.io/angular-chart.js/node_modules/chart.js/dist/Chart.min.js"></script>
	<script src="http://jtblin.github.io/angular-chart.js/dist/angular-chart.js"></script>
	<script src="js/pie_chart.js"></script>
</head>
<body ng-app="app" ng-controller="PieCtrl">
	<canvas id="pie" class="chart chart-pie" chart-data="data" chart-labels="labels" chart-options="options">
</canvas>
</body>
</html>

This is for pie_chart.js

angular.module("app", ["chart.js"]).controller("PieCtrl", function ($scope) {
  $scope.labels = ["Download Sales", "In-Store Sales", "Mail-Order Sales"];
  $scope.data = [300, 500, 100];
});

Result:

pie-chart-chartjs

Source:
http://jtblin.github.io/angular-chart.js/

Integrating ZingChart with AngularJS

First we need AngularJS and ZingChart library.

<html>
<head>
    <title>Pie Chart</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    		<link rel="stylesheet" href="css/pie_chart.css">
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
    <script src="https://cdn.zingchart.com/zingchart.min.js"></script>
    <script src="https://cdn.zingchart.com/angular/zingchart-angularjs.js"></script>
    <script src="js/pie_chart.js"></script>
</head>
<body ng-app="myApp">
<div ng-controller="MainController">
<div zingchart id="chart-1" zc-json="myJson" zc-width="100%" zc-height="568px"></div>
</div>
</body>
</html>

This is the pie_chart.js

var app = angular.module('myApp', ['zingchart-angularjs']);

app.controller('MainController', function($scope) {
    $scope.myJson = {
        globals: {
            shadow: false,
            fontFamily: "Verdana",
            fontWeight: "100"
        },
        type: "pie",
        backgroundColor: "#fff",

        legend: {
            layout: "x5",
            position: "50%",
            borderColor: "transparent",
            marker: {
                borderRadius: 10,
                borderColor: "transparent"
            }
        },
        tooltip: {
            text: "%v requests"
        },
        plot: {
            refAngle: "-90",
            borderWidth: "0px",
            valueBox: {
                placement: "in",
                text: "%npv %",
                fontSize: "15px",
                textAlpha: 1
            }
        },
        series: [{
            text: "10.0.0.80",
            values: [4660],
            backgroundColor: "#FA6E6E #FA9494"
        }, {
            text: "167.114.156.198",
            values: [1807],
            backgroundColor: "#F1C795 #feebd2"
        }, {
            text: "103.24.77.25",
            values: [1611],
            backgroundColor: "#FDAA97 #FC9B87"
        }, {
            text: "46.4.68.142",
            values: [1341],
            backgroundColor: "#28C2D1"
        }, {
            text: "10.0.0.117",
            values: [1269],
            backgroundColor: "#D2D6DE"
        }]
    };
});

The result:

pie-chart