Hi,
I want to format y- axis labels in currency format like 10000 should look 10,000. I also have written a java script function that formats the currency. I tried to use formatLabel as described in the link http://ko.infragistics.com/community/forums/p/71144/360406.aspx#360406.It works well for x-axis because values are known and are string. But in y axis all values are not known and are numeric and we have to convert numeric to formatted string.
I am just passing min and max values and steps are generated automatically, so I don't have clue about how to format internally generated steps.
similarly in the Tooltip, i am displaying is by using say "tooltipTemplate: '<div class="tooltip">${item.Label}</div><div>$$(lbl_budget): ${item.Budget}</div>".
now item.Budget is numeric value say 10000.But i want to display 10,000. So, how to format this value using my own function.
Thanks & Regards,
Bipul Kumar
Hi Bipul,
You should add formatLabel for each axis. It depend on structured data which value to format too.
I tried the following code in one of our samples - https://www.igniteui.com/data-chart/overview and it's working.
$("#chart").igDataChart("option", "axes", [{name: "xAxis", formatLabel: function (value) { console.log(value); return FormatCurrency(value.Value1); }}, {name: "yAxis", formatLabel: function (value) { console.log(value); return FormatCurrency(value); }}]);
I injected the code directly in Developer Console plus FormatCurrency function which I had given you.
May you give me some code, if that doesn't work?
Regards,
Stanimir
Hi Stanimir,
Thanks for the solution. But it solves only the second part i.e. I am now able to show formatted tooltips. Can the same thing be done to y-axis range? I want to format them too.The steps in Y-axis are appearing as 10000,20000, but i want to appear them as 10,000, 20,000 like that.
Our template engine doesn't evalute functions. You have to generate formatted string for the budget.
This function is going to convert your budget values to formatted budget strings:
function FormatCurrency(num) { var sign, cents, i = 0; num = num.toString().replace(/\$|\,/g, ''); if (isNaN(num)) num = "0"; sign = (num == (num = Math.abs(num))); num = Math.floor(num * 100 + 0.50000000001); cents = num % 100; num = Math.floor(num / 100).toString(); if (cents < 10) cents = "0" + cents; for (i = 0; i < Math.floor((num.length - (1 + i)) / 3) ; i++) num = num.substring(0, num.length - (4 * i + 3)) + ',' + num.substring(num.length - (4 * i + 3)); return ('$' + ((sign) ? '' : '(') + num + '.' + cents + ((sign) ? '' : ')')); }
Next, extend your data with formatted budget strings like that:
formattedData = yourData.map(function (item) {
item["formattedBudget"] = FormatCurrency(item.Budget);
return item; });
Finally, add it to the template:
tooltipTemplate: '
And your are ready :)