I am trying to come up with a way of adding points on top of a one page PDF graph in a webpage. The pdf's all have a similar structure, but the x and y axis do not always land in the same spot with respect to pixels to the left/right or top/bottom. The scale is also not always the same. I can make these into images as well if need be. The end goal is to take data from another application and plot it on top of these existing graphs as a background.
I so far have come up with a user unfriendly solution of putting the graph in a canvas, clicking on the x and y axis and setting the x and y position of the graph, and plotting from there.
I was wondering if you had any suggestions on ways to do this in a more automatic fashion. The reason I dont want to generate new line charts in the webpage is because I am running from a database of thousands of these PDF files and they are very complex. Re-making them from scratch just to put in the webpage would take months.
Related
I am using plotly js offline line graphs in HTML, when the json has more data its taking more than one min to load.
We have left nav bar , when switching from one tab to another its taking more time to load the content due to plotly line graphs.
Data for line graph: X-axis having 15 transactions, each transaction has around 5000 points to plot.
Approaches I have tried:
Giving an event listener for HTML on load of the page , minified the files (https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Author_fast-loading_HTML_pages).
Giving “type: scatterGL” for line graphs and plotly.react(id,data,layout) instead of plotly.newPlot(id,data,layout).
By using above approaches also its taking same time.
May I please kindly know if anyone know how the loading time can be reduced for large data.
Thanks,
Bhuvana.
That is a lot of points. 75,000 points means that Plotly is adding DOM elements. That is way too many for any library. Consider using Canvas instead, Plotly has support for it and this example shows how it can handle 1 million points in a scatter plot, no problem.
is there any tool to help me work with an image in the same way i can deal with map, the task is to create a tool that will allow the user to upload a building layout and then set on it points that referring to row data.
i achieved that with Canvas but I'm not feeling it's completed or perfect
Because for example implementing zooming and dragging will make me lose a lot of things like mouse hover on the provide points or the x, y once it's zoomed is different from the actual image (Without zooming)
so any one now like these tool
I have created a layout algorithm for graph visualization so that y position of each node corresponds to time and the graph starts from the top (t=0) and grows dawnwards. I also draw edges with bazier forms I made. Also the color of the edges vary throughout the edge. I need the layout/look to remain the same. Currently, I am using pycairo for drawing the graph that generates a CSV file (potentially, I can create other formats such as PDF,PNG too). My goal is to make the visualization interactive, for example to be able to click on specific nodes and get the data related to that node back. I couldn't figure out how to do this in python. Now, I want to do this in JavaScript and D3.js.
My question is how can I make the CSV output interactive? For example, when clicking on a node, it should return its y position (which represents time), and some other attributes. I also want to be able to jump to a certain y position in a graph given user's input.
It would also be helpful to give me some clues on how to think about this problem.
This is a screenshot of what the final result looks like. The horizontal lines are really not important
Please somebody help me.
I need to save visual layout (after nodes of graph was manipulated) and load this visual representation next time.
I tried to save position of each node, and write this positions in input json {data:{id..}, position{x=.y=}.
But new graph was draw incorrect.
There are two types of positions, where it is on screen and where it is on graph. Be sure to save and load the right one. It might not look the same on your screen if you have panned or zoomed the view port. But the graph relative positions should be able to be saved.
Basically, what I'm trying to do is use a map viewer as an image viewer with the same sort of efficient tile-loading, zoom/pan awesomeness without having to build it myself.
Specifically, I need an image viewer that will allow the image to grow and change while not altering the coordinates of any older (unchanged) tiles. This means that the center point (0,0), where the image started growing from, must always remain (0,0). So I'm looking for a library that will allow me to use a very basic Cartesian coordinate system (no map projection!), which will ask for tiles infinitely in all directions with no repetition (as opposed to how map libraries just ignore y-axis above and below the map, but the x axis repeats).
There's another catch. I need zoom level 0 to be zoomed in all the way. Since the image is constantly growing, there's no way to tell what the max zoom level will be, and the coordinates need to be based on the base image layer tiles so that every tile in zoom level z contains 2^z base layer tiles.
I am wondering if this is possible with OpenLayers and how to do it. If it's not, any suggestions of other (open-source javascript) libraries that can do this would be very appreciated! I've tried playing around with Polymaps, but the documentation is lacking too much for me to be able to tell if it will work. So far no luck.
Please let me know if none of this made sense, and I'll try to include some images or better explanations. Thanks!
I ended up using Polymaps after all, since I like it more than OpenLayers, because it's faster and has much smoother scrolling and panning. I wasn't able to do exactly what I wanted, but what I did was close enough.
I ended up writing my own layer (based on the po.image() layer), which disabled infinite horizontal looping of the map. I then wrote my own version of po.url() that modified the requests going to the server for tiles so that zooming was reversed (I just arbitrarily picked a 'max' zoom of 20, then when making a request subtract the zoom level from 20) and the x and y coordinates were converted to cartesian coordinates from the standard row, column coordinates Polymaps uses, based on the zoom level and the map centered at (0,0).
If anyone is interested in the code I can post it here. Let me know!
EDIT: I've posted the code on github at https://github.com/camupod/polymaps
The relevant files are src/Backwards* and examples/backwards (though it actually doesn't work, you might be able to clean some information about how it should work).