Multiple bugs for charts on maps blazor server

Question

I'm experiencing three different bugs with charts on maps;I'm drawing multiple pies based on a list of objects... @for (int i = 0; i < DrawList.Count; i++) { var pc = DrawList[i].PieCoords; var ps = DrawList[i].PieSegments; var title = $"{DrawList[i].LocationName}"; var colours = DrawList[i].PieColours; var ID = "pie" + i; @{

} } ...If I enclose them in

Swetha Babu · Answer

Hi Ralph, Thank you for contacting Syncfusion support. Please find the details for your queries below Query Details If I enclose them in

Ralph Hope · Answer

Many thanks for the project. I was trying to use the Refresh method but couldn't make it work. the @ref on the maps in the HTML was the missing piece.

HOWEVER - this event interupts the pan -- if you try out your project you'll see you can now only pan one pixel at a time (!). Is there an event that fires once panning has finished rather than started?

Also, can you expand on the lack of support for adding markers in a loop? Maybe my understanding of Blazor is lacking, but surely looking the HTML is no different from just having multiple blocks? It does work in terms of it does create multiple charts, though it seems to be producing refresh problems.

Can I use the .AddMarker method in code to add the charts to the map instead? If not I'm not sure I see what .AddMarker does. It seems very limiting if the number of charts on a map needs to be hard-coded into the app.

Swetha Babu · Answer

Hi Ralph, 

Please find the below response for your queries. 





Queries 

Details 


if you try out your project you'll see you can now only pan one pixel at a time (!).  Is there an event that fires once panning has finished rather than started? 

The provided sample is a proof of concept with respect to the requirement which is achievable. 

When panning the map, the component gets refreshed and pie chart gets removed. We are working to resolve this issue with priority and will include the fix for this in our upcoming weekly NuGet. Please find the feedback link for the bug report for your reference. 

https://www.syncfusion.com/feedback/15598/pie-chart-is-not-rendering-in-maps-during-panning 



can you expand on the lack of support for adding markers in a loop?  Maybe my understanding of Blazor is lacking, but surely looking the HTML is no different from just having multiple blocks?  It does work in terms of it does create multiple charts, though it seems to be producing refresh problems. 

At present, we do not have support for adding the marker in the declarative approach of the Blazor application. We need to provide some internal support to update the markers in the Maps component. We have considered this as a feature and please find the feedback link for further follow-up. 

https://www.syncfusion.com/feedback/14843/declarative-rendering-of-complex-property-in-maps 

This feature will be available in any of our upcoming releases. 


Can I use the .AddMarker method in code to add the charts to the map instead?  If not I'm not sure I see what .AddMarker does.  It seems very limiting if the number of charts on a map needs to be hard-coded into the app. 

When we check the AddMarker method for adding a marker, we are unable to add a marker. However, we are checking on this issue. We will check this and update you with further details on 2nd July, 2020. 

Even if we fix this issue, we cannot add a pie chart from the code behind dynamically. We can initiate a component only using the razor tag helpers in the Blazor application. 

Please let us know if you need any assistance. 

Regards, Swetha Babu

Ralph Hope · Answer

Thanks for the replies. I started looking at building the charts from code. The lack of documentation is a problem, but it looks like pretty much all the required methods are there once whatever fixes/updates are needed internally to your libraries are made.

I've got pretty far with building a solution using Syncfusion Blazor on a trial licence, but without the ability to add pie charts dynamically (and preferably from code as it's much more controllable) I can't see me being able to go ahead and purchase it.

Do you have a timeline for getting this functionality working? Even if it's only a guess?

Sabari Anand Senthamarai Kannan · Answer

Hi Ralph, 

Thank you for your update. 

We would like to know your exact requirement of adding the pie chart dynamically in the marker template. Do you need to add the pie chart dynamically using blazor declarative syntax(such as @if, @for, etc) or from the code behind(using the class)? Please let us know these details. It will be helpful for us to analyze further and assist you better. 

We will fix the panning issue in the maps with pie chart by the mid of the July, 2020. We will implement the declarative syntax for adding the marker templates dynamically by 2020 Volume 3 release which is expected to be available by the month of September, 2020. However, if this feature is completed before this timeline, we will provide the patch for you. 

Please let us know if you need any further assistance. 

Regards, 
Sabari Anand

Ralph Hope · Answer

Hi there,Many thanks for the helpful and detailed reply.  Either blazor declarative syntax or code would work, but code would be my preference - it's more flexible and controlable, and if there are going to be methods to also remove the pies so I can add them and remove them at will, then code would be much more useful - there's never going to be blazor syntax for the removal of pies.Many thanksRalph

Swetha Babu · Answer

Hi Ralph, 

Thank you for the update. 

