Graph must be rendered on page load. #86

Closed
dnschnur opened this Issue Sep 28, 2012 · 6 comments

Comments

Projects
None yet
1 participant
@dnschnur
Member

dnschnur commented Sep 28, 2012

Original author: ja...@shaped.ca (December 07, 2007 05:42:25)

The graph will appear blank unless rendered initially upon the page load.

The following code is an example that breaks it:

setTimeout(function() {
$(function () {
var d1 = [];
for (var i = 0; i < 14; i += 0.5)
d1.push([i, Math.sin(i)]);

    var d2 = [[0, 3], [4, 8], [8, 5], [9, 13]];

    $.plot($(&quot;#placeholder&quot;), [ d1, d2 ]);
});

},1000);

However, if you render the graph on page load, and then attempt to call
.plot afterwards it will update the graph with no issues.

Original issue: http://code.google.com/p/flot/issues/detail?id=7

@dnschnur

This comment has been minimized.

Show comment
Hide comment
@dnschnur

dnschnur Sep 28, 2012

Member

From olau%iol...@gtempaccount.com on December 07, 2007 10:20:05
Hm, interesting. But I think it's a jQuery problem with how the document.ready event
works - if you add a console.log inside the function, it won't get called either. Try
this instead:

setTimeout(function() {
var d1 = [];
for (var i = 0; i < 14; i += 0.5)
d1.push([i, Math.sin(i)]);

    var d2 = [[0, 3], [4, 8], [8, 5], [9, 13]];

    $.plot($("#placeholder"), [ d1, d2 ]);

},1000);

Hope this helps?

Member

dnschnur commented Sep 28, 2012

From olau%iol...@gtempaccount.com on December 07, 2007 10:20:05
Hm, interesting. But I think it's a jQuery problem with how the document.ready event
works - if you add a console.log inside the function, it won't get called either. Try
this instead:

setTimeout(function() {
var d1 = [];
for (var i = 0; i < 14; i += 0.5)
d1.push([i, Math.sin(i)]);

    var d2 = [[0, 3], [4, 8], [8, 5], [9, 13]];

    $.plot($("#placeholder"), [ d1, d2 ]);

},1000);

Hope this helps?

@dnschnur

This comment has been minimized.

Show comment
Hide comment
@dnschnur

dnschnur Sep 28, 2012

Member

From ja...@shaped.ca on December 07, 2007 12:03:27
Hi, this has helped actually, thanks! Can you clarify what that line of code does? I
do not code with jQuery and am not familiar, maybe it'd be something useful to add to
your readme.

Thanks!

Member

dnschnur commented Sep 28, 2012

From ja...@shaped.ca on December 07, 2007 12:03:27
Hi, this has helped actually, thanks! Can you clarify what that line of code does? I
do not code with jQuery and am not familiar, maybe it'd be something useful to add to
your readme.

Thanks!

@dnschnur

This comment has been minimized.

Show comment
Hide comment
@dnschnur

dnschnur Sep 28, 2012

Member

From ja...@shaped.ca on December 07, 2007 12:17:41
Also, thanks. It's finally great to see a graph rendering within my software. I was
using plotr until it broke with the latest prototype and now the author of that
blogged flot so I thought I'd try it, the only downfall is that I now have to load
another large library.

Member

dnschnur commented Sep 28, 2012

From ja...@shaped.ca on December 07, 2007 12:17:41
Also, thanks. It's finally great to see a graph rendering within my software. I was
using plotr until it broke with the latest prototype and now the author of that
blogged flot so I thought I'd try it, the only downfall is that I now have to load
another large library.

@dnschnur

This comment has been minimized.

Show comment
Hide comment
@dnschnur

dnschnur Sep 28, 2012

Member

From ole.laur...@gmail.com on December 07, 2007 12:49:30
$(function () { ... }) is short-hand for $(document).ready(function () {...}). It's
documented here:

http://docs.jquery.com/Events/ready#fn

Or in a more gentle manner in one of the tutorials here:

http://docs.jquery.com/Tutorials

The short story: You normally wrap your Javascript inside the document.ready handler,
just about the opposite of what you've done :-), like this:

$(function () {
setTimeout(function() {
var d1 = [];
for (var i = 0; i < 14; i += 0.5)
d1.push([i, Math.sin(i)]);

    var d2 = [[0, 3], [4, 8], [8, 5], [9, 13]];

    $.plot($("#placeholder"), [ d1, d2 ]);

},1000);
});

Member

dnschnur commented Sep 28, 2012

From ole.laur...@gmail.com on December 07, 2007 12:49:30
$(function () { ... }) is short-hand for $(document).ready(function () {...}). It's
documented here:

http://docs.jquery.com/Events/ready#fn

Or in a more gentle manner in one of the tutorials here:

http://docs.jquery.com/Tutorials

The short story: You normally wrap your Javascript inside the document.ready handler,
just about the opposite of what you've done :-), like this:

$(function () {
setTimeout(function() {
var d1 = [];
for (var i = 0; i < 14; i += 0.5)
d1.push([i, Math.sin(i)]);

    var d2 = [[0, 3], [4, 8], [8, 5], [9, 13]];

    $.plot($("#placeholder"), [ d1, d2 ]);

},1000);
});

@dnschnur

This comment has been minimized.

Show comment
Hide comment
@dnschnur

dnschnur Sep 28, 2012

Member

From ja...@shaped.ca on December 07, 2007 13:25:27
Great, thanks. Again, perhaps add it to your readme. Other than that I would say
this issue is closed.

Member

dnschnur commented Sep 28, 2012

From ja...@shaped.ca on December 07, 2007 13:25:27
Great, thanks. Again, perhaps add it to your readme. Other than that I would say
this issue is closed.

@dnschnur

This comment has been minimized.

Show comment
Hide comment
@dnschnur

dnschnur Sep 28, 2012

Member

From olau%iol...@gtempaccount.com on December 07, 2007 15:28:52
Sure.

Member

dnschnur commented Sep 28, 2012

From olau%iol...@gtempaccount.com on December 07, 2007 15:28:52
Sure.

@dnschnur dnschnur closed this Sep 28, 2012

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment