D3 chart bar color

Answered

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

19 answers

Public
Dmytro Zvazhii Flexmonster 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

Public
Ralys May 30, 2018

Thank you

Public
Iryna Kulchytska Flexmonster 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

Public
Ralys 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 
 

Public
Ralys 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;
Public
Ralys June 27, 2018

Attached flexmonster.js 

Attachments:
flexmonster.js.zip

Public
Ralys 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>

 

Public
Iryna Kulchytska Flexmonster 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

Public
Ralys 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

Public
Ralys July 12, 2018

Grid view

Attachments:
label format.png

Public
Tanya Gryshko Flexmonster 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

Public
Ralys 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
 
 
 

Public
Ralys July 12, 2018

As in the attached file

Attachments:
pivotchart-2.png

Public
Tanya Gryshko Flexmonster 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

Public
Ralys 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

Public
Tanya Gryshko Flexmonster 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

Public
Ralys July 17, 2018

Hello,
I hope yes. Does the “type”:”time” and timePattern will be numeric with sum?
Thank you

Public
Dmytro Zvazhii Flexmonster 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

Public
Dmytro Zvazhii Flexmonster 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

Please login or Register to Submit Answer