As we updated earlier, we will provide the declarative syntax support for adding marker templates by 2020 Volume 3 release. The code behind rendering of the component is not recommended in the Blazor application. So the support is not available for this.  

The AddMarker method is used to add marker elements dynamically which are created from the Maps control. But the Pie chart is a separate control. We cannot render it from the code behind of the application using AddMarker method. However, when we provide the support for declarative syntax, we can control the rendering of the marker templates and pie chart using @if..else razor code block from the code behind of the application. 

Please let us know if you need any further assistance. 

Regards, Swetha Babu

Swetha Babu · Answer

Hi Ralph,Sorry for the inconvenience caused.We have not included the reported feature of adding markers dynamically using declarative syntax of Blazor in our Volume 3 Main Release. However, we will include the implementation in our next weekly NuGet release which is expected to be available on 20th October, 2020.Regards,Swetha Babu

Swetha Babu · Answer

Hi Ralph,Thank you for your patience.We have included the fix for the reported issue of "pie chart gets hidden while panning" in our weekly NuGet patch release(v18.3.42). You can download the package from the below link.https://www.nuget.org/packages/Syncfusion.Blazor/ 
  
We have created the simple Blazor application to demonstrate the same and it can be downloaded from the below link. 
  
 https://www.syncfusion.com/downloads/support/forum/155491/ze/MapsPie874102045  
  
We are unable to include your other requirements “marker cluster template” and  “declarative syntax support” in this package. We are still working in them with high priority. We will include the fixes for these implementations in our next weekly NuGet release which is expected to be available on October 27, 2020. 
Please let us know if you need any further assistance.Regards,Swetha Babu

Ralph Hope · Answer

Fantastic, thanks.  Looking forward to trying out the panning, and having the declarative adding working + clustering working next week.  It's great timing as I'm looking to launch in a week or two!

Swetha Babu · Answer

Hi Ralph,Thank you for your update.Most Welcome! We will let you know once the fix is available in our weekly patch release.Please let us know if you need any further assistance.Regards,Swetha Babu

Indumathi Ravi · Answer

Hi Ralph, 
  
Sorry for the inconvenience caused. 
  
We have implemented the marker cluster template support in the script side for the Blazor Maps component. But we are facing issues when rendering marker cluster with the Blazor specific interop methods in the application. So the marker templates are not clustering properly. We are working in this with high priority. We will implement this support and declarative syntax support for marker template and provide it as custom package on or before November 3, 2020. 
  
Regards, 
Indumathi

Ralph Hope · Answer

Great, thanks! Looking forward to the package!

Thanks for all the work going into this. I would have thought it was as straight forward as being able to pass it a list of SfAccumulationChart objects rather than having to manually put them into the razor code, but then I have no idea how your code works and I guess it is all much more complex I would guess :)

Swetha Babu · Answer

Hi Ralph,Thank you for your update.The implementation is complex  as it involves two Blazor components. However, we are working in this to achieve your requirement. As we mentioned earlier, we will update you with further details on November 3, 2020.Please let us know if you need any further assistance.Regards,Swetha Babu

Indumathi Ravi · Answer

Hi Ralph,

Sorry for the inconvenience caused.

We have implemented the marker cluster template support in the Blazor Maps component. We can render the marker cluster template in the map when data source is provided with multiple location values. Please find the screen capture video of the working of the cluster template from the below link.

https://www.syncfusion.com/downloads/support/forum/155491/ze/ClusterTemplate1033371284

In the above video, we have provided markers as images using the template support.

Please find the NuGet package for the implementation from the below link.

https://www.syncfusion.com/downloads/support/forum/155491/ze/Syncfusion.Blazor1779958063

We are still facing issue when Pie chart is rendered with the marker and cluster template implementation. The pie charts gets hidden when the clustering process is started. The support for declarative syntax for marker settings are also not implemented in this package. We will implement these support and provide you the package on November 11, 2020.
 
Regards, 
Indumathi R

Ralph Hope · Answer

I really do appreciate all the hard work, but the estimate for this gets 1 week longer every week.

The support for declarative syntax is the most important part for me.

Can you give me a realistic time-frame for this?

Swetha Babu · Answer

Hi Ralph, 
  
Thank you for your update. 
  
We have analyzed the issues and the other pending works in the implementation. We are working on the declarative syntax issue and issues in pie chart as marker cluster with high priority. However, we will provide the fix for the issues as custom package on the mentioned timeline without any further delay. 
  
Please let us know if you need any further assistance. 
  
Regards, 
Swetha Babu

Indumathi Ravi · Answer

Hi Ralph, 
  
Sorry for the inconvenience caused. 
  
