3 ms·

This is my first (proper) open-source release. I'd be very grateful for feedback from HN!

by oesmith 15y ago

jzawodn 15y ago
Having use flot for stuff like this, what do you see as the main benefits for your library? Looking over the docs, I'd guess "simplicity" since it seems pretty easy to get going. Similarly, are there many plans for enhancements, or is that really a question of which patches start rolling in? Thanks!
- oesmith 15y ago
  Simplicity was definitely the prime motivator when I chose to write the graphing code from scratch for howmanyleft.co.uk (instead of using flot or similar). I also wanted something that worked reasonably well on mobile and desktop. Morris.js scales relatively well to small screens, and it also supports touch events. Immediate improvements are likely to be better date handling and x-axis labelling (really they're both fixes rather than enhancements). Development so far's been driven by my rather specific requirements for howmanyleft. I'd not initially intended to release it, but several requests from other interested developers prompted me to stick it up on github with a quickly hacked-together project page. I'm keen to see what other devs would like to do with it!
dmvaldman 15y ago
Looks great for what it was designed to do! One question I'm trying to answer is how the overlays are generated. You mention they refer to an element tag, but that still leaves me confused. Is there a template that is filled in with values? Is it a DOM element that I can add event handlers to? Have you thought about making more powerful features, say, realtime adjustment of the axes, zooming, etc? Personally I'm interested in having things like this for analytics. One thing I'd like to see is some kind of interaction with D3.js in case i wanted to visualize the data in other ways. Any ideas on integrating this with that library?
- oesmith 15y ago
  It uses Raphaël.js to insert an SVG (or VML on old IE) element into the container. There's definite potential for hooking into DOM events, although there's no code to support that at the moment. Zooming/panning isn't something I've had a need for yet, the same for data bindings. There's no reason why they couldn't be integrated (although D3 could be a pretty serious job..)
  - dmvaldman 15y ago
    I see. Have you considered rendering a Dom element in JavaScript instead of the SVG approach? As a developer I feel there is a lower barrier of entry for me because I pretty much don't need to understand SVG, or Raphael for that matter, to use your library otherwise, however I would like more control over the overlay elements. In any case, great work!
- justincormack 15y ago
  If you want those things you should just use d3.js. It is simply not possible to do that with VML so the Raphael compatibility layer just gets in the way.
pan69 15y ago
This is absolutely great! You've done an awesome job. The only feedback I have is that, when you're not hovering, or exiting a chart with your mouse, the balloon displaying the information at a certain point should disappear.

This is my first (proper) open-source release. I'd be very grateful for feedback from HN!

by oesmith 15y ago

This is my first (proper) open-source release. I'd be very grateful for feedback from HN!

Having use flot for stuff like this, what do you see as the main benefits for your library? Looking over the docs, I'd guess "simplicity" since it seems pretty easy to get going. Similarly, are there many plans for enhancements, or is that really a question of which patches start rolling in? Thanks!

oesmith 15y ago
Simplicity was definitely the prime motivator when I chose to write the graphing code from scratch for howmanyleft.co.uk (instead of using flot or similar). I also wanted something that worked reasonably well on mobile and desktop. Morris.js scales relatively well to small screens, and it also supports touch events. Immediate improvements are likely to be better date handling and x-axis labelling (really they're both fixes rather than enhancements). Development so far's been driven by my rather specific requirements for howmanyleft. I'd not initially intended to release it, but several requests from other interested developers prompted me to stick it up on github with a quickly hacked-together project page. I'm keen to see what other devs would like to do with it!

dmvaldman 15y ago

Looks great for what it was designed to do! One question I'm trying to answer is how the overlays are generated. You mention they refer to an element tag, but that still leaves me confused. Is there a template that is filled in with values? Is it a DOM element that I can add event handlers to? Have you thought about making more powerful features, say, realtime adjustment of the axes, zooming, etc? Personally I'm interested in having things like this for analytics. One thing I'd like to see is some kind of interaction with D3.js in case i wanted to visualize the data in other ways. Any ideas on integrating this with that library?

oesmith 15y ago
It uses Raphaël.js to insert an SVG (or VML on old IE) element into the container. There's definite potential for hooking into DOM events, although there's no code to support that at the moment. Zooming/panning isn't something I've had a need for yet, the same for data bindings. There's no reason why they couldn't be integrated (although D3 could be a pretty serious job..)
- dmvaldman 15y ago
  I see. Have you considered rendering a Dom element in JavaScript instead of the SVG approach? As a developer I feel there is a lower barrier of entry for me because I pretty much don't need to understand SVG, or Raphael for that matter, to use your library otherwise, however I would like more control over the overlay elements. In any case, great work!
justincormack 15y ago
If you want those things you should just use d3.js. It is simply not possible to do that with VML so the Raphael compatibility layer just gets in the way.

pan69 15y ago

This is absolutely great! You've done an awesome job. The only feedback I have is that, when you're not hovering, or exiting a chart with your mouse, the balloon displaying the information at a certain point should disappear.