I use svg.js to draw my chart. The chart is very specific, so I can't use some plugin to do it.
I have elements, rectangles, on my chart that are too long. The problem is that I can't resize all elements to display the elements that are too long; I have to scroll.
How can I do this?
Solution 1:
Drag and move the SVG to change the position of all elements.
This doesn't work when I use it on mobile device in browser; when I try to drag, the elements do not move, because browser goes into zoom mode.
My example:
Element 2 is too long; it's svg rect. Is it possible to allow scrolling horizontally? Or, is there a way to move all of the element's on the chart?
Related
When setting overflow:scroll to have scrollbars instead of panning in treechart, facing strange issues. On folding the top rood node cells, the node going behind outline container and not centre aligned. The outline container is fixed in position and always visible.
Graph.fit is not the option which i am looking for, is there any way i can resize the graph container according to the size of graph?
Expectation is to call a method, so that the folded cell should be present in the place where it was got clicked or at-least come to the centre and visible.
Not full answer, but if you want to resize graph container, there is doResizeContainer method. It accepts width and height as its parameters
I have a Go.js flowchart where you can drag&drop nodes from a palette and create links between them. My problem is that when I try to move a node outside the viewport bounds the diagram doesn't scroll. The same happens when I try to draw a link to a node which is outside the viewport, the diagram doesn't scroll but the link just runs out of the viewport.
Is there any implemented solution for that? When I try to drag a node from the palette to the diagram and I move it close to the viewport bounds, the diagram scrolls, I would need something similar.
Anyway, congrats on the product because it has a lot of cool functionality.
Unless you have explicitly disabled it, the GoJS Diagram supports auto-scrolling for dragging and for linking and for relinking.
Just hold the mouse/finger down just inside the edge of the viewport. The closer to the edge you are the faster it will scroll.
Is there a way to allow the canvas object to be scrolled beyond content.
Example:
A canvas created with 1000*1000. And Enabled PAN and Zoom on the canvas. Draw a rectangle on the canvas and move the rectangle with mouse to the edge of the boundaries( top,right, bottom, left) it should scroll the the rectangle to the end of the canvas.
Right now my issue is I can drag the rectangle till the browser boundaries. I need to allow the rectangle to drag beyond the content so that I can use the full canvas. I can PAN the canvas to move around the browser.
Thanks
PIXI is just a rendering engine that draws things on canvas. PIXI does not have any mechanics to control canvas position on the web page.
Probably the most efficient way to address your use case is to:
Make canvas fit on the screen entirely (do not extend it beyond the screen bondary, never pan nor zoom canvas as DOM object).
Make "content" PIXI.Container that holds your content (stage -> content -> rectangles), and change "content" container position as needed to scroll the content inside the canvas.
If you insist on manipulating canvas position, you can position it absolutely on the webpage and manipulate it as DOM object.
Whatever approach you take, you will have to detect that drag and drop approaches the edge and do panning manually in your code. There's nothing in PIXI, as far as I am aware, that would facilitate this.
I am using the default example of the Kendo UI dataviz bar chart. When I zoom into the page, the graph starts to overlap over other elements on the page. Is there a way to make sure that everything in the div containing the graph does not overlap onto other divs. This is a huge problem as when viewed on a tablet, it is overlapping other elements.
How are you "zooming" in?
The KendoChart gets a fixed width when it is created - it's just an SVG. I'm not aware of a means to animate resizing it - you could change the height and width manually, or possibly just redraw the chart, but I imagine that would be fairly intensive and wouldn't animate well.
So I have a grid of images (map tiles) and I draw a semi-transparent mask over it using an absolutely positioned div with width and height set to 100%.
I now want the user to be able to draw out a rectangle on the mask, with the mouse using mouse-down, drag, mouse-up. The rectangle would be drawn dynamically as the mouse moves, and the rectangle would be like a window through the mask displaying the map tiles underneath with no semi-transparency.
I'm currently looking at using 5 divs - one for the window and 4 for the mask which would be resized using javascript as I drag the mouse. Does anyone know an easier way to do this ? I'm using jquery and I need to support IE7 upwards so html5 only technology is out.
Cheers,
Colm
I think the jQuery Crop plugin does exactly what you need (Demo here).
Maybe it's possible to carve that part out from it.
You should try out SVG canvas instead. There's a SVG js library, good for beginner:
http://raphaeljs.com/, check it out
PLEASE NOTE THAT THIS HAS NOTHING TO DO WITH HTML5 (PLEASE DONT MIX UP WITH HTML5 CANVAS, THIS IS SVG)