Page 1 of 1
chartjs and number format
Posted: 01 Aug 2019, 12:05
by chaloupka
Hello,
I did not find the way how to format numbers in chartjs - any articles are related to old implementation.
I am using Primefaces 7.0.5, apache-tomcat-9.0.21 / Mojarra 2.2.7, jdk-11.0.3
Did anyone solved it?
Thanks, Jiri
Re: chartjs and number format
Posted: 01 Aug 2019, 13:05
by Melloware
Can you give an example of what your Java Number is and how you want it formatted on the UI?
Re: chartjs and number format
Posted: 15 Aug 2019, 15:11
by chaloupka
Hi, I am sorry for being late, another tasks.
my code is:
Code: Select all
<p:barChart model="#{statistics.barModel}" style="width: 100%; height: 300px;" id="monthStats" />
and
Code: Select all
for(MonthStatisticsDTO dto: statThisYear){
valuesThisYear.add(dto.getAmount());
}
barDataSetThisYear.setData(valuesThisYear);
for(MonthStatisticsDTO dto: statPrevYear){
valuesPrevYear.add(dto.getAmount());
}
barDataSetPrevYear.setData(valuesPrevYear);
data.addChartDataSet(barDataSetThisYear);
data.addChartDataSet(barDataSetPrevYear);
List<String> labels = new ArrayList<>();
labels.add("Leden");
labels.add("Únor");
...
data.setLabels(labels);
barModel.setData(data);
BarChartOptions options = new BarChartOptions();
Title title = new Title();
title.setDisplay(true);
if(barType == 1)
title.setText("Trzby");
if(barType == 3)
title.setText("Provize ");
options.setTitle(title);
Tooltip tooltip = new Tooltip();
tooltip.setMode("index");
tooltip.setIntersect(false);
options.setTooltip(tooltip);
barModel.setOptions(options);
The output looks by this:
the in the number I would like to have thousands separated by space, and "," as decimal point
Re: chartjs and number format
Posted: 15 Aug 2019, 15:19
by Melloware
Looks like you just need to use the Primefaces ChartJS Extender functionality combined with this stack overflow post:
https://stackoverflow.com/a/52355634/502366
Re: chartjs and number format
Posted: 15 Aug 2019, 22:36
by chaloupka
I am sorry, I am affraid I do not understand how to use it.
In java code, I add:
Code: Select all
...
Tooltip tooltip = new Tooltip();
tooltip.setMode("index");
tooltip.setIntersect(false);
options.setTooltip(tooltip);
barModel.setOptions(options);
barModel.setExtender("chartExtender");
and in .xhtml page I have:
Code: Select all
<h:outputScript>
function chartExtender() {
var options = {
scales: {
yAxes: [{
ticks: {
beginAtZero: true,
callback: function(label, index, labels) {
//return Intl.NumberFormat().format(label);
// 1,350
//return Intl.NumberFormat('hi', {
// style: 'currency', currency: 'INR', minimumFractionDigits: 0,
//}).format(label).replace(/^(\D+)/, '$1 ');
return Intl.NumberFormat('hi', {
style: 'currency', currency: 'INR', currencyDisplay: 'symbol', minimumFractionDigits: 2
}).format(label).replace(/^(\D+)/, '$1 ');
}
}
}]
}
}
$.extend(true, this.cfg.config, options);
};
</h:outputScript>
But it has no efect, does not matter what return part I use..