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:
Related
For a chart like this
https://codepen.io/team/amcharts/pen/NmNLoL
function categoryAxisZoomed(ev) {
var axis = ev.target;
var start = axis.getPositionLabel(axis.start);
var end = axis.getPositionLabel(axis.end);
console.log("New range: " + start + " -- " + end);
}
How can I add a pre zoom to max level so that when a page loads, I see only one category.
I want to do this only for mobile.
Any help would be appreciated
Thanks
Use zoom to values like this
function zoomAxis(pass parameters) {
valueAxis.zoomToValues("start", "end");
}
For references: http://www.amcharts.com/docs/v4/tutorials/zooming-axis-via-api-or-external-scrollbar/
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.
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.