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.

StackBar graph LabelFormat

Thread ID:

Created:

Updated:

Platform:

Replies:

127067 Oct 24,2016 06:46 AM Nov 8,2016 06:50 AM ASP.NET MVC 5
loading
Tags: Chart
Felipe Alves
Asked On October 24, 2016 06:46 AM

I'm getting some trouble with StackedBar graph, i didn't find how to format the Y axis and tooltip values when mouse over to show correctly.
For eg., I'm trying to format the numbers from 378165 to 378.165. I wanna show numbers at hundred, thousant, and if necessary with comma
Something like .ToString("#,##");
Image in attachment.

code:

  
                            @(Html.EJ().Chart("containerStackedChart")
                                .PrimaryXAxis(pr => pr.Title(tl => tl.Text("Gerências")).MajorGridLines(mr => mr.Visible(false)))
                                .PrimaryYAxis(pr => pr.Range(ra => ra.Max(400000).Min(0).Interval(ViewBag.Intervalo)).Title(tl => tl.Text("Unidades")))//tried show number formated here
                                .CommonSeriesOptions(cr => cr.Type(SeriesType.StackingColumn).EnableAnimation(true).Tooltip(tt => tt.Visible(true)
                                .Format("#series.name#  <br/> #point.x# : #point.y# Unidades"))) // tried show number formated here
                                .Series(sr =>
                                {
                                    sr.Points(pt =>
                                    {
                                        for (int i = 0; i < ViewBag.Tamanho; i++)
                                        {
                                            pt.X(ViewBag.CodGerencias[i]).Y(ViewBag.ValoresFaturado[i]).Add();
                                        }

                                    }).Name("Faturado").Fill("#2A80B9").Add();

                                    sr.Points(pt =>
                                    {
                                        for (int i = 0; i < ViewBag.Tamanho; i++)
                                        {
                                            pt.X(ViewBag.CodGerencias[i]).Y(ViewBag.ValoresEmCarteira[i]).Add();
                                        }


                                    }).Name("Em Carteira").Fill("#2ECD71").Add();


                                    sr.Points(pt =>
                                    {
                                        for (int i = 0; i < ViewBag.Tamanho; i++)
                                        {
                                            pt.X(ViewBag.CodGerencias[i]).Y(ViewBag.ValoresMetas[i] - ViewBag.ValoresFaturado[i] - ViewBag.ValoresEmCarteira[i]).Add();
                                            //pt.X(ViewBag.CodGerencias[i]).Y(22333).Add();
                                        }


                                    }).Name("Meta").Fill("#E94649").Add();
                                })
                                .IsResponsive(true)
                                .Locale("pt-BR")
                                .CanResize(true)
                                .Load("loadTheme")
                                .Title(tt => tt.Text("Gráfico Meta Mensal"))
                                .Size(sz => sz.Height("300"))
                                .Legend(lg => { lg.Visible(true).Position(LegendPosition.Bottom); })
                            )

Dharanidharan Dharmasivam [Syncfusion]
Replied On October 25, 2016 02:40 AM

Hi Felipe,  

Thanks for using Syncfusion products.  

We have analyzed the screenshot provided by you. We can achieve your requirement by setting appropriate culture value to the Localeproperty of chart.  

We have prepared a simple sample for this requirement and it can be downloaded from the following link  

Please refer the following code snippet to achieve this  

[CSHTML]  
  
<script src="~/Scripts/ej/i18n/ej.culture.es-ES.min.js"></script>  
<div id = "ControlRegion">  
          <div>  
              @(Html.EJ().Chart("containerStackedChart")  
                                 .Locale("es-ES")     //For localizing labels to a specific culture  
  
                                //Display numbers in y-axis based on localized settings  
                                .PrimaryYAxis(pr => pr.LabelFormat("n0").Title(tl => tl.Text("Unidades")))  
                                  
                                //. . . Other code for Chart                              
  
              )   
          </div>    
</div>  

Note: Tooltip text will be localized automatically based on axis labels  
  
[Screenshot]  
Chart with localized labels and tooltip  
   

Following documentation link explains how to localize Syncfusion widgets  

Please let us know if you have any concern.  

Thanks, 
Dharani. 


Felipe Alves
Replied On October 25, 2016 08:24 AM

Thank you very much!, but only the tooltip is still not showing properly. I tried localetexts css and set configuration at <system.web> but it's not working yet.
New image in attachment.


