Smoothie Charts with jQuery

[Amit Saha]

Hi all,

I am a Javascript newbie. I am putting together a demo Web application in which I want to show time series data (say free memory). Smoothie charts seemed just perfect for me and I got the examples working.

Now, I already have some jQuery code where I am trying to integrate smoothie charts. I think I am running into problems as mentioned here [1]. Unfortunately, including smoothie.js disables the other functionality in the code completely. Here is my file [2].

It would be great if anyone could give a hint.

Thanks,
Amit.


[1] http://docs.jquery.com/Using_jQuery_with_Other_Libraries
[2] https://gist.github.com/4169150

[Joe Walnes]

Hi Amit

You don't need to worry about the jQuery.noConflict() stuff with SmoothieCharts. The document your refer to is only relevant for using jQuery with libraries that also try to define a $ shortcut. SmoothieCharts doesn't do this, so it works with jQuery our of the box. You can remove that call and go back to using the $ shortcut if you wish.

Here are some issues I can see in the code:

* Lines 19-23 (creating SmoothieChart, adding timeline, streamTo) should be called once, and only once. Currently nothing calls them at all. Move these to the document-ready function.

* Lines 17-18 (appending data to the timeseries) should be called whenever you get more data (e.g. in the dynamic_stats() function).

* You attempt to set title from the #hostname element, which doesn't exist (though that should not cause an error). Just pointing it out.

Hope that helps.

-Joe

[Amit Saha]

Hi Joe,

On Thu, Nov 29, 2012 at 11:49 PM, Joe Walnes <j...@walnes.com> wrote:
> Hi Amit
>
> You don't need to worry about the jQuery.noConflict() stuff with
> SmoothieCharts. The document your refer to is only relevant for using jQuery
> with libraries that also try to define a $ shortcut. SmoothieCharts doesn't
> do this, so it works with jQuery our of the box. You can remove that call
> and go back to using the $ shortcut if you wish.
>
> Here are some issues I can see in the code:
> * Lines 19-23 (creating SmoothieChart, adding timeline, streamTo) should be
> called once, and only once. Currently nothing calls them at all. Move these
> to the document-ready function.
> * Lines 17-18 (appending data to the timeseries) should be called whenever
> you get more data (e.g. in the dynamic_stats() function).
> * You attempt to set title from the #hostname element, which doesn't exist
> (though that should not cause an error). Just pointing it out.

Thanks for the suggestions. Does this look OK :
https://gist.github.com/4169150 ?

Unfortunately, that doesn't work either. The dynamic_stats( ) function
is simply never called.

Hope you can see where I am going wrong.

Thanks,
Amit.
--
http://echorand.me

[Joe Walnes]

Do you have any JavaScript errors in your console?

[Amit Saha]

On Fri, Nov 30, 2012 at 7:52 AM, Joe Walnes <j...@walnes.com> wrote:
> Do you have any JavaScript errors in your console?

[07:53:27.913] GET http://127.0.0.1:5000/ [HTTP/1.0 200 OK 14ms]
[07:53:27.915] GET http://127.0.0.1:5000/static/style.css [HTTP/1.0
304 NOT MODIFIED 4ms]
[07:53:27.917] GET
https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js
[HTTP/1.1 304 Not Modified 614ms]
[07:53:27.973] GET http://127.0.0.1:5000/static/smoothie.js [HTTP/1.0
304 NOT MODIFIED 5ms]
[07:53:28.822] Unknown property 'box-sizing'. Declaration dropped. @
http://127.0.0.1:5000/

That's all I see upon page load.

-Amit

--
http://echorand.me

[Joe Walnes]

This line is the culprit:

<script type="text/javascript" src="{{url_for('static', filename='smoothie.js') }}">

You forgot to close your script element. Add: </script>.

[Amit Saha]

On Fri, Nov 30, 2012 at 9:45 AM, Joe Walnes <j...@walnes.com> wrote:
> This line is the culprit:
>
> <script type="text/javascript" src="{{url_for('static',
> filename='smoothie.js') }}">
>
> You forgot to close your script element. Add: </script>.

Argh. I will try that and see. Thanks a lot.

-Amit


--
http://echorand.me

[Amit Saha]

On Fri, Nov 30, 2012 at 10:44 AM, Amit Saha <amits...@gmail.com> wrote:
> On Fri, Nov 30, 2012 at 9:45 AM, Joe Walnes <j...@walnes.com> wrote:
>> This line is the culprit:
>>
>> <script type="text/javascript" src="{{url_for('static',
>> filename='smoothie.js') }}">

That was easy! Thanks Joe.

Best,
Amit.
--
http://echorand.me