asked on May 26, 2018
Hello,
Could you add the feature for D3 Bar color and label text to get them with function?
In 2.4 version I did it by myself. In 2.5. I cannot fount the line to do this.
C8.selectAll("rect").data(function(f) {
return f.Wf;
}).enter().append("rect").attr("class", "fm-bar").attr("x", function(f) {
return z8(f.id);
}).attr("width", n8).attr("y", function(f) {
return 0 < f.value ? Math.floor(100 * c(f.value)) / 100 : Math.floor(100 * c(s8)) / 100;
}).attr("height", function(f) {
return Math.floor(100 * Math.abs(c(s8) - c(f.value))) / 100;
}).style("fill", function(f, p2, itemId) {
return getBarChartFillColor(f, dataMap[itemId], itemId);//MB IDEALITAS
//return u.X(f.hj) ? E(f.id) : E(f.hj);
}).append("title")
.text(function(f) {
return f.ve;
});
C8.selectAll(".text")
.data(function (f) {
return f.Wf;
})
.enter()
.append("text")
.attr("class", "label")
.attr("x", (function (f, p2, itemId) {
var ChVal = (f.value * ChBars) / maxYval;
return ChVal;// ( ChVal*(1.0 - (itemId * 0.009)));
}))
.attr("dy", ".75em")
.attr("style", function (f, p2, itemId) {
return "font-size: 10; font-family: Helvetica, sans-serif;";
})
.attr("fill", function (f, p2, itemId) {
return "black";
})
.text(function (f, p2, itemId) {
return getBarChartLabelText(f, dataMap[itemId], itemId);//MB IDEALITAS
});
Thank you
⋅ May 29, 2018
Hello Ralys,
Thank you for your feedback and detailed explanation. Our dev team will add such feature in the nearest versions ETA Jul02.
Regards,
Dmytro
⋅ May 30, 2018
Thank you
⋅ June 26, 2018
Hello Ralys,
I would like to ask you a bit more about the functionality you added to 2.4 by yourself.
As far as I can see from the code you assign the color to the element using your getBarChartFillColor function based on itemId. What is itemId in your case? And what is inside dataMap?
Regarding your code that adds label text to each bar, could you please provide a screenshot that illustrates how the labels look in your modified 2.4 version?
Thank you,
Iryna
⋅ June 27, 2018
Hello,
ItemId is unique ID in the list
I attached report.json and screenshots
The label is not showing correctly in my example. I hope you will put labels in the correct position
Setting for label position "start" or "end" would be very good for labels postion on bar top or on bar bottom
⋅ June 27, 2018
dataMap is assigned in js
var s8 = this.Ky;
var dataMap = this.Ma.data;
var ChBars = this.Xk;
var maxYval = 0.0001;
⋅ June 27, 2018
Attached flexmonster.js
⋅ June 27, 2018
<script type="text/javascript">
function getBarChartLabelText(item, dataMapItem, itemId){
return (Number(moment.utc(dataMapItem.value*1000).format("DD"))-1)+"d "+ moment.utc(dataMapItem.value*1000).format("HH:mm");
}
function getBarChartFillColor(item, dataMapItem, itemId){
return "rgb(25,137,172)";
}
</script>
⋅ July 2, 2018
Hello Ralys,
I would like to inform you that version 2.5.6 is just released and it contains the updates made for you.
1. The recommended way to redefine colors for charts is via CSS. Here is a sample of how to change default colors for charts: https://jsfiddle.net/flexmonster/wLqupkc5/
We use .fm-charts-color-n to set the color for the n-th element in the chart legend. In the sample, we have specified six colors. The seventh sector is specified with fill: none. This trick is used for repeating custom colors in case there are more than six elements in the chart legend.
If you switch in this sample to bar or column chart, you will see that all the bars and columns are displayed in one color - the one that is specified in .fm-charts-color-1 CSS class.
Please let us know if this approach works for your case instead of getBarChartFillColor.
2. We have added the internal support of data labels for bar and column charts. They are turned off by default. A new charts option property showDataLabels was added to turn them on. Here is a sample: https://jsfiddle.net/flexmonster/dtxLea0z/
The formatted value is displayed in data label, including currency symbol, time formatting, etc.
Please let us know if you like the built-in chart data labels.
Kind regards,
Iryna
⋅ July 11, 2018
Hello,
How to add formats configuration to display milliseconds as "1d 12h 20min"
Like in the grid for "type":"time"
"dataSourceType": "json",
"data": [
{
"lost_time": {
"caption": "Time elapsed",
"type":"time"
},
{
"lost_time": 86400
},
{
"lost_time": 43200
}
]
Thank you
⋅ July 12, 2018
Grid view
⋅ July 12, 2018
Hi Ralys,
Please see the working sample here: https://jsfiddle.net/flexmonster/86dabc5t/
You can find more information about formatting here: https://www.flexmonster.com/doc/date-and-time-formatting/
Does it help?
Thanks,
Tanya
⋅ July 12, 2018
Hi,
This is about labels and formating on the chart
This is about numeric type "time" with showDataLabels:true
Not for date formating
⋅ July 12, 2018
As in the attached file
⋅ July 13, 2018
Hello, Ralys,
Thank you for your quick reply.
For now, formatting for "type":"time" is not available.
Please let me know how critical this feature is for you.
Regards,
Tanya
⋅ July 15, 2018
Hello,
Grouping and calculations timestamp field is critical
Formating timestamp from number to "2d 12:59:59" is crtical
Could you add this feature?
Thank you
⋅ July 16, 2018
Hello, Ralys,
Thank you for the update.
We can add timePattern property which will allow formatting for "type":"time".
Would this work for you?
Regards,
Tanya
⋅ July 17, 2018
Hello,
I hope yes. Does the "type":"time" and timePattern will be numeric with sum?
Thank you
⋅ July 17, 2018
Hello Ralys,
Thank you for your reply. The new timePattern should not affect the existing time behavior. For now, the time data type in Flexmonster is numeric and supports the sum aggregation. The idea of timePattern is to provide the ability to customize time data visualization. The ETA for the property is Aug 13.
Regards,
Dmytro
⋅ August 13, 2018
Hello Ralys,
We are glad to inform you that the new version with the timePattern is now available on our website.
The time pattern for your case will look the following way:
report: {
...
options: {
timePattern: "d'd' HH'h' mm'min'"
}
}
Please let us know if everything works fine for you.
Regards,
Dmytro
