How can I show the total average and total cost on Duration(Expanded/collapsed) row where number of items are instead of at the bottom in a separate row?
here is the fiddle for it http://jsfiddle.net/c76xW/3/
dataView.setGrouping([
{
getter: "duration",
formatter :function (g) {
return "Duration: " + g.value + " <span style='color:green'>(" + g.count + " items)</span>";
},
aggregators: [
new Slick.Data.Aggregators.Sum("duration"),
new Slick.Data.Aggregators.Sum("cost")
],
aggregateCollapsed: true,
lazyTotalsCalculation: true
},
You would have to modify it a bit. JSfiddle link with updated code is here.
Be careful with the aggregateCollapsed and lazyTotalsCalculation - they need to be set to true if you want to access the average and sum in that way, but it also means it will run slower since it's doing it for each and every group at the same time and not when the user is looking at them.
Related
I have the following setting in reporting to display the total of stacked column:
I also tried, [[total]], "[[total]]" etc..
But I get:
Which is the same value as the last column.
What is the correct way to display the total value of the stacked columns ?
EDIT1:
Tried the first proposed solution and it gave the following:
where all labels are formatted with the same text.
For achieve this result you need:
1) Add "[[total]]" in "Total Text" field, in value axis advanced settings
2) Next you should override "Label Function" in Graph settings.
The code of function
/**
* Return label text
*/
function(graphDataItem, formattedText) {
var total = graphDataItem.values.total;
var formattedTotal = AmCharts.formatNumber(total, {
precision: 2,
decimalSeparator: ".",
thousandsSeparator: " "
}, 2);
return formattedTotal;
}
Result:
Is there a way to always have one item per line in the timeline? I don't want two or more items to share the same line, whatever the dates are.
Thanks.
You have to use groups, or if you're already using those for another purpose, you have to use subgroups.
Here's the official documentation for items, groups and subgroups (I'm assuming the website isn't gonna expire anytime soon... again...).
If you can use groups
Specify a different group for every item. You can set the group's content as an empty string, if you don't want to have a label for it on the left side of the Timeline.
If you want to arrange the groups in a specific way, specify an ordering function as the Timeline's options' groupOrder property. Example:
var options = {
// other properties...
groupOrder: function (a, b) {
if(a.content > b.content)// alphabetic order
return 1;
else if(a.content < b.content)
return -1;
return 0;
}
};
If you have to use subgroups
When you create an item, put it in the group it belongs to but also specify for it the subgroup property so that it's unique, like the item's id. For example, you can use the id itself, or add a prefix or suffix to it.
In the Timeline's options, set the stack and stackSubgroups properties to true.
In each group, set the subgroupStack property to true and specify an ordering function as the group's subgroupOrder property. Example:
var group = {
id: 1,
content: 'example group',
subgroupStack: true,
subgroupOrder: function(a, b) {
var tmp = a.start.getTime() - b.start.getTime();
return tmp === 0 ? parseInt(a.id) - parseInt(b.id) : tmp;
// if the start dates are the same, I compare the items' ids.
// this is because due to a bug (I guess) the ordering of items
// that return 0 in the ordering function might "flicker" in certain
// situations. if you want to order the items alphabetically in that
// case, compare their "content" property, or whatever other
// property you want.
}
};
I am trying to style just the decimals to look just like this:
Didn't had success, I guess that I need to make my own filter, tried but didn't had success either, I guess it is because I am using it inside a state.
Here the code I am using for the number:
<h2><sup>$</sup>{{salary | number:0}}<sub>.00</sub></h2>
Inside the .app iam using this scope:
$scope.salary = 9000;
Thing is, number can be whatever the user salary is, it get the number from an input, in other places I have more numbers with decimals too.
Possible solutions:
Extract only the decimals from value and print them inside de
tag.
Use a filter to do this?
Use a directive that will split the amount and generate the proper HTML. For example:
app.directive('salary', function(){
return {
restrict: 'E'
, scope: {
salary: '#'
}
, controller: controller
, controllerAs: 'dvm'
, bindToController: true
, template: '<h2><sup>$</sup>{{ dvm.dollar }}<sub>.{{ dvm.cents }}</sub></h2>'
};
function controller(){
var parts = parseFloat(this.salary).toFixed(2).split(/\./);
this.dollar = parts[0];
this.cents = parts[1];
}
});
The easiest solution would be to split out the number into it's decimal portion and the whole number portion:
var number = 90000.99111;
console.log(number % 1);
Use this in your controller, and split your scope variable into an object:
$scope.salary = {
whole: salary,
decimal: salary % 1
}
Protip: Using an object like this is better than using two scope variables for performance
In this example:
http://mleibman.github.io/SlickGrid/examples/example-grouping
You can group the rows by certain columns, but I would like the rows inside the groups to be indented. Is there a way I can add a class to the grouped rows or something? I can't seem to find a good way to do this.
I'm creating the grouping by doing:
function groupByDuration() {
dataView.setGrouping({
getter: "duration",
formatter: function (g) {
return "Duration: " + g.value + " <span style='color:green'>(" + g.count + " items)</span>";
}
});
}
I tried this Slickgrid grouping rows style
var myFormatter = function(row, cell, value, columnDef, dataContext) {
var groupings = this.getGrouping().length;
var indentation = groupings * 15 + 'px';
var spacer = '<span style="margin-left:' + indentation + '"></span>';
return spacer + value;
};
But my question is How do I bind this function with slickgrid's dataView so I can access the groupings as currently I am getting the error "Object doesn't support property or method 'getGrouping'"
Thanks
Thanks!
I'm pretty sure you are trying to shift left some of the column values or the header of the group based on the number of the grouped up rows.
I've modified the grouping-example groupByDuration formatter to try and show this off. Here is the link to the jsFiddle.
If I haven't gotten to the root of what you are trying to accomplish, please try and update the jsFiddle further to illustrate what exactly you are trying to do.
Hii Guys!!
I displayed data in jqgrid and enabled ' footerrow: true' in jqgrid Now as per my need i want to show the sum of particular column on footer Row...Plz guys Help me as I am using Jqgrid For first time ...
Thanks in advance....
If you want to sum the values which are in the jqGrid, you can do that in JavaScript (preferably in gridComplete event):
$('#gridId').jqGrid({
...
footerrow: true,
gridComplete: function() {
var $grid = $('#gridId');
var colSum = $grid.jqGrid('getCol', '<Your column name>', false, 'sum');
$grid.jqGrid('footerData', 'set', { 'Your column name>: colSum });
}
});
If you need to calculate the sum on the server side, then you must enable userDataOnFooter option first:
$('#gridId').jqGrid({
...
footerrow : true,
userDataOnFooter : true
});
And then include the sum in your server response. For exmple in case of JSON it should look like this:
{
total: x,
page: y,
records: z,
rows : [
...
],
userdata: { <Your column name>: <sum counted on server side> }
}
You can also take a look at live example available on jqGrid Demos page (you should choose "New in Version 3.5" and then "Summary Footer Row").