Multiple plots on page rezoom when resizing one - javascript

I have about 10 plots on a page all dynamically created. To save space they all start out small and users can press a button to "enlarge" them when they want to look at one closer. In both small and large modes users can zoom and manipulate however they want, but when a user zooms on one plot then toggles the size of another plot, the plot they are resizing "snaps" to the zoom profile of the first plot.
Hopefully I didn't explain that too confusingly. Here's a snippet of the code doing the resizing.
$(document.getElementById(expArr[index])).click( function() {
$(gd).toggleClass('clk');
Plotly.Plots.resize(gd);
});
expArr just holds the id of the buttons as they are dynamically created in the codebehind and gd holds the div that the plot is in. Toggleing the class of the div just changes the class that holds height/width.
All of the resizing works fine. It's just when you resize one plot and zoom, then resize a second plot, the second plot "snaps" to the zoom done on the first plot.

I figured out what I was doing wrong. I'm sure if I would have posted more code someone would have noticed my mistake.
Basically I was using a function with a loop in it to draw all my plots on the page, but I had left my layout var outside of all that so it was the same object being reused for each plot. So when I called resize on a plot it saw that layout changed and updated to the new data.
Simply moving layout fixed the problem

Related

Make a gap in the center of bubble d3 chart and paste content in it

I'm building a bubble chart using D3 js (v5), to show some user info and some logic in the center of the chart.
Basically I have a JSON with the total as the root and the children as each result.
I want to display the bubbles around that center div, and make so that the bubbles do not fit on it (this it the picture of what I want to build). Is it possible to do this with d3 js?
Tried to make some map around foreignObject, but nothing changed.

Can I animate D3 pie arcs if I'm not updating data?

I want to draw a D3 pie chart. Initially the arc segments will be hidden, then I want to animate them sequantially one by one to make them visible in response to keyboard/mouse events from the application flow.
The application flow is a linear: E.g. part 1, animate first arc segment to make it visible. Part 2, animate second segment to make it visible. Part 3, etc. until the pie is completely visible.
I'm interested in using the Swiper project - http://www.idangero.us/swiper/api/#.VqemYVOLQmI - so moving to each slide would trigger an event that would make an arc visible (i.e. onSlideChangeEnd would show each sequential arc)
One approach I could take would be to draw the pie segment as initially invisible, then use a style transition to make it visible:
d3.selectAll(“.segment1”).transition().duration(500).style("fill", "#7FB9E6”);
This could make each sequential arc visible in response to each event.
However that’s not quite the look I’m going for - I want the animation on the fill of the arc to appear like it’s moving from left to right, e.g. in this kind of "sweep" animation: http://jsfiddle.net/thmain/xL48ru9k/1/
Is this kind of animation possible to use if I’m not updating data using D3 (i.e. the chart is already created, I just want the arcs to appear sequentially in response to an event).
I'm new to animation / tweening so help is appreciated. Thanks.
One idea is to initialize the chart with all the values initially set to zero. Then, as your user swipes through your content, just update each element as needed with each items' respective data value.
I think (I haven't tried it) that it would create a 'bumping' effect, where each time a user swipes (or whatever the function call is) the chart's slices would 'add' a slice and resize the visible slices' portion of the data shown (if that makes sense).
The easiest way is probably to leverage the d3.svg.arc shape directly (a pie chart is merely a "helper" for creating many of these). If you know what the total of the data is, you can calculate the angle of each arc individually, and show/hide/animate them at will.

Zoomable background for cytoscape js

We're making a graph for a project right now. This graph should show all crossways of a city. And most ways between them. We started of using cytoscape.js for drawing the graph. Now we want a background behind the graph. This background will be the map of that city, so it has to be scrollable and at the right position.
Our first idea was to make a rectangle node and give it a background. Than we added the map and put in the right coördinates. Now the map is scrollable and is always at the right position. This gave us two problems. First the graph can't be panned anymore, cause when you try to pan you will try to select the underlying node. We fixed this by using the cytograh-panzoom plug-in.
The seccond problem is, that the edges aren't clickable anymore, because the background-node is now covering them and it seems impossible to get the edges on top.
The questions:
Is there a better library to draw such a graph?
If not, is it possible to draw edges on top of the nodes with cytoscape?
Is there another way with cytoscape to do this?
Kind regards
You could listen to viewport events and update the background-position and background-size properties of a background image set in the CSS for your cy div.
Or in lieu of a background image, you could have a separate div with an image that uses CSS transforms instead of background-* properties.

context.clearRect() doesnot work when giving tooltip option a graph using chat.js

Am using chat.js to plot a graph. In a particular event (mouse event) this graph is cleared and redrawn with new values. For clearing the canvas where graph the graph is drawn i use
context.clearRect(0,0,canvas.width,canvas.hight);
This clears the canvas and i can redraw the graph. But when i take my mouse pointer on to the plotted area( for tooltip function), graph is showing strange behavior. Its showing the value which are cleared and also the new values.
I have tried the same by disabling the tooltip option and it doesn't have any problem and works as expected.
I need to put the tooltip also. How can i solve the issue.

Animating div on top of Highcharts very slow

I am writing an app that uses Highcharts, and in one instance I want to have a "slider" at the bottom of the chart that extends up vertically over the chart. Moving the slider will update other parts of the page based on where the user moves the slider on the chart.
The problem is that when drawing anything on top of the Highchart (image or a div) the performance becomes absolutely unacceptable. The slider simply cannot keep up with the mouse movements See a jsfiddle here. Note - this only happens when working with a large number of data points (which is absolutely unavoidable in my case).
Is there anything that I can do, short of not drawing on top of the chart?
I suspect the slowness is because the browser has to redraw the chart (either the whole thing or parts of it) as the div slides over it. With a large data set to redraw the chart from, this becomes annoyingly slow.
There are solutions, but not all of them are always acceptable:
You can try reducing the number of points in your data set by sampling it at a lower rate.
You can try windowing, so that the viewer only shows a range within the entire set. For example, if you have 10,000 data points your window can slide along the data set, showing only 1,500 points at a time as opposed to all 10,000 points.
Move to a different technology such as Flash or Silverlight.
Like I said, though, not all of these or even any of them will work for you.
I noticed that when you drag the slider over the graph it still highlights the datapoints. You probably should set pointer-events:none on that part of your chart while dragging the slider, that will allow browsers to not check pointer-events in that subtree (which if you have a lot of datapoints can be somewhat expensive, especially if you update these elements on hover).

Categories