Rickshaw.js (graphing)

I'd like to use Enyo as the framework for a project of which the basic point is to show a graph and related data on a Raspberry Pi powered touchscreen, and separately via smartphones and full-size browsers.
The library I want to use to show the graph is Rickshaw.js but I've yet to be able to get the graph to show without breaking the page. What do I need to do?

Comments

  • edited December 2012
    1. Code would be really helpful.
    2. When enyo renders your app, it renders it as 1 big HTML component (as far as I know)
    but when you render your graph it renders next to the enyo component which then breaks up the page (from my understanding).
    3. Try creating an enyo. control as a wrapper for rickshaw.js, that might work.
  • edited December 2012
    How are you integrating Rickshaw? From looking at the website, it looks like it wants a HTML node to render into. You can get that by calling hasNode on a enyo.Control that you want as the rendering surface, but you need to delay until after the rendered() callback for that item, as that lets you know that the node is part of the DOM.

    I just made a quick fiddle to show this: http://jsfiddle.net/unwiredben/vpbhC/

    I did have one problem when I named my wrapper kind Rickshaw originally... that ended up overwriting the Rickshaw namespace pulled in by the library, and it took a few minutes to realize why the constructor wasn't defined anymore.
  • I did have one problem when I named my wrapper kind Rickshaw originally... that ended up overwriting the Rickshaw namespace pulled in by the library
    Haha, oops.

    I'm really new at this, and I would not have figured this out...
    You can get that by calling hasNode on a enyo.Control that you want as the rendering surface, but you need to delay until after the rendered() callback for that item, as that lets you know that the node is part of the DOM.
    So thank you, very much. Ideally the page will have a Rickshaw graph taking full-width. A way to pan and zoom on that graph would be nice, I don't know if that's possible to do just using multitouch on the graph. A slider would probably be fine, but there's such a massive set of data to work with here.
  • You should be able to do this. Put the Rickshaw control into a enyo.Scroller that's using fit:true or is part of a Fittable layout. You can then set the graph size to whatever and Enyo will control panning over it.
  • Actually, http://jsfiddle.net/kWD4M/2/ was more what I was thinking.

    If you make the graph a scroller, it doesn't work in touch mode. Putting the graph inside the scroller does work.
  • Thanks Ben!
    I see your version work well in my Chrome viewing jsfiddle.net.

    By accident I tried the same example on TouchPad 3.0.5 and on Pre3 2.2.4 - but non of the two devices displayed anything in the Result viewport.
    Anybody any idea why these examples don't work on webOS devices ? Other sampler examples work fine on jsfiddle.
    --
    I'm still looking out for a nice graphing/charting library that works well with Enyo2 and still supports TouchPad and Pre3 - as these are still the latest webOS devices from HP. Any other suggestions?
  • edited December 2012
    It depends on what the graph code is doing. Canvas should work, although not all drawing primitives may be implemented. Rickshaw seems to be making a svg element which isn't supported on webOS.
Sign In or Register to comment.