I use this library to show charts in my AngularJS application and it works fine:
AngularJS charts
The only thing I could not get done is to show the legend. Does anyone know how to do it?
Use legend: {display: true} in options
DEMO
angular.module("app", ["chart.js"])
.controller("BarCtrl", function($scope) {
$scope.options = {legend: {display: true}};
$scope.commonEstimationStats = {
rates: [{
"direction": {
"id": 13,
"name": "health",
"type": 1
},
"points": 5
}, {
"direction": {
"id": 14,
"name": "education",
"type": 1
},
"points": 3
}]
};
$scope.labels = [];
$scope.data = [];
angular.forEach($scope.commonEstimationStats.rates, function(key, value) {
$scope.labels.push(key.direction.name);
$scope.data.push(key.points);
})
$scope.datasetOverride = [{
fill: true,
backgroundColor: [
"#66ff33",
"#36A2EB",
"#FFCE56"
]
}, {
fill: true,
backgroundColor: [
"#ffff00",
"#46BFBD",
"#FDB45C"
]
}];
});
<!DOCTYPE html>
<html ng-app="app">
<head>
<script data-require="jquery#*" data-semver="3.0.0" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.js"></script>
<script src="https://opensource.keycdn.com/angularjs/1.5.8/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.2.0/Chart.min.js"></script>
<script src="//cdn.jsdelivr.net/angular.chartjs/latest/angular-chart.min.js"></script>
</head>
<body>
<div ng-controller="BarCtrl">
<canvas id="bar" class="chart chart-pie" chart-data="data" chart-dataset-override="datasetOverride" chart-series="series" chart-labels="labels" chart-options="options"></canvas>
</div>
</body>
</html>
Related
My Index.html
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-route.js"></script>
<script src="client/delljson.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<body ng-app="myApp" ng-controller="myCtrl" style="background-color:orange;">
<h1><marquee width="40%" direction="right" >Resume</marquee></h1>
<a href='#!/main'>Press</a>
<div ng-view>
</div>
</body>
</html>
My Main.html
<div class="row">
<div class="col-md-4">
<h2><u>Personal Information</u></h2>
<p>{{deljson.personalInformation.name}}</p>
<p>{{deljson.personalInformation.dob}}</p>
<p>{{deljson.personalInformation.fatherName}}</p>
<p>{{deljson.personalInformation.gender}}</p>
<p>{{deljson.personalInformation.nationality}}</p>
<p>{{deljson.personalInformation.maritalStatus}}</p>
</div>
<div class="col-md-4">
<h3><u>Educational Information</u></h3>
<h4><u>SSLC</u></h4>
<p>{{deljson.educationInformation.sslc.institueName}}</p>
<p>{{deljson.educationInformation.sslc.studyBoard}}</p>
<p>{{deljson.educationInformation.sslc.percentage}}</p>
<p>{{deljson.educationInformation.sslc.yearOfPassedout}}</p>
<h4><u>HSC</u></h4>
<p>{{deljson.educationInformation.hsc.institueName}}</p>
<p>{{deljson.educationInformation.hsc.studyBoard}}</p>
<p>{{deljson.educationInformation.hsc.percentage}}</p>
<p>{{deljson.educationInformation.hsc.yearOfPassedout}}</p>
<h4><u>UG</u></h4>
<p>{{deljson.educationInformation.ug.institueName}}</p>
<p>{{deljson.educationInformation.ug.studyBoard}}</p>
<p>{{deljson.educationInformation.ug.percentage}}</p>
<p>{{deljson.educationInformation.ug.yearOfPassedout}}</p>
</div>
<div class="col-md-4">
<h3><u>Work Experience</u></h3>
<p>{{deljson.experience.previousExperience.companyName}}</p>
<p>{{deljson.experience.previousExperience.Position}}</p>
<p>{{deljson.experience.previousExperience.period}}</p>
<p>{{deljson.experience.previousExperience.responsibility}}</p>
</div>
</div>
My Js and Json File
var app = angular.module('myApp', ['ngRoute']);
app.config(['$routeProvider', function($routeProvider) {
$routeProvider.when('/main', {
templateUrl : 'main.html',
controller : 'first'
})
}]);
app.controller('first', ['$scope', '$locationProvider', function($scope){
$location.path("/main.html" );
}]);
app.controller('myCtrl', function($scope) {
$scope.deljson = {
"personalInformation": {
"name": "Raaj Kumar",
"dob": "13/5/1994",
"fatherName": "Suresh",
"gender": "Male",
"nationality": "Indian",
"maritalStatus": "Single"
},
"educationInformation": {
"sslc": {
"institueName": "G.K.S.V.V.J.C",
"studyBoard": "CBSE",
"percentage": "45%",
"yearOfPassedout": "2009"
},
"hsc": {
"institueName": "S.V.M.H.S.S",
"studyBoard": "Matriculation",
"percentage": "55%",
"yearOfPassedout": "2011"
},
"ug": {
"institueName": "S.T. Peter'S Engineering College",
"course": "B.Tech (It)",
"percentage": "59%",
"yearOfPassedout": "2016"
}
},
"experience": {
"previousExperience": {
"companyName": "Purple Soft Technology",
"Position": "SEO Analyst",
"period": "2018-19",
"responsibility": "SEO"
}
},
"personalSkills": [
"Gaming"
],
"technicalSkills": [
"Digital Marketing",
"HTML",
"CSS",
"JS"
]
}
});
The Objective is to make a anchor text and link the main ,html to it and when clicked it should display the main.html in my ng-view.
I tried many methods watching the you tube but its not working out. the ng-view is displaying a template but its not displaying an template url.
I have solved the problem, but there was numerous errors in the code (missing doctype, divs without end tags and so on), so I have recoded a lot of it. I have taken out the $locationprovider, IMO its not so great a feature, people cant bookmark the page,(unless you make a lot of changes in ie. HTACCESS). So I dont like it.
I have also updated angularjs to 1.7.8.
If you want to use locationprovider, please note that there was some changes to it when upgrading to 1.7.8.
INDEX.HTML
<!DOCTYPE html>
<html ng-app="myApp">
<meta charset="utf-8" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.8/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.8/angular-route.js"></script>
<script src="/client/delljson.js"></script>
<link
rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css"
/>
<link
rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css"
/>
<body ng-controller="myCtrl" style="background-color:orange;">
<h1><marquee width="40%" direction="right">Resume</marquee></h1>
Press
<ng-view></ng-view>
</body>
</html>
AngularJS
var app = angular.module('myApp', ['ngRoute']);
app.controller('first', function($scope){
});
app.config(function($routeProvider) {
$routeProvider.when('/main', {
templateUrl : 'main.html',
controller:'first'
}).
otherwise({
redirectTo: '/'
});
});
app.controller('myCtrl', function($scope) {
$scope.deljson = {
"personalInformation": {
"name": "Raaj Kumar",
"dob": "13/5/1994",
"fatherName": "Suresh",
"gender": "Male",
"nationality": "Indian",
"maritalStatus": "Single"
},
"educationInformation": {
"sslc": {
"institueName": "G.K.S.V.V.J.C",
"studyBoard": "CBSE",
"percentage": "45%",
"yearOfPassedout": "2009"
},
"hsc": {
"institueName": "S.V.M.H.S.S",
"studyBoard": "Matriculation",
"percentage": "55%",
"yearOfPassedout": "2011"
},
"ug": {
"institueName": "S.T. Peter'S Engineering College",
"course": "B.Tech (It)",
"percentage": "59%",
"yearOfPassedout": "2016"
}
},
"experience": {
"previousExperience": {
"companyName": "Purple Soft Technology",
"Position": "SEO Analyst",
"period": "2018-19",
"responsibility": "SEO"
}
},
"personalSkills": [
"Gaming"
],
"technicalSkills": [
"Digital Marketing",
"HTML",
"CSS",
"JS"
]
}
});
I am using https://wix.github.io/angular-tree-control/#multi-selection to work on tree structure example.I am not getting the expected result in a proper format.Below is the code and also attached plunkr to it.
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://wix.github.io/angular-tree-control/angular-tree-control.js"></script>
<link href="https://wix.github.io/angular-tree-control/css/tree-control.css" />
<link href="https://wix.github.io/angular-tree-control/css/tree-control-attribute.css" />
</head>
<div ng-app="app">
<div ng-controller="myController">
<treecontrol class="tree-classic"
tree-model="dataForTheTree"
options="treeOptions"
on-selection="showSelected(node)"
selected-node="node1">
employee: {{node.name}} age {{node.age}}
</treecontrol>
</div>
</div>
angular.module('app', ['treeControl'])
.controller('myController', function() {
$scope.treeOptions = {
nodeChildren: "children",
dirSelectable: true,
injectClasses: {
ul: "a1",
li: "a2",
liSelected: "a7",
iExpanded: "a3",
iCollapsed: "a4",
iLeaf: "a5",
label: "a6",
labelSelected: "a8"
}
}
$scope.dataForTheTree =
[
{ "name" : "Joe", "age" : "21", "children" : [
{ "name" : "Smith", "age" : "42", "children" : [] },
{ "name" : "Gary", "age" : "21", "children" : [
{ "name" : "Jenifer", "age" : "23", "children" : [
{ "name" : "Dani", "age" : "32", "children" : [] },
{ "name" : "Max", "age" : "34", "children" : [] }
]}
]}
]},
{ "name" : "Albert", "age" : "33", "children" : [] },
{ "name" : "Ron", "age" : "29", "children" : [] }
];
});
Here is the attached plunkr https://plnkr.co/edit/bQHOIQ2HDPr4WJaukB8I?p=preview
I noticed that two things are missing:
The context-menu module is missing.
There is no rel="stylesheet" in added CSS links.
Even though angular-tree-control readme says:
Include context-menu module if you're going to use menu-id attribute
I found issues reported in their GitHub page like this one, which is due to missing context-menu module.
Add following line to include context-menu module:
<script type="text/javascript" src="https://wix.github.io/angular-tree-control/context-menu.js"></script>
Also please update link elements to include rel attribute like follows:
<link rel="stylesheet" href="https://wix.github.io/angular-tree-control/css/tree-control.css" />
<link rel="stylesheet" href="https://wix.github.io/angular-tree-control/css/tree-control-attribute.css" />
There is no need to add CSS as in Plunker which is the duplicate of above links.
Hope this fixes your issues. Here is the full code of a working example:
angular.module('app', ['treeControl'])
.controller('myController', ['$scope', function($scope) {
$scope.treeOptions = {
nodeChildren: "children",
dirSelectable: true,
injectClasses: {
ul: "a1",
li: "a2",
liSelected: "a7",
iExpanded: "a3",
iCollapsed: "a4",
iLeaf: "a5",
label: "a6",
labelSelected: "a8"
}
}
$scope.dataForTheTree = [{
"name": "Joe",
"age": "21",
"children": [{
"name": "Smith",
"age": "42",
"children": []
},
{
"name": "Gary",
"age": "21",
"children": [{
"name": "Jenifer",
"age": "23",
"children": [{
"name": "Dani",
"age": "32",
"children": []
},
{
"name": "Max",
"age": "34",
"children": []
}
]
}]
}
]
},
{
"name": "Albert",
"age": "33",
"children": []
},
{
"name": "Ron",
"age": "29",
"children": []
}
];
}]);
treecontrol.tree-classic li .full {
display: none;
}
treecontrol.tree-classic li .empty {
display: inline;
}
treecontrol.tree-classic li .tree-selected .full {
display: inline;
}
treecontrol.tree-classic li .tree-selected .empty {
display: none;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="https://wix.github.io/angular-tree-control/angular-tree-control.js"></script>
<script type="text/javascript" src="https://wix.github.io/angular-tree-control/context-menu.js"></script>
<link rel="stylesheet" href="https://wix.github.io/angular-tree-control/css/tree-control.css" />
<link rel="stylesheet" href="https://wix.github.io/angular-tree-control/css/tree-control-attribute.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
</head>
<body ng-app="app">
<div ng-controller="myController">
<treecontrol class="tree-classic" tree-model="dataForTheTree" options="treeOptions" on-selection="showSelected(node)" selected-node="node1">
<span class="fa fa-square-o empty"></span>
<span class="fa fa-square full"></span> employee: {{node.name}} age {{node.age}}
</treecontrol>
</div>
</body>
</html>
UPDATE on 10/08/2018: edited the code snippet to add checkboxes using FontAwsome.
Hi Guys facing one issue in angular chart. I am using a Chart where I want to show scale value even if user select all legend.
When no legend is selected
when Legend is selected
Here is the HTML :
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<link rel="stylesheet" href="style.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<script data-require="chartjs#*" data-semver="2.2.1" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.2.1/Chart.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/angular.chartjs/latest/angular-chart.min.js"></script>
<script src="script.js"></script>
</head>
<body ng-controller="MainCtrl">
<h1>Stacked Bar Chart</h1>
<canvas class="chart chart-bar" chart-type="type" chart-data="data" chart-labels="labels"
chart-series="series" chart-options="options" chart-colors="colors">
</canvas>
</body>
</html>
and the javascript
var app = angular.module('plunker', ['chart.js']);
app.controller("MainCtrl", function($scope) {
$scope.labels = ["Jan", "Feb", "Mars", "Apr", "May", "Jun",
"Jul","Aug","Sep","Oct","Nov","Dec"
];
$scope.type = "bar";
$scope.series = ['Series A', 'Series B'];
$scope.options = {
title: {
display: true,
text: "Chart.js Bar Chart - Stacked"
},
tooltips: {
intersect: true
},
scales: {
xAxes: [{
barThickness: 15,
categoryPercentage: 0.1,
stacked: true,
ticks: {
autoSkip: false
},
scaleLabel: {
display: true,
labelString: "Process Area"
},
gridLines: {
display: false
}
}],
yAxes: [{
stacked: true,
categorySpacing: 0,
display: true,
maxBarThickness: 0,
position: 'left',
ticks: {
beginAtZero: true
},
scaleLabel: {
display: true,
labelString: "# of Corrective Action"
}
}]
},
elements: {
line: {
fill: false
}
},
legend: {
display: true,
position: 'bottom',
labels: {
boxWidth: 15
}
}
};
$scope.data = [
[65, 59, 90, 81, 56, 55, 40,10,60,90,84,63],
[28, 48, 40, 19, 96, 27, 100,50,40,90,31,70]
];
$scope.colors = ['#00ADF9'];
});
Plunker demo : http://plnkr.co/edit/OXpRBqngdimzxDp1t7Qh?p=preview
For Reference
I want to show same scale value what I have when no legend is selected.
I have a ui-grid containing two columns firstName and lastName. I set the background-color to blue on the first column (firstName ). If i click on the lastName header column i want to change the lastName column to blue and the firstName column to normal.
I have looked and searched with google but could not find an example on that.
How can I do that?
Here is my app.js
var app = angular.module('app', ['ngTouch', 'ui.grid']);
app.controller('MainCtrl', [
'$scope','uiGridConstants', function($scope, uiGridConstants) {
$scope.gridOptions = {
columnDefs: [{
name: 'firstName',
field: 'firstName',
displayName: 'voornaam',
width: 200,
cellClass: 'columnClassName'
}, {
name: 'lastName',
field: 'lastName',
displayName: 'achternaam',
width: 200
}],
data: [{
"firstName": "Cox",
"lastName": "Carney",
"company": "Enormo",
"employed": true
}, {
"firstName": "Lorraine",
"lastName": "Wise",
"company": "Comveyer",
"employed": false
}, {
"firstName": "Nancy",
"lastName": "Waters",
"company": "Fuelton",
"employed": false
}]
};
$scope.loadData = function() {
console.log("clicked");
}
}
]);
Here is my html
<!doctype html>
<html ng-app="app">
<head>
<link rel="stylesheet" type="text/css" href="css/style.css">
<link rel="stylesheet" type="text/css" href="css/ui-grid.css">
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular-touch.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular-animate.js"></script>
<script src="http://ui-grid.info/docs/grunt-scripts/csv.js"></script>
<script src="http://ui-grid.info/docs/grunt-scripts/pdfmake.js"></script>
<script src="http://ui-grid.info/docs/grunt-scripts/vfs_fonts.js"></script>
<script src="js/ui-grid.js"></script>
<!-- <script src="/release/ui-grid.css"></script> -->
<script src="js/app.js"></script>
</head>
<body>
<div ng-controller="MainCtrl as ctrl">
<div id="grid" ui-grid="gridOptions" class="grid"></div>
</div>
</body>
</html>
Here is my css
.grid {
width: 500px;
height: 250px;
}
.red {
color: white; background-color: gray !important;
}
.my-css-class {
color: blue
}
.columnClassName[aria-sort="ascending"], .columnClassName[aria-sort="descending"] {
background-color: blue !important;
}
You can use plain old CSS,
When clicking on a header an attribute is added to it:
aria-sort="ascending" or aria-sort="descending"
. sortable[aria-sort="ascending"], . sortable[aria-sort="descending"] {
background-color: blue;
}
I tried implementing the Kendo spreadsheet widget using angular directive but it does not show up.
Here is my code:
HTML:
<div kendo-spreadsheet style="height:580px;" k-options="spreadsheetOptions"></div>
Controller:
$scope.spreadsheetOptions = {
sheets: [{
name: "Food Order",
mergedCells: [
"A1:G1"
],
rows: [{
height: 70,
cells: [{
value: "My Company", fontSize: 32, textAlign: "center"
}]
}],
}],
excel: {
fileName: "Order.xlsx"
}
};
No errors shown in the console either. Any ideas?
Kendo Angular Spreadsheet directive works. Please see below example. You can also paste below example in html file.
<!DOCTYPE html>
<html>
<head>
<base href="https://demos.telerik.com/kendo-ui/grid/angular">
<style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
<title></title>
<link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.1.226/styles/kendo.common-bootstrap.min.css" />
<link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.1.226/styles/kendo.bootstrap.min.css" />
<script src="//kendo.cdn.telerik.com/2016.1.226/js/jquery.min.js"></script>
<script src="//kendo.cdn.telerik.com/2016.1.226/js/angular.min.js"></script>
<script src="//kendo.cdn.telerik.com/2016.1.226/js/kendo.all.min.js"></script>
</head>
<body>
<div id="example" ng-app="KendoDemos">
<div ng-controller="MyCtrl">
<div kendo-spreadsheet style="width:100%" k-options="spreadsheetOptions"></div>
</div>
</div>
<script>
angular.module("KendoDemos", [ "kendo.directives" ])
.controller("MyCtrl", function($scope){
$scope.spreadsheetOptions = {
sheets: [{
name: "Food Order",
mergedCells: [
"A1:G1"
],
rows: [{
height: 70,
cells: [{
value: "My Company", fontSize: 32, textAlign: "center"
}]
}],
}],
excel: {
fileName: "Order.xlsx"
}
};
})
</script>
</body>
</html>