We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy.
Unfortunately, activation email could not send to your email. Please try again.

Data Markers number formating

Thread ID:

Created:

Updated:

Platform:

Replies:

124452 Jun 10,2016 09:43 AM Jun 17,2016 01:02 AM JavaScript 5
loading
Tags: ejChart
Milos
Asked On June 10, 2016 09:43 AM


I have problem to format decimal number in my Chart data markers. 
My number is 34578.45 €   and I want to format it like  345.78,45 €. 
Want to put comma for thousands and dot for decimals.

I tried to do that in my dataSource when I prepared data for Chart, and for number 345.78,45 € chart cut of my decimal part and show just 345.78€.

Is there any way to do that, with some format function or template ?


Regards,
Milos

Saravana Kumar Kanagavel [Syncfusion]
Replied On June 13, 2016 09:04 AM

Hi Milos, 
 
Thanks for contacting Syncfusion Support. 
We have analyzed your query and created a sample based on your requirement. This requirement can be achieved by using “displayTextRendering” event.  
 
Please follow the code example below 
[JS] 
  function datalabelRendering(sender) { //displayTextRendering event triggered 
        { 
            var inputValue = sender.data.text; 
            var format = "c"; 
            var culture = Globalize.cultures.eu; 
            var value = Globalize.format(inputValue,format,culture); 
            var p = $("#euroSymbol")[0];  
            sender.data.text = value.replace(culture.numberFormat.currency.symbol,p.textContent);        
        } 
 
In the above code, we are triggering “displayTextRendering” event . In the event, based on your culture[“eu-ES”]  we have convert the normal number to currency value and assigning that value to the data label text.           
 
And you can find the sample from the below location 
 
  
 
Find the output of the sample below 
 
 
 
Please let us know if you have any concern. 
 
Regards, 
Saravana Kumar K. 



Milos
Replied On June 14, 2016 04:19 AM

Hi Saravana,

I tried example and in my case it does not work, actually method for 'displayTextRendering' is never called.
Below is my chart. Char is a bit complicated, contains couple of series. 
Also, this kind of rendering applies to the all series, but  I need that only on two series. For this case I noticed that we can approach 'seriesIndex' from method arguments and there I can decide for which series I want to apply which kind of textRendering. 
But problem is that my method is never called ?


       $("#chart").ejChart({
                    annotations: [
                        { visible: true, content: 'water', opacity: 0.2 },
                        { visible: true, content: 'low', coordinateUnit: 'points', x: 1, y: 51, verticalAlignment: 'top', margin: { bottom: 5 } },
                        { visible: true, content: 'hight', coordinateUnit: 'points', x: 7, y: 97, verticalAlignment: 'top', margin: { bottom: 5 } }
                    ],
                    primaryXAxis: {
                        rangePadding: 'Add',
                        title: { text: i18n.t('app:label.Date') },
                        range: { min: 0, max: 12, interval: axis.primaryAxis }
                    },
                    axes: [
                        {
                            majorGridLines: {
                                visible: false
                            },
                            orientation: 'Vertical',
                            range: { min: 0, interval: axis.secondaryAxis },
                            opposedPosition: true,
                            axisLine: { visible: false },
                            rangePadding: 'normal',
                            name: 'yAxis1',
                            labelFormat: '{value} €',
                            title: { text: '' }
                        }
                    ],
                    commonSeriesOptions: {
                        enableAnimation: true,
                        tooltip: {
                            visible: true
                        }
                    },
                    series: [
                        {
                            name: i18n.t('app:chart.NumberOf'),
                            type: 'column',
                            enableAnimation: true,
                            dataSource: data,
                            xName: 'Date',
                            yName: 'CountOfOrders'
                        },
                        {
                            name: i18n.t('app:chart.Total'),
                            type: 'line',
                            enableAnimation: true,
                            marker:
                            {
                                shape: 'circle',
                                size: { height: 10, width: 10 },
                                visible: true
                            },
                            dataSource: data,
                            xName: 'Date',
                            yName: 'TotalRevenue',
                            yAxisName: 'yAxis1'
                        },
                        {
                            name: i18n.t('app:chart.Goal'),
                            type: 'line',
                            enableAnimation: true,
                            marker:
                            {
                                shape: 'circle',
                                size: { height: 10, width: 10 },
                                visible: true
                            },
                            dataSource: data,
                            xName: 'Date',
                            yName: 'GoalPerMonth',
                            yAxisName: 'yAxis1'
                        },
                        {
                            name: i18n.t('app:chart.Average'),
                            type: 'line',
                            enableAnimation: true,
                            marker:
                            {
                                shape: 'circle',
                                size: { height: 10, width: 10 },
                                visible: true
                            },
                            dataSource: data,
                            xName: 'Date',
                            yName: 'Average',
                            yAxisName: 'yAxis1'
                        },
                        {
                            name: i18n.t('app:chart.Bench'),
                            type: 'line',
                            enableAnimation: true,
                            marker:
                            {
                                shape: 'circle',
                                size: { height: 10, width: 10 },
                                visible: true
                            },
                            dataSource: data,
                            xName: 'Date',
                            yName: 'Bench',
                            yAxisName: 'yAxis1'
                        }
                    ],
                    load: 'loadTheme',
                    displayTextRendering: function (args) {
                        var inputValue = sender.data.text;
                        var format = "c";
                        var culture = Globalize.cultures.eu;
                        var value = Globalize.format(inputValue, format, culture);
                        var p = $("#euroSymbol")[0];
                        sender.data.text = value.replace(culture.numberFormat.currency.symbol, p.textContent);
                    },
                    canResize: true,
                    legend: {
                        visible: true,
                        font: { size: '15px' },
                        shape: 'seriesType',
                        position: 'bottom',
                        itemStyle: { width: 15, height: 15 },
                        rowCount: 2
                    }
                });


Regards,
Milos

Saravana Kumar Kanagavel [Syncfusion]
Replied On June 15, 2016 05:11 AM

Hi Milos,   
   
We have analyzed your query and modified a sample based on your requirement. In your code, we have found that you didn’t enable the data label so the data label event is not called. And also we would like to inform that if data label is enabled, then its event of “displayTextRendering” function will be called.   
   
And also you can get the particular point value to convert the currency value from the below code snippet alternatively getting the “args.data.text” in the “displayTextRendering” event.  
 
 
[JS] 
   displayTextRendering: function (args) { 
        var inputValue = args.model.series[args.data.seriesIndex]._visiblePoints[args.data.pointIndex].y; 
   }, 
  
Please refer the modified sample from the below location   
   
   
Please find the output of the sample: 
 
 
 
 
Please let us know if you have any concern. 
 
Regards, 
Saravana Kumar K. 
 



Milos
Replied On June 15, 2016 07:35 AM

Hi Saravana,
Thank you for your promt response. 
Actually I do not want my label to be visible until I hover mark on Chart.
Is it possible ?

Best Regards,
Milos

Saravana Kumar Kanagavel [Syncfusion]
Replied On June 17, 2016 01:02 AM

Hi Milos,   
   
Thanks for your update.   
  
We have analyzed your query and created a sample based on your requirement. And we have achieved your requirement through workaround.   
   
Please refer the code example below: 
 
[JS] 
$(function () 
    { 
        $("#container").ejChart({ 
            pointRegionMouseMove:function(args) // pointRegionMouseMove event triggered when hover on point 
            { 
                window.pointClick = true; 
            }, 
            chartMouseMove:function(args) //chartMouseMove event tiggered when move the mouse on chart area 
            { 
                var chart = $("#container").ejChart("instance"); //To get the chart instance 
                                     
                if(window.pointClick){ 
                    for(var i=0;i<args.model.series.length;i++) 
                    { 
                        for(var j=0;j<args.model.series[i].points.length;j++) 
                        { 
                            var check ="container_svg_Series"+i+"_Point"+j+"_symbol";                                    
                            if(args.data.id == check){ //checking that whether mouse hover on point 
                                var clearID = check; 
                                chart.model.series[i].points[j].marker.dataLabel.visible=true; 
                                window.flag =chart.model.series[i].points[j].marker.dataLabel.visible; 
                                window.seriesIndex = i; 
                                window.pointIndex = j; 
                                chart.redraw(); 
                                window.pointClick = false; 
                            }                                     
                        } 
                    } 
                } 
                if(args.data.id != clearID && window.flag) //To remove the datalabel when mouse move from the particular point 
                { 
                    chart.model.series[window.seriesIndex].points[window.pointIndex ].marker.dataLabel.visible=false; 
                    chart.redraw(); 
                } 
            }, 
            displayTextRendering: function (args) { //To covert the normal number to currency based on culture  
                var inputValue = args.model.series[args.data.seriesIndex]._visiblePoints[args.data.pointIndex].y; 
                var format = "c"; 
                var culture = Globalize.cultures.eu; 
                var value = Globalize.format(inputValue, format, culture); 
                args.data.text = value; 
            }, 
        }); 
    }); 
 

In the above code, we are triggering three events such as “pointRegionMouseMove”,” chartMouseMove” and “displayTextTendering”. By using “pointRegionMouseMove” event, we have declared the one variable to indicate as mouse hover on point for “chartMouseMove” event. On “chartMouseMove” event, we have find whether the mouse move on point in chart and If mouse move on point then we have specified “data label” as visible. And if mouse remove from the particular point after hover on point, then we have setting the visible as false to the data label. In the “displayTextRendering” event, we have convert the displaying data label number to currency value based on your culture.   
   
And you can find the sample from the below location.    
   
  
Please find the output of the sample below 

 
 
          
 
Please let us know if you have any concern. 
 
Regards, 
Saravana Kumar K. 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.

;