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.

Zoom and Center canvas on an object

Thread ID:

Created:

Updated:

Platform:

Replies:

126116 Sep 24,2016 01:57 AM Sep 26,2016 05:35 AM ASP.NET Web Forms 1
loading
Tags: Diagram
Mit
Asked On September 24, 2016 01:57 AM

Hi,

I want to achieve this:

1) I have an object stored in the database and renders on load. And I want when diagram loads it zooms and center on that particular object.
2) I already have object found using ID. I can already zoom using one of your knowledge base article.
3) Issue is when I zoom, even the object can be fit on the diagram, it is not centered in the diagram. So I want to achieve it before zooming.

Regards,

Shyam G [Syncfusion]
Replied On September 26, 2016 05:35 AM

Hi Mit, 
Query 
Response 
1) I have an object stored in the database and renders on load. And I want when diagram loads it zooms and center on that particular object.
  
We suggest you to use zoom  focusPoint” property to achieve your requirement. Please refer the code example and help documentation below. 
Code example: 
function zoomin() { 
              
            var diagram = $("#Diagram1").ejDiagram("instance"); 
            var node = diagram.model.selectedItems.children[0]; 
            var zoom1 = ej.datavisualization.Diagram.Zoom(); 
            if(node) 
                zoom1.focusPoint = { x: node.offsetX, y: node.offsetY }; 
            diagram.zoomTo(zoom1); 
        } 
Issue is when I zoom, even the object can be fit on the diagram, it is not centered in the diagram. So I want to achieve it before zooming. 
Please use diagram’s client side API method bringToCenter which brings the specified rectangular region of the diagram content to the center of the view port. Please refer to the code example and help documentation below. 
Code example: 
<script>  
$(window).load(function () { 
var diagram=$("#diagramcontent").ejDiagram("instance");  
diagram.bringToCenter(ej.datavisualization.Diagram.Rectangle(700, 500, 80, 80));  
}); 
</script> 
 
Help documentation: 
 
Regards, 
Shyam G 


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.

;