Related
I have developed a very simple column chart from a json three dimensional array:
0: timestamp in millliseconds
1:given recognition
2:received recognition
[[1490288274653,7,175],[1490374674653,1,1],[1490806674653,1,1],[1490979474653,3,3],[1491065874653,4,4],[1491411474653,6,0],[1491497874653,2,0],[1491584274653,18,0],[1491843474653,8,0],[1491929874653,1,0],[1492621074653,25,0],[1492707474653,12,0],[1492793874653,2,0],[1501174674653,2,0],[1503593874653,2,2],[1510765074653,1,0],[1510851474653,1,1],[1510937874653,5,0],[1511197074653,7,3],[1511369874653,7,2],[1511542674653,1,0],[1511801874653,7,3],[1511974674653,1,0],[1512493074653,1,1],[1512665874653,2,2],[1512752274653,9,4],[1513184274653,2,2],[1513270674653,2,2],[1513616274653,3,0],[1513789074653,4,2],[1514912274653,1,0],[1515430674653,1,0]]
The array displays timestamp on the xAxis and given recognition on the y axis.
How do I create a stacked column with "received recognition" stacked on "given recognition" on the yAxis?
I have searched google for hours and I can't find an example that uses same json array like mine, without strings as catagories.
I assume I will have to customise series or plotOptions and identify the data columns via the number data[1], data[2]?
How will I achieve a similar column like this CSV column:
http://marialaustsen.com/columncsv.html
HTML:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>myGraph</title>
<!--
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" type="text/css" rel="stylesheet" />
-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link href="https://code.jquery.com/ui/1.12.0/themes/smoothness/jquery-ui.css" type="text/css" rel="stylesheet" />
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js" integrity="sha256-0YPKAwZP7Mp3ALMRVB2i8GXeEndvCq3eSl/WsAl1Ryk=" crossorigin="anonymous"></script>
<!-- <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.21/jquery-ui.min.js"></script>-->
<!-- Highcharts is already included in Highstock, so it is not necessary to load both. The highstock.js file is included in the package. -->
<script src="http://code.highcharts.com/stock/highstock.js"></script>
<!-- But the separate files can't run in the same page along with each other or with highcharts.js. So if stock or maps are required in the same page as each other or with basic Highcharts, they can be loaded as modules: -->
<script src="http://code.highcharts.com/modules/exporting.js"></script>
</head>
<body>
<div id="container" style="height: 400px; width: 100%"></div>
<script>
$(function() {
console.log($);
$.getJSON('http://localhost:3000/recognition', function(data) {
// Create the chart
window.chart = new Highcharts.StockChart({
chart: {
type: 'column',
renderTo: 'container'
},
legend: {
enabled: true,
},
tooltip: {
pointFormat: '<span style="color:{point.color}">\u25CF </span> <b>{point.series.name}: <b>{point.y}</b> ({point.percentage:.1f}%)<br/>',
valueSuffix: ' k',
shared: true,
},
series: [{
name: 'Brands',
data: data
}],
rangeSelector: {
selected: 1,
inputDateFormat: '%Y-%m-%d',
floating: true,
y: -75,
verticalAlign: 'bottom'
},
title: {
text: 'Team members received and sent recognition'
},
navigator: {
margin: 50
},
xAxis: {
type: 'datetime',
title: {
text: 'DATES'
}
},
yAxis: {
title: {
text: 'BRANDS'
}
},
plotOptions: {
column: {
stacking: 'normal'
}
},
}, function(chart) {
// apply the date pickers
setTimeout(function() {
$('input.highcharts-range-selector', $('#' + chart.options.chart.renderTo)).datepicker()
}, 0)
});
});
// Set the datepicker's date format
$.datepicker.setDefaults({
dateFormat: 'yy-mm-dd',
onSelect: function(dateText) {
chart.xAxis[0].setExtremes($('input.highcharts-range-selector:eq(0)').datepicker("getDate").getTime(), $('input.highcharts-range-selector:eq(1)').datepicker("getDate").getTime());
//this.onchange();
this.onblur();
}
});
});
</script>
</body>
</html>
You need to prepare your data - split it into 2 separate series:
series: (function() {
var series = [{
name: 'received recognition',
data: []
}, {
name: 'given recognition',
data: []
}];
data.forEach(function(p) {
series[0].data.push([p[0], p[1]]);
series[1].data.push([p[0], p[2]]);
});
return series;
})()
Live demo: http://jsfiddle.net/kkulig/88sr9ofn/
I do have a UI grid which displays the Group Name.
$scope.gridOptions = {
enableSorting : false,
columnDefs: [
{ name:'GroupName' ,enableCellEdit:false}
],
data: [
{ 'GroupName' : groupData}
]
};
For the data in UI grid , i am passing an Object array in the form of :
groupData = [{"GroupName": "Mathematicians"}{"GroupName":"Scientist"}]
But am not getting anything in the UI grid.
Thanks in advance
Some observations :
Your $scope.groupData is not having a valid JSON.
It should be $scope.groupData = [{"GroupName": "Mathematicians"},{"GroupName":"Scientist"}]
Your gridOptions object should be like this.
$scope.gridOptions = {
data: 'groupData',
enableSorting : false,
columnDefs: [{
field: 'GroupName',
displayName: 'Group Name',
name:'GroupName',
enableCellEdit:false
}]
};
DEMO
var app = angular.module('uigrid', ['ngTouch', 'ui.grid']);
app.controller('MainCtrl', ['$scope', function ($scope) {
$scope.gridOptions = {
data: 'groupData',
enableSorting : false,
columnDefs: [{
field: 'GroupName',
displayName: 'Group Name',
name:'GroupName',
enableCellEdit:false
}]
};
$scope.groupData = [{"GroupName": "Mathematicians"},{"GroupName":"Scientist"}]
}]);
</style> <!-- remove this, it is just for jsfiddle -->
<link rel="stylesheet" type="text/css" href="https://cdn.rawgit.com/angular-ui/bower-ui-grid/master/ui-grid.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular-touch.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular-animate.js"></script>
<script src="https://cdn.rawgit.com/angular-ui/bower-ui-grid/master/ui-grid.min.js"></script>
<style>
.grid {
width: 500px;
height: 250px;
}
<div ng-app="uigrid">
<div ng-controller="MainCtrl">
<div ui-grid="gridOptions" class="grid"></div>
</div>
</div>
You are nesting one level too deep when passing the data.
Instead of (the equivalent of):
data: [ {
GroupName: [
{ GroupName: 'Mathematicians' },
{ GroupName: 'Scientist' }
]
} ]
you just want to pass all the data in the data property, so you get:
data: groupData
I've been reading the examples of Angular UI-Grid b/c we want to use it in a project. I'm following the docs and examples here on stack. But I can not get my data to display in my table. I've created this plunk based on others, simplified for what I'm doing. I'm not sure why the data will not display?? Any help is appreciated.
http://plnkr.co/edit/jOOePX4X1BliOXdG95pC?p=preview
index.html
<html ng-app="myApp">
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.2/angular.js"> </script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.2/angular-touch.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.2/angular-animate.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-grid/3.2.5/ui-grid.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-grid/3.2.5/ui-grid.css" type="text/css">
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="style.css" type="text/css">
</head>
<body>
<div ng-controller="appController ">
<div ui-grid="gridOptions" ui-grid-edit ui-grid-row-edit ui-grid-cellNav class="mygrid" ></div>
</div>
<script src="app.js"></script>
</body>
</html>
app.js
var myApp = angular.module("myApp", ['ngTouch','ui.grid', 'ui.grid.edit', 'ui.grid.rowEdit', 'ui.grid.resizeColumns'])
myApp.controller("appController", ['$scope', '$http', '$q', '$interval', function ($scope, $http, $q, $interval) {
$scope.columns = [
{ name: 'colA', enableCellEdit: true},
{ name: 'colB', enableCellEdit: true },
{ name: 'colC', enableCellEdit: true },
{ name: 'colD', enableCellEdit: true },
{ name: 'colE', enableCellEdit: true },
{ name: 'colF', enableCellEdit: true }
];
$scope.gridOptions = {
enableCellEditOnFocus: false,
enableSorting: true,
enableGridMenu: true,
columnDefs: $scope.columns,
onRegisterApi: function(gridApi){
$scope.gridApi = gridApi;
gridApi.rowEdit.on.saveRow($scope, $scope.saveRow);
}
};
$scope.saveRow = function( rowEntity ) {
// create a fake promise - normally you'd use the promise returned by $http or $resource
console.log("record EDIT" + angular.toJson(rowEntity));
var promise = $q.defer();
$scope.gridApi.rowEdit.setSavePromise(rowEntity, promise.promise );
// fake a delay of 3 seconds whilst the save occurs, return error if gender is "male"
$interval( function() {
if(rowEntity.test_status === 'Active') {
console.log("accepting edit, b/c status is Active");
promise.resolve();
}else {
console.log("rejecting edit, b/c status is Inactive");
promise.reject();
}
}, 1000, 1);
};
$http.get('data.json')
.success(function(data) {
console.log("data == " + angular.toJson(data));
$scope.gridOptions.data = data;
});
}]);
JSON Data
[
{
"testA": "1","description": "test1","order": "1","test_status": "Active"
},
{
"testB": "2","description": "test2","order": "2","test_status": "Active"
},
{
"testC": "3","description": "test3","order": "3","test_status": "Active"
},
{
"testD": "4","description": "test4","order": "4","test_status": "Inactive"
},
{
"testE": "5","description": "test5","order": "5","test_status": "Active"
}
]
CSS
.mygrid {
width: 450px;
height: 150px;
}
The reason is actually, a simple one. Your column names in your columnDefs object don't match the json you're getting back from your $http call. Change
$scope.columns = [
{ name: 'colA', enableCellEdit: true},
{ name: 'colB', enableCellEdit: true },
{ name: 'colC', enableCellEdit: true },
{ name: 'colD', enableCellEdit: true },
{ name: 'colE', enableCellEdit: true },
{ name: 'colF', enableCellEdit: true }
];
to this:
$scope.columns = [
{ name: 'test', enableCellEdit: true},
{ name: 'description', enableCellEdit: true },
{ name: 'order', enableCellEdit: true },
{ name: 'test_status', enableCellEdit: true }
];
and make sure you change the value of the json data from "testA", "testB", "testC", etc to simply "test".
First of all, here is the image:
... and link to the live example.
Yes, the live example doesn't work, that's why I post the question to the SO.
Each item in the left column can have one or multiple colors, specified in the json file. In my example, the sky is blue, the sun is yellow, the grass is green, and the bike is blue and yellow. You can see it directly in the file itself.
What I want?
If I choose "blue" in the first dropdown and leave the second dropdown blank, then the table will show me the sky and the bike.
And if I choose "blue" in the first dropdown and "yellow" in the second, the table will show only the bike.
How it may be done?
Although I believe that live example is more comfortable to use, I also post all the code directly here.
index.html
<!doctype html>
<html ng-app="app">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular-touch.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/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="http://ui-grid.info/release/ui-grid.js"></script>
<link rel="stylesheet" href="http://ui-grid.info/release/ui-grid.css" type="text/css">
<link rel="stylesheet" href="app.css" type="text/css">
</head>
<body>
<div ng-controller="MainCtrl">
<br>
<br>
<button id='toggleFiltering' ng-click="toggleFiltering()" class="btn btn-success">Toggle Filtering</button>
<div id="grid1" ui-grid="gridOptions" class="grid"></div>
</div>
<script src="app.js"></script>
</body>
</html>
test.json
[
{
"name": "sky",
"color": {
"color1": "blue",
"color2": ""
}
},
{
"name": "sun",
"color": {
"color1": "yellow",
"color2": ""
}
},
{
"name": "grass",
"color": {
"color1": "green",
"color2": ""
}
},
{
"name": "john's bike",
"color": {
"color1": "blue",
"color2": "yellow"
}
}
]
app.css
.header-filtered {
color: blue;
}
app.js
var app = angular.module('app', ['ngAnimate', 'ngTouch', 'ui.grid']);
app.controller('MainCtrl', ['$scope', '$http', 'uiGridConstants', function ($scope, $http, uiGridConstants) {
$scope.gridOptions = {
enableFiltering: true,
onRegisterApi: function(gridApi){
$scope.gridApi = gridApi;
},
columnDefs: [
{ field: 'name', headerCellClass: $scope.highlightFilteredHeader },
// THE COLORS GOES HERE
{ field: 'color', filters: [
{
type: uiGridConstants.filter.SELECT,
selectOptions: [ { value: '1', label: 'blue' }, { value: '2', label: 'yellow' }, { value: '3', label: 'green'} ]
},
{
type: uiGridConstants.filter.SELECT,
selectOptions: [ { value: '1', label: 'blue' }, { value: '2', label: 'yellow' }, { value: '3', label: 'green'} ]
}
], cellFilter: 'mapColor', headerCellClass: $scope.highlightFilteredHeader},
]
};
$http.get('https://rawgit.com/johncja/b8bf0cf099f5437025a5/raw/42c80882674bd5700fd2bd399992e8eab9afb4a8/test.json')
.success(function(data) {
$scope.gridOptions.data = data;
data.forEach( function addDates( row, index ){
if (row.color==='blue') {
row.color = '1';
} else if (row.color==='yellow') {
row.color = '2';
} else if (row.color==='green') {
row.color = '3';
}
});
});
$scope.toggleFiltering = function(){
$scope.gridOptions.enableFiltering = !$scope.gridOptions.enableFiltering;
$scope.gridApi.core.notifyDataChange( uiGridConstants.dataChange.COLUMN );
};
}])
.filter('mapColor', function() {
var colorHash = {
1: 'blue',
2: 'yellow',
3: 'green'
};
return function(input) {
if (!input){
return '';
} else {
return colorHash[input];
}
};
});
I have use ag-grid earlier for exactly same as your requirements(wants a filtering options on column).
here is my code:
index.html
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<link rel="stylesheet" type="text/css" href="http://angular-ui.github.com/ng- grid/css/ng-grid.css" />
<link rel="stylesheet" type="text/css" href="style.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.min.js"></script>
<script type="text/javascript" src="http://angular-ui.github.com/ng-grid/lib/ng-grid.debug.js"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MyCtrl">
<div class="gridStyle" ng-grid="gridOptions"></div>
<div class="selectedItems">Selected ID:{{mySelections[0].id}}</div><br><br>
</body>
</html>
app.js
var app = angular.module('myApp', ['ngGrid']);
app.controller('MyCtrl', function($scope) {
$scope.mySelections = [];
$scope.myData = [{empno: 111, name: "Moroni", id: 1},
{empno: 222, name: "Tiancum", id: 2},
{empno: 333, name: "Jacob", id: 3},
{empno: 444, name: "Nephi", id: 4},
{empno: 555, name: "Akon", id: 5},
{empno: 666, name: "Enos", id: 6}];
$scope.gridOptions = {
data: 'myData',
selectedItems: $scope.mySelections,
multiSelect: false
};
});
Q1: I want to hide the id column in ng-grid.
Q2: After hiding the id column, may I get the id value when I select some row?
How can modify the code?
Hear is the plunk: Plunk demo
You can set visible: false right in the column definition:
$scope.gridOptions = {
data: 'myData',
selectedItems: $scope.mySelections,
multiSelect: false,
columnDefs: [
{field: 'empno', displayName: 'empno', visible:false},
{field:'name', displayName:'name'}
]
};
You can also hide the column dynamically by adding this code after you define the grid;
var pos = $scope.gridOptions.columnDefs.map(function (e) { return e.field; }).indexOf('yourFieldName');
if ($scope.basicAdmin || $scope.superAdmin)
$scope.gridOptions.columnDefs[pos].visible = true;
else
$scope.gridOptions.columnDefs[pos].visible = false;
The angularjs grid array is $scope.gridOptions.columnDefs. Change the gridOptions to the name of your grid.
Replace "yourFieldName" with whatever field you are wanting to hide. Next, put whatever condition you want to test.
This took some time to figure out. Hopefully, it will save others some time.
Just add below lines to configuration and it will work
columnDefs: [
{field: 'empno', displayName: 'empno'},
{field:'name', displayName:'name'}
]
To hide particular column in AngularJS UI grid we can use visible: false property like as shown below.
columnDefs: [
{ field: 'userid', visible: false, displayName: 'UserId' },
{ field: 'username', displayName: 'UserName' },
{ field: 'branch', displayName: 'Education' }
]
If you want to check it in complete example you need to write the code like as shown below
<html ng-app="myApp">
<head>
<title>Hide Particular Column in Angularjs UI Grid with Example</title>
<link rel="stylesheet" type="text/css" href="http://angular-ui.github.com/ng-grid/css/ng-grid.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.min.js"></script>
<script type="text/javascript" src="http://angular-ui.github.com/ng-grid/lib/ng-grid.debug.js"></script>
<style type="text/css">
.gridStyle {
border: 1px solid rgb(212,212,212);
width: 400px;
height: 210px
}
</style>
</head>
<body ng-controller="MyCtrl">
<div class="gridStyle" ng-grid="gridOptions"></div>
<script type="text/javascript">
var app = angular.module('myApp', ['ngGrid']);
app.controller('MyCtrl', function ($scope) {
$scope.mySelections = [];
$scope.myData = [{ userid: 1, username: "Anil Singh", branch:"B.tech" },
{ userid: 2, username: "Sunil", branch: "Msc" },
{ userid: 3, username: "Sushil", branch: "B.Tech" },
{ userid: 4, username: "Dilip", branch: "MBA" },
{ userid: 5, username: "Upendra", branch: "MD" },
{ userid: 6, username: "Reena", branch: "CA"}];
$scope.gridOptions = {
data: 'myData',
selectedItems: $scope.mySelections,
multiSelect: false,
columnDefs: [
{ field: 'userid', visible: false, displayName: 'UserId' },
{ field: 'username', displayName: 'UserName' },
{ field: 'branch', displayName: 'Education' } ]
};
});
</script>
</body>
</html>
We can use the following code after define the grid
if ($rootScope.CanDelete == false && $rootScope.CanEdit == false)
$scope.ConfigItemGrid.columnDefs[4].visible = false;
else
$scope.ConfigItemGrid.columnDefs[4].visible = true;
Use "hide: true" attribute as below in Angular 2, working fine for me:
columnDefs = [
{ headerName: "Make", hide: true, field: "make", editable: true, filter: 'text'},
{ headerName: "Model", field: "model", filter: 'text'},
{
headerName: "Price",
field: "price",
filter: 'number',
cellClass: 'rightJustify',
cellRenderer: function (params: any) {
return '$' + params.value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ","); //thanks http://stackoverflow.com/users/28324/elias-zamaria
}
}
];
I suggest adding 'visible: false' to the column definitions. If you choose not to specify it in columnDefs, when you post the row back to whatever your backend is, you may null out that field. That's what I've experienced.