Zoom

[Cosimo Carbonelli]

I have a diagram and I havt 2 buttons for zoomin and zoomout.

The javascript code for the buttons is:

function zoomIn() {

    var diagram = $("#dgrMap").ejDiagram("instance");

    var zoom = ej.datavisualization.Diagram.Zoom();

    zoom.zoomFactor = .2;

    zoom.zoomCommand = ej.datavisualization.Diagram.ZoomCommand.ZoomIn;

    diagram.zoomTo(zoom);

}

function zoomOut() {

    var diagram = $("#dgrMap").ejDiagram("instance");

    var zoom = ej.datavisualization.Diagram.Zoom();

    zoom.zoomFactor = .2;

    zoom.zoomCommand = ej.datavisualization.Diagram.ZoomCommand.ZoomOut;

    diagram.zoomTo(zoom);

}

I have the diagram shown in picture FullDiagram.JPG, when I zoom out the diagram is translated to the bottom as shown in picture DiagramZoomOut.JPG. When I zoom in the diagram is translated to up and to right and I have to scroll it, as shown in picture DiagramZoomIn.JPG.  Can you help me?

I have also a problem with the fittopage function, I have used it in document.ready as it follows:

diagram.fitToPage("width", "pageSettings", { "left": 0, "top": 25, "right": 50, "bottom": 15 });

The diagram has width=100% and is in a panel with width equals to the width of the page. The function works properly when the drawn diagram is bigger than the screen otherwise scrollbar appears also if the diagram fit in the page. Can you help me?

Thanks and best regards

Attachment: Diagrams_f19ca2b5.zip

[Shyam G]

HI Cosimo,

Query	Response
I have the diagram shown in picture FullDiagram.JPG, when I zoom out the diagram is translated to the bottom as shown in picture DiagramZoomOut.JPG. When I zoom in the diagram is translated to up and to right and I have to scroll it, as shown in picture DiagramZoomIn.JPG.  Can you help me?	By default, the zooming operation is performed based on the center(focusPoint) of the diagram. You can set the focusPoint for the zooming, so that the diagram gets scaled based on the focusPoint value. Please refer to the code example below. Code example: function zoomIn() {             var diagram = $("#diagram").ejDiagram("instance");             var zoom = ej.datavisualization.Diagram.Zoom();             //set the focusPoint value             zoom.focusPoint = {x:100,y:100};                           diagram.zoomTo(zoom);         }
I have also a problem with the fittopage function, I have used it in document.ready as it follows: diagram.fitToPage("width", "pageSettings", { "left": 0, "top": 25, "right": 50, "bottom": 15 }); The diagram has width=100% and is in a panel with width equals to the width of the page. The function works properly when the drawn diagram is bigger than the screen otherwise scrollbar appears also if the diagram fit in the page. Can you help me?	Our diagram client side API method fitToPage will fit the diagram Content into the diagram viewport. If the diagram has larger content, then the diagram content will fit within the viewport and no scrollbar appears. If the diagram has smaller content, then the diagram content will be zoomed and fits into the viewport and the scrollbar will be appear. This is the default behavior of our control. Could you please provide your requirement in detail. So that we can analyze and provide an better solution.

Regards,
Shyam G

[Cosimo Carbonelli]

HI Cosimo,

Query	Response
I have the diagram shown in picture FullDiagram.JPG, when I zoom out the diagram is translated to the bottom as shown in picture DiagramZoomOut.JPG. When I zoom in the diagram is translated to up and to right and I have to scroll it, as shown in picture DiagramZoomIn.JPG.  Can you help me?	By default, the zooming operation is performed based on the center(focusPoint) of the diagram. You can set the focusPoint for the zooming, so that the diagram gets scaled based on the focusPoint value. Please refer to the code example below. Code example: function zoomIn() {             var diagram = $("#diagram").ejDiagram("instance");             var zoom = ej.datavisualization.Diagram.Zoom();             //set the focusPoint value             zoom.focusPoint = {x:100,y:100};                           diagram.zoomTo(zoom);         }
I have also a problem with the fittopage function, I have used it in document.ready as it follows: diagram.fitToPage("width", "pageSettings", { "left": 0, "top": 25, "right": 50, "bottom": 15 }); The diagram has width=100% and is in a panel with width equals to the width of the page. The function works properly when the drawn diagram is bigger than the screen otherwise scrollbar appears also if the diagram fit in the page. Can you help me?	Our diagram client side API method fitToPage will fit the diagram Content into the diagram viewport. If the diagram has larger content, then the diagram content will fit within the viewport and no scrollbar appears. If the diagram has smaller content, then the diagram content will be zoomed and fits into the viewport and the scrollbar will be appear. This is the default behavior of our control. Could you please provide your requirement in detail. So that we can analyze and provide an better solution.

Regards,
Shyam G

Hi Shyam,

thank you for your answer.

I don't understand the fittopage behavior. Why if the diagram fit the viewport the scrollbar appears? My requirement is that vertical scrollbar appears only when the diagram does not fit the viewport while horizontal scrollbar appear only if the user zoom the diagram.

Best regards.

[Shyam G]

Hi Cosimo,

We considered this “Additional options to fittopage, when the diagram content is smaller than viewport” as a feature request and a support incident has been created under your account to track the status of this requirement. Please log on to our support website to check for further updates.

https://www.syncfusion.com/account/login?ReturnUrl=/support/directtrac/incidents

Regards,

Shyam G