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. Image for the cookie policy date
close icon

problem with Chart and various xName

Hi,

I need to get a similar chart at this:



for various cittes, I've 3 measures (Dias Real, Dias No Real and Dias Estimada) in various months.

I try get thos chart, with a one city, I get the measures and months grouped for the city, but with two cities, I can't get nothing similar

I get this chart, but I can't get show the bars for each city separated.


I attach an example

Thanks



Attachment: ChartExample_121fa0ac.zip

13 Replies

DD Dharanidharan Dharmasivam Syncfusion Team April 11, 2017 09:30 AM UTC

Hi Manolo, 

Thanks for contacting Syncfusion support. 

We have analyzed your query with the provided code sample and screenshot. Your requirement can be achieved by specifying the IsIndexed as true in PrimaryXAxis. So that, based on the index values, the points in the series will get grouped and the chart will render. For example, first point in all the series will get grouped together and so on.  Find the code snipper below. 
 
ASP.NET MVC: 

@(Html.EJ().Chart("container") 
     .PrimaryXAxis(pr => pr.IsIndexed(true)) 
) 


Screenshot: 
 

Sample for reference can be find from below link. 
 
Thanks, 
Dharani. 



MA Manolo April 12, 2017 07:40 AM UTC

Hi,

Thanks for your answer, but I need some similar at this



SP Sastha Prathap Selvamoorthy Syncfusion Team April 17, 2017 12:19 PM UTC

Hi Manolo, 
 
Thanks for the response. Please find the below response. 
 
Hi,

I need to get a similar chart at this:

for various cittes, I've 3 measures (Dias Real, Dias No Real and Dias Estimada) in various months. 

I try get thos chart, with a one city, I get the measures and months grouped for the city, but with two cities, I can't get nothing similar

I get this chart, but I can't get show the bars for each city separated.
 
We hope that your requirement is to group the different measures(Example: “Real”, “NoReal”, “Estimado”) with respective fields(Example: INE). if so, we would suggest that your requirement can be achieved by the PivotChart control, which you can able to grouping the measure(values) with respect to row axis to display the chart. We have prepared a simple sample for your convenience and please find the sample in the below link. 
 
 
Also, we have provided detailed inform in the online document links for rendering the PivotChart control with different features. Please find the document link below for your reference. 
 
 
Please let us know if the above information would meet your requirement. 
 
Hi,

Thanks for your answer, but I need some similar at this
 
 
We hope that your requirement is to display the chart labels by grouping the measures accordingly. If so, we would inform you that we have provided multi-level label support (grouping label) for PivotChart control. Please find the sample screen shot for your reference below. This feature will be available in the upcoming 2017 Volume 2 release, which is estimated to be available at end of this month (April 2017). 
 
Screen shot: 
 
 
Regards, 
Sastha Prathap S. 



MA Manolo April 18, 2017 09:18 AM UTC

Hi,

In your example, I get this chart


But I need a bar for each INE-Periodo (Perido is a date yyyy/MM).

If I add a new row in the pivot chart, the result is the same

@(Html.EJ().Pivot().PivotChart("PivotChart2")
    .ClientSideEvents(clientSideEvents => clientSideEvents.Load("onLoad2"))
                                .DataSource(dataSource => dataSource.Rows(rows => { rows.FieldName("INE").FieldCaption("INE").Add(); rows.FieldName("Periodo").Add(); })
                                .Columns(columns => { })
                                .Values(values => { values.FieldName("Real").FieldCaption("Real").Add(); values.FieldName("NoReal").FieldCaption("NoReal").Add(); values.FieldName("Estimado").FieldCaption("Estimado").Add(); }))
        .Size(size => size.Height("460px").Width("950px")).CommonSeriesOptions(comm => { comm.Tooltip(tool => { tool.Visible(true); }).EnableAnimation(true); }))

For other hand, in webforms chart I can set the multiples fields in xName value, but in MVC I can't do it.

It is correct?



SP Sastha Prathap Selvamoorthy Syncfusion Team April 19, 2017 10:52 AM UTC

Hi Manolo,   
   
Thanks for the response.   
   
If you bind multiple items in PivotChart, it will display the summarized data initially. This is the default behavior of the PivotChart. Meanwhile, we have provided drill down/up option for chart series (Example: “02003”) to display its child levels (Detailed view) in PivotChart control. Please refer to the user-guide document link and screen shots for more details.   
   
User-guide for drill up/down operation: https://help.syncfusion.com/js/pivotchart/drill-operation   
   
Drill option in normal PivotChart:   
Before Expand   
After Expand   
Example: The below screenshot shows the expand option for chart series “02003” to display its child levels of “Periodo”.   
   
   
Example: The below screenshot shows the expanded state of chart series “02003”, which displays its child levels of “Periodo”. You can use “collapse” option of the PivotChart to return its parent levels of “02003”   
   
   
   
   
Also, we have provided the same drill up/down operation support for multiple level labels. Please find the screenshot for your reference.   
   
Note: This multiple level labels support will be available in our upcoming 2017 Volume 2 release, which is estimated to be rolled out at end of this month.   
   
Screenshot of multiple level labels in an expanded state:   
   
   
Please let us know if you have any doubts.   
   
Regards,   
Sastha Prathap S.   



MA Manolo April 19, 2017 02:22 PM UTC

I'm sorry, but I don't need this.

I need this chart:



So, with a simple view, I can see that the first month of 2003 "No Real" can be a problem. There is a great difference whith other months. I dont' want expand/collapse items for examine the results.

I think that if I can create series with xName with two parameters: xName="INE,NoReal" for example, it may works.

Alternative solution it's valid, but I need this chart

Thanks



DD Dharanidharan Dharmasivam Syncfusion Team April 20, 2017 11:30 AM UTC

Hi Manolo, 
 
We have analyzed your requirement with the provided code snippet. As of now, we don’t have support for grouping the columns as shown in your screenshot. So, we have added it to our feature request list. And for better follow up we have created branch incident under your account. Kindly follow up with the branch incident for further details.  

Thanks, 
Dharani. 



MA Manolo May 5, 2017 08:05 AM UTC

Hi again

Finally I've got a similar chart that I need. I need create a serie for each INE - Real, INE-NoReal, INE-Estimada. (I think if I can set tow parameters for xName it works better)

But now... when I've a lot of series, the bars not display correct. Very thin


I attach an example

Attachment: ChartExample_9115756a.zip


SK Saravana Kumar Kanagavel Syncfusion Team May 5, 2017 12:19 PM UTC

Hi Manolo, 
 
Thanks for your update. 
We have analyzed your query and modified the sample based on your requirement. Generally, the width of the column will be calculated based on the number of series, number of data points and width of the axis. Thus there are more number of series in the sample, the size calculated for column will be less. This is the current behavior in chart. 

But your requirement can be achieved as an work around by setting values to zoomPosition property and by enabling the scrollbars to the axes. So the chart will be scaled horizontal and the columns will be displayed with higher width. You can navigate to other columns by dragging the horizontal scroll bar. 

Please find the code example below 
[CSHTML] 
@(Html.EJ().Chart("container3") 
            .PrimaryXAxis(pr => pr.ZoomFactor(0.1).ZoomPosition(1.0)) 
            .CommonSeriesOptions(cr =>cr.ColumnWidth(15.0)) 
) 

And you can find the modified 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 
 
 



MA Manolo May 5, 2017 01:50 PM UTC

Hi,

Thanks for your answer!

I read the documentation, and I thought that values were betweem 0 and 1




But now, I've another problem. If I load more data, the chart is reduced, so... can charts has a horizontal scroll? I think that is the best solution.



DD Dharanidharan Dharmasivam Syncfusion Team May 8, 2017 11:44 AM UTC

Hi Manolo, 

Thanks for your update. 

Specifying the columnWidth between 0 to 1 is the proper way. But if we specify more than 1 value for columnWidth, will also work. The reason why we have specified 15 is, consider the below screenshot, if we have specified zoomFactor as 1 and columnWidth as 1, then all the points with all series will be rendered without scaling. So in order to scale this, we have specified the zoomFactor as 0.1. But even though the column will render with less width. So to make it bigger, we have specified 15 for columnWidth. 

Screenshot: 

 


Also chart can be scaled by specifying the zoomFactor as 0.01 and columnWidth as 1, so that the output can be achieved as depicted in the below screenshot. 
 

So you can either decrease the zoomFactor and coulmnWidth values to 0.01 and 1 or set 0.1 and 15 respectively, based on your scenario. The horizontal scrollbar will be visible while zooming the chart or if we specify values for zoomPosition or zoomFactor properties. 

Find the modified sample from the below link. 
 
Thanks 
Dharani. 



MA Manolo May 11, 2017 11:09 AM UTC

Finally, I set coulmnWidth in function of series' number, and works fine

Thanks!



SK Sanjith Kesavan Syncfusion Team May 12, 2017 09:02 AM UTC

  
Hi Manolo, 

Thanks for your update. Please let us know if you need further assistance on this. 

Regards, 
Sanjith. 


Loader.
Live Chat Icon For mobile
Up arrow icon