We have implemented the marker template rendering in the declarative syntax. But the Pie charts are not rendering properly in the marker templates with the declarative syntax. The marker clusters are also not rendering properly when Pie chart is used as templates for the clusters. Since the Pie chart is different component and it does not comes under Maps architecture, we are facing some complexities internally to update the DOM elements for the markers and clusters. However, we are checking on this with high priority. We will check these issues and update you with further details on November 17, 2020. However, we have provided the custom package for the declarative syntax below for your reference. 
  
https://www.syncfusion.com/downloads/support/directtrac/general/ze/SyncfusionBlazor-1694496934 
  
We have also created a sample to demonstrate the marker templates with default cluster shapes rendered with declarative syntax. Please find the sample application from the below link. 
https://www.syncfusion.com/downloads/support/directtrac/general/ze/BlazorMarker601371143 
  
Please let us know if you need any further assistance. 
  
Regards, 
Indumathi R

Indumathi Ravi · Answer

Hi Ralph, 
  
Thank you for your patience. 
  
We have fixed the mentioned issues in the Pie chart rendering with the marker cluster template and the declarative syntax with marker settings in the Maps component. The marker templates and its cluster are now rendered as Pie charts. Please find the sample application and custom NuGet package links below. We have also recorded the working of the implementation as video and it can be downloaded from the below link. 
  
Package link:  https://www.syncfusion.com/downloads/support/directtrac/general/ze/BlazorNuget-860211212 
Sample link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/BlazorApp1368844343 
Video link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/Video-310799207 
  
Please let us know that this implementation meets your requirement. The provided implementation is still in testing phase. We will fix further issues found in the testing phase and provide you the custom package on November 23, 2020. 
  
Regards, 
Indumathi R

Ralph Hope · Answer

Thanks for this. Seem pretty buggy though. (on your demo) When zooming charts regularly disappear instead of declustering, and panning causes all the charts to vanish, unless you zoom in/out a few times.

The panning seems to work fine in a net5.0 project, but the zooming doesnt

Swetha Babu · Answer

Hi Ralph,Thank you for the update.We are able to reproduce the reported issues in the implementation. However, as we updated earlier, we will fix the bugs and provide you the custom patch on November 23, 2020.Regards,Swetha Babu

Ralph Hope · Answer

Sounds good, thanks!!One thing -- while you're still in dev with this and have the hood up so to speak...I'm using the click event from the map so that when someone clicks on a segment I can take them to a data page -- MouseChartClick(Syncfusion.Blazor.Charts.IMouseEventArgs args)I currently use this:            int chartid = int.Parse(target.Substring(3, target.IndexOf("Series_") - 4));            int segmentid = int.Parse(target.Substring(target.IndexOf("Point_") + 6, target.Length - (target.IndexOf("Point_") + 6)));To figure out what they clicked.I'm not sure how this'll work once its clustered, but basically, I need the id's of all the pies that went into the cluster.  Perhaps your target series can contain a comma separated list or similar so I can produce an aggregated datalist that matches the click on a clustered chart.Thanks!Ralph

Sabari Anand Senthamarai Kannan · Answer

Hi Ralph, 
 
Thank you for the update. 
 
We are working in the bugs found during the testing phase of the implementation. We are facing issue in the reported scenario. However, we will check the reported issue and update you with further details on November 23, 2020. 
 
Regards, Sabari Anand

Sabari Anand Senthamarai Kannan · Answer

Hi Ralph, 
  
We've been continuously trying to resolve the issues in zooming and panning the cluster templates with the Pie chart in the Maps component. But the issues are more complex than we originally thought. Multiple clusters are not rendered correctly when the Pie chart is used in the template. We also face issues in cluster expansion with the cluster template as the Pie chart.  
 
To resolve these issues, we need to make major architectural changes in the component itself. We have planned to make these architectural changes, but this involves more time for analysis, design, development, and testing. So, we have estimated that these changes can be completed around the mid of January 2021. We will complete and provide you the custom patch on the mentioned timeline. Can you please let us know if this timeline will be acceptable for you? 
  
We apologize for the inconvenience caused. 
 
Regards, Sabari Anand

Ralph Hope · Answer

Yes, I can cope with that. Are you able to get the clustering working without the zooming and panning as a temporary measure? I'd rather have the final solution be a week or two later if I can have clustering working on a static map (no zoom/pan) in the next week or two.

Thanks!!

Ralph

Sabari Anand Senthamarai Kannan · Answer

Hi Ralph, 
 
Thank you for your update. 
 
During the clustering process, only one Pie chart is rendering as cluster where multiple clusters must be rendered. So this issue will be there disabling the panning and zooming functionalities in the maps in the provided package. However, we are analyzing to resolve this issue as requested. We will update you with further details on November 26, 2020. 
 
Regards, Sabari Anand

