As mentioned in title, how to change line size below the chart?
xAxis: {
categories: ['March', 'April', 'May', 'June'],
labels: {
style: {
color: 'black',
fontSize:'15px'
},
formatter: function(){
return '<span style="margin-right: 9px">' + this.chart.series[0].options.stack + '</span><span>' + this.chart.series[1].options.stack +
'</span><br /><div style="text-align:center"> <br />' + this.value + '</div> '
},
useHTML: true
}
This is what i have currently
This is what i want
Change the xAxis.tickLenght
xAxis: {
tickLength: 50
},
Fiddle
I'm facing a problem with a column of my datatable where I have for some rows a button to edit something. So to do this I create this button <button ng-click="setActiveTab()">SetActiveTab</button>'; inside the columns of my datatableOptions and when I click on the button an alert should pop up
controllerScope.datatableOptions = {
ajax: {
url: '/api/organizations/' + $rootScope.user.organization_id + '/devices',
dataSrc: '',
beforeSend: function (xhr) {
xhr.setRequestHeader("Authorization", AuthService.authToken());
}
},
columns: [{
"data": null,
"orderable": true,
"type": "boolean-sort-asc",
"render": function (data) {
if (data.data.status) {
return '<span class="badge bg-success" data-sort="1" style="width:21px;"> </span>';
} else {
return '<span class="badge bg-danger" data-sort="0" style="width:21px;"> </span>';
}
}
},
{
"data": null,
"orderable": false,
"render": function (data) {
//return '<a ui-sref="app.dashboarddevice({id:\"' + data.id + '\"})">' + data.data.name + '</a>';
return '<a class="state-link" data-state-id="' + data.id + '">' + data.data.name + '</a>';
}
},
{
"data": "data.sn",
"defaultContent": ""
},
{
"data": "modified_date",
render: function (data, type, row) {
return $filter('date')(row.modified_date, 'dd-MM-yyyy HH:mm:ss');
}
},
{
"data": "data.last_seen",
render: function (data, type, row) {
return $filter('date')(row.data.last_seen, 'dd-MM-yyyy HH:mm:ss');
}
},
{
"data": "model",
"defaultContent": ""
},
{
"data": "network_data.name",
"defaultContent": ""
},
{
"data": "data.clients",
"defaultContent": ""
},
{
"data": null,
"orderable": false,
"render": function (data) {
var icon = "";
if (data.data.consumptions_alert != undefined && data.data.consumptions_alert == true) {
//return icon = '<center><a class="state-link" data-state-id="' + data.id + '"><i style="color:#ff0000; width:21px; height:21px" title="Consumptions threshold exceed" class="fa fa-warning"></i></a></center>';
icon += '<a class="state-link" data-state-id="' + data.id + '" ng-click="setActiveTab(\'consumptions\')"><i style="color:#ff0000; width:21px; height:21px" title="Consumptions threshold exceed" class="fa fa-warning"></i></a>';
}
if (data.data.cpuLoad_alert == true || data.data.disk_alert == true || data.data.ram_alert == true || data.data.temperatures_alert == true) {
icon += '<button ng-click="setActiveTab()">SetActiveTab</button>';
}
icon = "<center>" + icon + "</center>";
return icon;
}
},
],
lengthMenu: [25, 50, 100, 150],
order: [
[0, 'desc']
]
};
};
$scope.setActiveTab = function () {
alert("clicked set");
}
Use JsFiddle link as provided. you have to include $windows in your controller
https://jsfiddle.net/Prasanna15/wL9v8nj9/
app.controller('ctrlName', function($scope, $windows){
//code
})
I have an agular ui-grid and dropdowns in its cells. Why my dropdown doesn't show on click?
var columnDefs1 = [
{ name: 'firstName'},
{ name: 'lastName'},
{ name: 'company'},
{ name: 'employed'},
{ name: '#',
cellTemplate:
'<div class="dropdown">' +
'<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">' +
'Dropdown' +
'<span class="caret"></span>' +
'</button>' +
'<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">' +
'<li>Action</li>' +
'<li>Another action</li>' +
'<li>Something else here</li>' +
'<li role="separator" class="divider"></li>' +
'<li>Separated link</li>' +
'</ul>' +
'</div>'
}
];
http://plnkr.co/edit/4Hnmxl?p=preview
full description from ui grid developer http://brianhann.com/ui-grid-and-dropdowns/
u should describe needed columns as required
columnDefs: [
{ name: 'name' },
{ name: 'age', type: 'number' },
{
name: 'gender',
editableCellTemplate: 'uiSelect',
editDropdownOptionsArray: [
'male',
'female',
'other'
]
}
]
and here is a working sample : http://plnkr.co/edit/ckQhv5bWha2jte5wDBI1?p=preview
Here is a website, on which user can control device via browser. The communication between the browser and middlewire is via signalr. The problem here is: when new message from signalr hub reached, I rebind the data to the collection, but the page didn't get refreshed.
Here is the directive:
//主框架
app.directive('mainPart',['$compile',function ($compile) {
return {
restrict: 'AE',
replace: true,
scope: { options: "=" },
link: function(scope, element, attrs) {
scope.$watchCollection('options', function (newValue, oldValue) {
console.log("I see a data change!");
});
},
template: '<div class="panel panel-info" style="margin:10px 10px 10px 10px">'
+ ' <div class="panel-heading">'
+ ' <h3 class="panel-title glyphicon glyphicon-user"><strong>{{options.title}}</strong></h3>'
+ ' </div>'
+ ' <div class="panel-body">'
+ ' <controller-part options="options.controller"></controller-part>'
+ ' <led-part options="options.led"></led-part>'
+ ' </div>'
+ '</div>'
};
}]);
//可控制的控制器部分
app.directive('controllerPart', function () {
return {
restrict: 'AE',
replace: true,
scope: { options: "=options" },
template: '<div class="panel panel-default">'
+ ' <div class="panel-heading">'
+ ' <h3 class="panel-title">控制器部分</h3>'
+ ' </div>'
+ ' <div class="panel-body">'
+ ' <controller-instance options="options"></controller-instance>'
+ ' </div>'
+ '</div>'
};
});
//不可控制的指示灯部分
app.directive('ledPart', function () {
return {
restrict: 'AE',
replace: true,
scope: { options: "=options" },
template: '<div class="panel panel-default">'
+ ' <div class="panel-heading">'
+ ' <h3 class="panel-title">指示灯部分</h3>'
+ ' </div>'
+ ' <div class="panel-body">'
+ ' <led-instance options="options"></led-instance>'
+ ' </div>'
+ '</div>'
};
});
//控制器具体的路数
app.directive('controllerInstance', function () {
return {
restrict: 'AE',
replace: true,
scope: { options: "=options" },
template: '<div class="panel panel-success" style="float:left;margin-left:20px;" ng-repeat="controller in options">'
+ ' <div class="panel-heading">'
+ ' <h3 class="panel-title">{{controller.title}}(在线)</h3>'
+ ' </div>'
+ ' <div class="panel-body">'
+ ' <div class="btn-group" role="group">'
+ ' <button type="button" ng-repeat="function in controller.functionlist" tag="{{function.functionorder}}" class="btn {{function.state|onlineConverter}} glyphicon {{function.functionicon}}">{{function.functionname}}</button>'
//+ ' <button type="button" class="btn btn-default glyphicon glyphicon-off">停止</button>'
//+ ' <button type="button" class="btn btn-default glyphicon glyphicon-chevron-up btn-success">正转</button>'
//+ ' <button type="button" class="btn btn-default glyphicon glyphicon-chevron-down">反转</button>'
+ ' </div>'
+ ' </div>'
+ '</div>'
};
});
//指示器具体的路数
app.directive('ledInstance', function () {
return {
restrict: 'AE',
replace: true,
scope: { options: "=options" },
template: '<div class="panel panel-success" style="float:left;margin-left:20px;" ng-repeat="led in options">'
+ ' <div class="panel-heading">'
+ ' <h3 class="panel-title">{{led.title}}(在线)</h3>'
+ ' </div>'
+ ' <div class="panel-body">'
+ ' <div class="btn-group" role="group">'
+ ' <button type="button" ng-repeat="function in led.functionlist" tag="{{function.functionorder}}" class="btn {{function.state|onlineConverter}} glyphicon {{function.functionicon}}">{{function.functionname}}</button>'
//+ ' <button type="button" class="btn btn-success glyphicon glyphicon-eye-close">灭</button>'
//+ ' <button type="button" class="btn btn-default glyphicon glyphicon-eye-open">亮</button>'
+ ' </div>'
+ ' </div>'
+ '</div>'
};
});
//此过滤器主要是为了过滤工作状态的，将true和false转变为具体的css样式。
app.filter('onlineConverter', function () {
return function (input) {
if (input) {
return "btn-success";
}
else {
return "btn-default";
}
}
});
Here is the Service part:
app.service('dataService', function () {
var getData = function () {
/*
数据结构中的state代表当前路是否是工作状态
*/
var controllerData =
{
title: '中国联通对接设备',
controller: [{
title: '风机',
functionlist: [{ functionname: '停止', functionicon: 'glyphicon-off', functionorder: '0', state: true }, { functionname: '正转', functionicon: 'glyphicon-chevron-up', functionorder: '1', state: false }, { functionname: '反转', functionicon: 'glyphicon-chevron-down', functionorder: '2', state: false }]
}, {
title: '湿帘',
functionlist: [{ functionname: '停止', functionicon: 'glyphicon-off', functionorder: '0', state: false }, { functionname: '正转', functionicon: 'glyphicon-chevron-up', functionorder: '1', state: false }, { functionname: '反转', functionicon: 'glyphicon-chevron-down', functionorder: '2', state: true }]
}, {
title: '暖灯',
functionlist: [{ functionname: '停止', functionicon: 'glyphicon-off', functionorder: '0', state: false }, { functionname: '高光', functionicon: 'glyphicon-chevron-up', functionorder: '1', state: true }, { functionname: '低光', functionicon: 'glyphicon-chevron-down', functionorder: '2', state: false }]
}],
led: [{
title: '电源',
functionlist: [{ functionname: '灭', functionicon: 'glyphicon-eye-close', functionorder: '0', state: false }, { functionname: '亮', functionicon: 'glyphicon-eye-open', functionorder: '1', state: true }]
}, {
title: '转轴',
functionlist: [{ functionname: '正转', functionicon: 'glyphicon-eye-close', functionorder: '0', state: true }, { functionname: '反转', functionicon: 'glyphicon-eye-open', functionorder: '1', state: false }]
}, {
title: '浇灌',
functionlist: [{ functionname: '关闭', functionicon: 'glyphicon-eye-close', functionorder: '0', state: true }, { functionname: '打开', functionicon: 'glyphicon-eye-open', functionorder: '1', state: false }]
}, {
title: '电压',
functionlist: [{ functionname: '正常', functionicon: 'glyphicon-eye-close', functionorder: '0', state: true }, { functionname: '异常', functionicon: 'glyphicon-eye-open', functionorder: '1', state: false }]
}]
};
return controllerData;
}
return {
controllerData: getData,
};
});
app.service('hubService', ['dataService', function (dataService) {
//添加对自动生成的Hub的引用
var chat = $.connection.chatHub;
//启动链接
$.connection.hub.start().done(function () { });
var getData = function () {
return dataService.controllerData();
}
return {
commandReceived: function(callback)
{
if(callback)
{
//调用Hub的callback回调方法
chat.client.printCommand = function (command) {
var data = getData();
var obj = { data: data, command: command };
return callback(obj);
}
}
},
controllerData:getData
};
}]);
Here is the controller part:
var mainController = app.controller('dsController', ['$scope', 'hubService', function ($scope, hubService) {
var currentData = hubService.controllerData();
$scope.controllerData = currentData;
hubService.commandReceived(function (result) {
debugger;
var command = result.command;
var data = result.data;
if (command != undefined) {
if (command.localeCompare("aaaa")==0)
data.controller[1].title = "哈哈哈";
else if (command.localeCompare("bbbb") == 0)
data.controller[0].title = "呵呵呵";
}
$scope.controllerData = data;
});
}]);
Here is the screen shot:
When there is new message reached, then I can see that the hubService.commandReceived was triggered, then I re-bind the data to the collection.
Here is the screen shot:
But the problem is, after re-binding the data,the page is not changed at all!
I have checked many articles on the stackoverflow, seems many problems were solved by adding link function in the directive, so I did. But it didn't work for me.
Maybe I think the problem should be placed in the directive I used? Or the service method I used to handle the signalr callback message?
Anyone who can help me ?
Edit:2015-12-28 22:06:01
Thx for Walt's response, I will have a try, meantime, hope you guys' can provide more advice. I will wait online. thx again.
You need to call
$scope.$apply(function {
$scope.controllerData = data;
})
to notify angular that your data has changed as the notification from signalR is out of the angularjs scope life cycle.
$apply() is used to execute an expression in angular from outside of the angular framework. (For example from browser DOM events, setTimeout, XHR or third party libraries). Because we are calling into the angular framework we need to perform proper scope life cycle of exception handling, executing watches.
You can read up on it here
You also need to check if the $digest is in progress in some cases not to receive an error.
ui-grid allows for column menus but they are added one on top of the other. I need to have nested menu items (like this http://www.bootply.com/86684) but I also need to specify custom controls, like check boxes and radio buttons on the nested menu item.
So far, I've spent several hours going through the docs, searching online, and reading the ui-grid code but have not been able to come up with a solution. Looking for some pointers or guidance on how I may be able to achieve this.
Sample configuration of menu items for a column in ui-grid:
$scope.gridOptions.columnDefs = [
field: 'Column01',
menuItems: [
{
title: 'Outer Scope Alert',
icon: 'ui-grid-icon-info-circled',
shown: function() { return true; },
active: function() { return true; },
context: $scope,
action: function($event) {
this.context.blargh();
}
},
{
title: 'Grid ID',
action: function() {
alert('Grid ID: ' + this.grid.id);
}
}
]
];
Is there a way to completely overwrite the column menu template so that I can specify a nested array of menu items like so? Note also that I would like to specify a template for the individual menu items.
$scope.gridOptions.columnDefs = [
field: 'Column01',
menuItems: [
{
title: 'Menu A',
icon: 'ui-grid-icon-info-circled',
context: $scope,
menuItems: [
{
title: 'Menu A1',
icon: 'ui-grid-icon-info-circled',
template: '<li>' +
' <div class="checkbox">' +
' <label>' +
' <input type="checkbox"> Checkbox 01' +
' </label>' +
' </div>' +
' <div class="checkbox">' +
' <label>' +
' <input type="checkbox"> Checkbox 02' +
' </label>' +
' </div>' +
'</li>',
action: function($event) {
this.context.blarghA1();
}
},
{
title: 'Menu A2',
icon: 'ui-grid-icon-info-circled',
action: function($event) {
this.context.blarghA2();
}
},
{
title: 'Menu A3',
icon: 'ui-grid-icon-info-circled',
action: function($event) {
this.context.blarghA3();
}
}
]
},
{
title: 'Menu B',
action: function() {
alert('Grid ID: ' + this.grid.id);
}
}
]
];
Thanks!