Reloading D3 Graph With Same Data - javascript

After staring at my screen for several days in a row trying to find a solution to this, I couldn't find one. Everything I've seen shows graphs being reloaded with new data, not the same data. If I want to keep the same data and same everything but still reload the graph, how would I do so. This plunker should give an idea of where I want it implemented. I have almost everything done, I just need to know a way to straight up reload only the graphs. Thanks.
The reload would go in here (yes, I do have another piece of JavaScript that allows onresize of divs).
function finalResize(){
}
addResizeListener(frontElement, finalResize);

Related

c3.js chart data is loaded but graph does not render while page load and refresh

I tried some examples of c3.js Followed this link. And i got success in that. But i have one problem when i'm trying to load graph first time in any browser, it doesn't show me the graph.
And if i reload page once or twice it shows graph but data is loaded.
I'm using latest version 0.6.1 library in my project, even though chart not shown.
I googled quite a lot but i couldn't found any correct solution.
If anything is there to fix this issue suggest me. Thanks in advance.

Load iFrame content with Highcharts graphs only when focussed (with PagePiling.js)

I am using pagePiling.js, and have added a couple of extra sections. These are using iFrames to load Highcharts graphs, as can be seen here. However, at the moment, all 12 iFrames respectively the graphs are being loaded, which makes the user wait a few seconds unnecessarily on the first page (and consumes bandwidth).
Is there any way to load the iFrames only the moment they are getting the focus? Or perhaps, a bit smoother, to load the next-upcoming graph while the current graph is being focussed on? I haven't really found something like this.
Thanks for any hints.

jquery .html() and javascript tags

I am trying to export the content of a div with jQuery but it has a jqplot graph inside of it.
When I try to re-render it, all the elements of the graph like the name and values appear, but not the bar charts. I am currently using:
$('#exportable').html();
Here is the thing, if I include the javascript that is used to execute the chart, it duplicates all the data and overlaps itself.
If I don't, the graph won't appear, just the values.
I would post the code but there really isn't much to look at. I've been trying to experiment and googling for the past few hours. Maybe I'm looking for the wrong thing. Anything would help.
Thanks a lot!
Instead of attempting to clone the chart, why not create another chart with the same data? See this for an example:
http://home.edgemontgeek.com/dev/stackoverflow/14727843/
Note that the "clone" button simply calls newPlot with the same data that was passed into the initial call, it doesn't attempt anything fancy, or look at the original contents of the plot.

Problems positioning nodes with d3.js force-layout. Nodes "re-entering" each data update, example inside

I previously asked this question a few days ago, but I do not think anyone besides paxRoman actually figured out what I was asking, as it was hard to describe without an example.
We did however manage to figure out what might be my problem, and I managed to put the code up on bl.ocks.org so you can see an example of what I mean!
Here is the example: http://bl.ocks.org/3020018
Each time the data is refreshed (in this example, just read from a json file), all the nodes are re-created and re-added to the drawing.
What I want to happen
I want the nodes to update without moving at all.
If a new node exists in the new array, it should just appear like they all do now, if something exists in the previous array but not in the new, it should simply disappear.
As you see in the example, that is not what is happening and I have not been able to figure out why for the past week.
So my question is:
What am I actually doing wrong? Is it my lack of links? What is the problem? The two of us spent over an hour looking at this yesterday and could not make sense of it, I have spent a good week on it now without much progress :/
My old question/post is still up, but it's badly formulated and I had no example to show.
Thanks for helping me :)
So, I am pretty sure I have solved most of my problems!
It came down to how I was adding/modifying the nodes when updating the data. I completely forgot about x/y and similar attributes since I did not set them myself, so I was adding "new" objects every time I updated the data, even if they weren't actually new.
With some jQuery magic using $.extend() I have sort of gotten it working, but it's still slightly moving/pulsing whenever I update the data.
I updated the gist to show the changes. http://bl.ocks.org/3020018
I would still like to remove that little pulsation too, so let me know if you have any ideas :)
Have you tried setting the friction parameter (where you have the linkDistance and charge set)? Setting it to 0.9 will speed up finding the final position as I think it defaults to 1 if not set. Its simply a case of adding
.friction(0.9) // or any suitable value closer to 0 - have a play!
Hope that helps

Images Pulled with JS Breaking Equal Height Columns

It looks like my problems never end with this site. I'm using jQuery to pull posts tagged "_featured" into the sidebar on a Tumblr blog. I have it calling the title of the text post along with the image included in it. Unfortunately, no matter what I try, this breaks the equal height columns on any page where the content column isn't longer than the sidebars.
I've tried different methods of achieving equal columns (I'm currently using The Equal Heights jQuery Plugin since I'm already using jQuery on the site. I've also tried the padding/negative margin trick and good ol' Faux Equal Columns using a background image. I figured it would be easy to solve it by using the jQuery plugin and wrapping the function call in a $(window).load(function(), but it's still hit or miss (mostly miss right now for some reason).
If anyone has any suggestions, please, save my computer from being thrown. The obvious solution that I'm thinking might work would be to have the JS calling the featured posts to also include the image size, but I'm not sure how I would do that.
The JS calling the featured posts can be viewed here and the site itself is at escapebadmusic.com.
Thanks again, everyone. I think I say this just about every time I post a question, but the help here has saved me a lot of time and frustration. It's always appreciated.
Try running EqualHeights after dom has finished changing.
(to be more specific - you should run EqualHeights after doc.ready, and after you add your image, or changed anything in the dom that affects heights)

Categories

Resources