sunxingbao / flot

Automatically exported from code.google.com/p/flot
0 stars 0 forks source link

Graph must be rendered on page load. #7

Closed GoogleCodeExporter closed 9 years ago

GoogleCodeExporter commented 9 years ago
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($("#placeholder"), [ 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 reported on code.google.com by ja...@shaped.ca on 7 Dec 2007 at 5:42

GoogleCodeExporter commented 9 years ago
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?

Original comment by olau%iol...@gtempaccount.com on 7 Dec 2007 at 10:20

GoogleCodeExporter commented 9 years ago
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!

Original comment by ja...@shaped.ca on 7 Dec 2007 at 12:03

GoogleCodeExporter commented 9 years ago
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.

Original comment by ja...@shaped.ca on 7 Dec 2007 at 12:17

GoogleCodeExporter commented 9 years ago
$(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);
});

Original comment by ole.laur...@gmail.com on 7 Dec 2007 at 12:49

GoogleCodeExporter commented 9 years ago
Great, thanks. Again, perhaps add it to your readme. Other than that I  would 
say
this issue is closed.

Original comment by ja...@shaped.ca on 7 Dec 2007 at 1:25

GoogleCodeExporter commented 9 years ago
Sure.

Original comment by olau%iol...@gtempaccount.com on 7 Dec 2007 at 3:28