Sabari Anand Senthamarai Kannan · Answer

Hi Ralph, 
 
We have analyzed the feasibility to resolve the reported issue when the zooming and panning is disabled. When the shape type cluster is used the multiple clusters will be rendered whereas when Pie chart is used as cluster template, only one Pie chart is rendered in the place for multiple pie charts. Please find the screenshots below for your reference below. 
 
Cluster with default shape: 
 
  
 
Cluster Template as Pie chart: 
 
  
When we analyzed to overcome this issue, we came to know that this issue can also be resolved with the architectural changes we informed in the last update. So at present, we are unable to provide the fix for this issues in one or two weeks. However, we will fix these issues and update you the custom package by the mid of January 2021. 
 
Regards, Sabari Anand

Sabari Anand Senthamarai Kannan · Answer

Hi Ralph, 
 
Thank you for your patience. 
 
We have implemented the marker cluster template support and declarative syntax in the Blazor Maps component. We have created custom NuGet package with the implementation. Please find the packages from the below link. 
 
https://www.syncfusion.com/downloads/support/forum/155491/ze/Syncfusion.Blazor-NuGets1680278773 
 
We have also created the sample application with marker template and cluster template with Pie charts. When the map is zoomed, the pie chart in the cluster template will be expanded to pie chart in marker template. Please find the sample application from the below link. 
 
https://www.syncfusion.com/downloads/support/forum/155491/ze/MapsPieChart-486106629 
 
Note: A script error may be thrown when the provided NuGet is installed. So, please clear the NuGet cache before installing the above NuGet packages.  
 
We have changed the architecture of the Maps component from the Volume 4 release. So, there may be some performance issues in the Maps rendering. We have planned to overcome this performance issue. It will be fixed in any of our upcoming releases. 
 
Please try the above packages and the sample application and let us know whether it meets your requirement. If not, please provide us more details regarding the implementation. It will be helpful for us to analyze further and assist you better. 
 
Regards, Sabari Anand

Query	Details
If I enclose them in <MapsLayer ShapeData='new { dataOptions = "WorldMap.json" }> then as the code decreases the number of elements in my list the pies correctly decrease in number, but if i increase it, they all disappear.	At present, we do not support rendering the declarative approach in rendering the complex property in the maps component. We need to add the accumulation chart individually to the marker template. If you are facing further issues, when rendering the accumulation chart individually, please provide us your code snippet or the application to reproduce the reported issue.
If I enclose them in <MapsLayer LayerType="ShapeLayerType.OSM" UrlTemplate="http://mt1.google.com/vt/lyrs=m@129&hl=en&x=tileX&y=tileY&z=level"> then they disappear and reappear as expected as the code adds and remove items from the list, HOWEVER all the coordinates are offset (ie they draw in the wrong place).	We can add the accumulation chart in the OSM maps using the “MarkerTemplate” in “MapsMarker” property. We are unable to reproduce the reported issue when the accumulation chart is rendered individually in the marker template.
whichever i use, all my pie charts disappear on panning the map and only reappear when zooming out and in.	When the panning is performed in the maps, the maps will re-render with the current panned location. At this instance, we need to re-render the maps to render the accumulation chart. So, we need to call Refresh() method to resolve the reported issue.

Queries	Details
if you try out your project you'll see you can now only pan one pixel at a time (!). Is there an event that fires once panning has finished rather than started?	The provided sample is a proof of concept with respect to the requirement which is achievable. When panning the map, the component gets refreshed and pie chart gets removed. We are working to resolve this issue with priority and will include the fix for this in our upcoming weekly NuGet. Please find the feedback link for the bug report for your reference. https://www.syncfusion.com/feedback/15598/pie-chart-is-not-rendering-in-maps-during-panning
can you expand on the lack of support for adding markers in a loop? Maybe my understanding of Blazor is lacking, but surely looking the HTML is no different from just having multiple blocks? It does work in terms of it does create multiple charts, though it seems to be producing refresh problems.	At present, we do not have support for adding the marker in the declarative approach of the Blazor application. We need to provide some internal support to update the markers in the Maps component. We have considered this as a feature and please find the feedback link for further follow-up. https://www.syncfusion.com/feedback/14843/declarative-rendering-of-complex-property-in-maps This feature will be available in any of our upcoming releases.
Can I use the .AddMarker method in code to add the charts to the map instead? If not I'm not sure I see what .AddMarker does. It seems very limiting if the number of charts on a map needs to be hard-coded into the app.	When we check the AddMarker method for adding a marker, we are unable to add a marker. However, we are checking on this issue. We will check this and update you with further details on 2^nd July, 2020. Even if we fix this issue, we cannot add a pie chart from the code behind dynamically. We can initiate a component only using the razor tag helpers in the Blazor application.