Some changes in code:

 @(Html.EJ().Chart("containerStackedChart")
                                .Locale("es-ES")
                                .PrimaryXAxis(pr => pr.Title(tl => tl.Text("")).MajorGridLines(mr => mr.Visible(false)))
                                .PrimaryYAxis(pr => pr.LabelFormat("n0").Title(tl => tl.Text("Unidades")).Range(ra => ra.Max(ViewBag.EixoY).Min(0).Interval(ViewBag.Intervalo)))
                                .CommonSeriesOptions(cr => cr.Type(SeriesType.Column).EnableAnimation(true).Tooltip(tt => tt.Visible(true)
                                .Format("#series.name#  <br/> #point.x# : #point.y# Unidades")))
                                .Series(sr =>
                                 {
...
                                 }
                                .IsResponsive(true)
                                .Enable3D(false)
                                .SideBySideSeriesPlacement(false)
                                .CanResize(true)
                                .Load("loadTheme")
                                .Title(tt => tt.Text("Gráfico Meta Mensal"))
                                .Size(sz => sz.Height("300"))
                                .Legend(lg => { lg.Visible(true).Position(LegendPosition.Bottom); })
...
<script src="~/Scripts/ej/ej.web.all.js"></script> <!-- SyncFusion Charts -->
<script src="~/Scripts/ej/i18n/ej.culture.es-ES.js"></script>
<script src="~/Scripts/ej/i18n/localetexts/ej.localetexts.es-ES.js"></script>


Attachment: culture_d9d4201f.zip

Dharanidharan Dharmasivam [Syncfusion]
Replied On October 26, 2016 07:08 AM

Hi Felipe, 

Thanks for your update. 
 
We have tried to replicate the tooltip issue with the provided code snippet, but we can’t able to reproduce it. Kindly find the code snippet below, 

Code Snippet: 
ASP.NET MVC: 

@(Html.EJ().Chart("containerStackedChart") 
         .Locale("es-ES")    
         .PrimaryYAxis(pr => pr.LabelFormat("n0").Title(tl => tl.Text("Unidades"))) 
         .PrimaryXAxis(pr => pr.Title(tl => tl.Text("Gerências")).MajorGridLines(mr => mr.Visible(false))) 
         .CommonSeriesOptions(cr => cr.Type(SeriesType.StackingColumn).EnableAnimation(true) 
.Tooltip(tt => tt.Visible(true).Format("#series.name#  <br/> #point.x# : #point.y# Unidades")))  
         .Series(sr =>{sr.Points(pt => 
                          { 
                           pt.X("Ger 2").Y(900000).Add(); 
                           pt.X("Ger 4").Y(800020).Add(); 
                           pt.X("Ger 6").Y(800080).Add(); 
                           pt.X("Ger 8").Y(700025).Add(); 
                           }).Name("Faturado").Fill("#2A80B9").Add(); 
 
                       sr.Points(pt => 
                       { 
                          pt.X("Ger 2").Y(190000).Add(); 
                          pt.X("Ger 4").Y(220006).Add(); 
                          pt.X("Ger 6").Y(190004).Add(); 
                          pt.X("Ger 8").Y(250000).Add(); 
                       }).Name("Em Carteira").Fill("#2ECD71").Add(); 
 
                       sr.Points(pt => 
                       { 
                          pt.X("Ger 2").Y(250000).Add(); 
                          pt.X("Ger 4").Y(140005).Add(); 
                          pt.X("Ger 6").Y(190000).Add(); 
                          pt.X("Ger 8").Y(220000).Add(); 
                        }).Name("Meta").Fill("#E94649").Add(); 
          }) 
                                 
          .IsResponsive(true) 
          .Enable3D(false) 
          .SideBySideSeriesPlacement(false)                              
          .CanResize(true) 
          .Load("loadTheme") 
          .Title(tt => tt.Text("Gráfico Meta Mensal")) 
          .Size(sz => sz.Height("300")) 
          .Legend(lg => { lg.Visible(true).Position(LegendPosition.Bottom); }) 
) 


Screenshot:  
 

For your reference we have attached the sample. Kindly find the sample from below location. Can you please check whether the locale for chart is set more than once from your side. 
 
Since we can’t able to reproduce the mentioned issue, kindly revert us by modifying the attached sample or provide us your sample with replication steps. So that we can able to provide the solution sooner. 

Thanks, 
Dharani. 


Felipe Alves
Replied On November 7, 2016 07:16 AM

Hello guys,

I had other graphs in the page, and to work properly i set the property ".Locale("pt-BR")" to all my graphs.
Thanks for the help!

Dharanidharan Dharmasivam [Syncfusion]
Replied On November 8, 2016 06:50 AM

Hi Felipe, 
 
Thanks for your update. 
 
Kindly revert us, if you need further assistance. 

Thanks, 
Dharani. 


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.

;