5 ms·

Tinychart – simple, ready-to-go charts

72 points by hboon 12y ago

ledzep2 12y ago
Nice idea. A few possible improvements: 1. Import data from csv, excel etc, from file or textarea. 2. The chart should be resizable. 3. Color schemes would be nice to have.
- lucaspottersky 12y ago
  ...and that's why something "simple" hardly ever works in real-life! :P
nastygibbon 12y ago
I really like this. Good work.
timme 12y ago
If you're in the market for "simple" solutions like this, do yourself a favor and spend one afternoon with d3.js. Pre-packaged chart solutions will never achieve 100% of what you're trying to do because the options for customization of charts are endless. Learning the basics of d3.js will liberate and empower you. This is a fantastic place to start: http://chimera.labs.oreilly.com/books/1230000000345/index.html http://chimera.labs.oreilly.com/books/1230000000345/index.ht... If you're a web developer you can start at chapter 6 and stop as soon as you know enough to do your thing.
- calebm 12y ago
  +1 for d3
webda2l 12y ago
Nice work in reactJS. Github repository of the project https://github.com/vdel26/tinychart https://github.com/vdel26/tinychart (From comments of http://www.producthunt.com/posts/tinychart http://www.producthunt.com/posts/tinychart)
jbergens 12y ago
I think they went too tiny. There is almost no info about possible chart types or what you can do. The download feature is nice but that's all I can see right now. Havn't looked at the source code. I think Plottable looked like a better solution. http://plottablejs.org/ http://plottablejs.org/
Mahn 12y ago
Just a heads up, the font there renders to me as an ugly times new roman, you should probably use something like Google Fonts to load the custom fonts you are using on demand.
ArekDymalski 12y ago
Two bits of feedback about 1st time experience of a non-developer: 1. It took me a moment to find where the save option is located. I guess that some less motivated people won't dig that deep. You could make it more visible as it's the most important part. 2. While entering the data I automaticaly actred like in Excel - I typed the number and pressed the enter, assuming that it will move me to the row below. You could use the power of user's habit :)
Sneeza 12y ago
http://tinychart.co/dist/browser-bundle-d447cd2a4a298091b268.js http://tinychart.co/dist/browser-bundle-d447cd2a4a298091b268... I don't really know how this can be considered "tiny" at all. Dependencies on react, brace and another charting library (http://www.chartjs.org/ http://www.chartjs.org/) seems a little much.
- bpg_92 12y ago
  Chartjs already is too much. Even with d3 could not be called tiny, just small xD
deleted 12y ago
[deleted]
sjs382 12y ago
Does anyone know of a (free) JS graph library that allows for data at irregular intervals? I'm looking for something like this, but with a more permissive license: http://www.highcharts.com/demo/spline-irregular-time http://www.highcharts.com/demo/spline-irregular-time
- MJSplot_author 12y ago
  If I may propose my own solution [0]. It has no dependencies and is quite interactive for analysis (regression, measurements, and predictions). However not very customisable and lacks a good method for handling date/time data. [0] http://www.lancaster.ac.uk/pg/sarsby/MJSplot/index http://www.lancaster.ac.uk/pg/sarsby/MJSplot/index
- moklick 12y ago
  Maybe http://metricsgraphicsjs.org/ http://metricsgraphicsjs.org/ could help you with this.
  - sjs382 12y ago
    Hrm, one of the requirements that I forgot to mention (but might be implied by the example?) is that the are 4 different data sets on the graph, all with different different intervals.
dvh 12y ago
90 what? Bananas? Watts? Degrees? Never ever publish chart without axis descriptions. Not even as demo. (Or maybe I'm just grumpy)
felxh 12y ago
looks nice! I noticed some issues on retina screen using safari. Initial render is fine, but it breaks when you update some numbers
- victordg 12y ago
  thanks for the feedback! I will take a look at that.
victordg 12y ago
This is my first project in React.js and it was really nice to work with. The only part I struggled with was while building the table editor. I'm using contentEditable there and apparently React doesn't play well with it. The virtual DOM gets out of sync after user input and you have to manage it manually. I really enjoyed making this and I'm happy to hear any feedback about ways to improve it! :)
- jordanlev 12y ago
  I browse with cookies and localStorage disabled by default (I whitelist sites I need to log into). Your site just comes up blank for me... maybe it requires localStorage for some reason? Not sure why it would, but at least you might want to display a message indicating such.
  - victordg 12y ago
    oh, it uses localStorage to store your chart data so that you can refresh the page and you won't lose your changes. But you are totally right that it should not be requirement. I will fix that today. Thanks for letting me know!
- orbifold 12y ago
  Just so you know, there are very few situations where one should produce a graph from a set of points by spline interpolation (at least in the natural sciences). It almost never is the right choice, if you don't have a model for how the graph you are sampling looks like you shouldn't draw lines between points at all.
Someone 12y ago
Today: https://news.ycombinator.com/item?id=9043305 https://news.ycombinator.com/item?id=9043305 => http://tinychart.co/ http://tinychart.co/ Two days ago: https://news.ycombinator.com/item?id=9031894 https://news.ycombinator.com/item?id=9031894 => http://tinychart.co/ http://tinychart.co/ Three days ago: https://news.ycombinator.com/item?id=9027084 https://news.ycombinator.com/item?id=9027084 => http://tinychart.co/ http://tinychart.co/ Is the duplicate detector broken?
- igorgue 12y ago
  I guess the visibility of the other two was pretty low, is it really that annoying? I didn't see it before I'd have to be here all day to notice the two other posts.
  - Gabriel_Martin 12y ago
    Maybe if the implementation wasn't utter garbage on mobile, and if it didn't totally break upon entering new data (at least in Chrome), that wouldn't be the case. I bit my tongue last time, but seriously, this is one of the most garbage demos I've ever seen. Granted, maybe this is my fault somehow, a plugin, or who knows; at first glance 1/10.
    - igorgue 12y ago
      Well that's not what he's complaining about.
  - Someone 12y ago
    I'm not saying anything about annoying. I just saw a story title, thought it would be a competitor product to what I saw a few days ago, and was surprised to see what looked like the exact same page. I was even more surprised when a search found not one but two very recent stories with the same URL.
giarc 12y ago
Why don't you zero the y axis?
escape_goat 12y ago
In terms of design, it is a project that victordg can be proud of, but I notice a lack of domain knowledge [1] with respect to what charts portray and how they portray them; in very few situations could one infer bezier curves (or splines, or anything) from a set of data points. The result is more an "artist's conception of a chart" than a chart than an actual useful chart. I do quite like the mouseover data points, I realize these are pretty standard on online charts, but I think he did a good job on them. However, his chart's constraint on the time series -- really only a logistic progression is supported -- means that it essentially can only produce bar charts. I notice that it simply fails when data is missing from any table cell, which is probably an issue for any potential user; how does one then represent the absence of data? [1] Disclosure/DK-filter: I do not work with charts or tables of figures, and I don't know a great deal about the topic: I mention it because my understanding is that that false implication of continuity is a serious flaw in chart design.
sesteel 12y ago
FYI: Adding data to the demo chart spikes my memory usage heavily in Mozilla Firefox on Linux.

72 points by hboon 12y ago

Nice idea. A few possible improvements: 1. Import data from csv, excel etc, from file or textarea. 2. The chart should be resizable. 3. Color schemes would be nice to have.

lucaspottersky 12y ago
...and that's why something "simple" hardly ever works in real-life! :P

nastygibbon 12y ago

I really like this. Good work.

timme 12y ago

If you're in the market for "simple" solutions like this, do yourself a favor and spend one afternoon with d3.js. Pre-packaged chart solutions will never achieve 100% of what you're trying to do because the options for customization of charts are endless. Learning the basics of d3.js will liberate and empower you. This is a fantastic place to start: http://chimera.labs.oreilly.com/books/1230000000345/index.html http://chimera.labs.oreilly.com/books/1230000000345/index.ht... If you're a web developer you can start at chapter 6 and stop as soon as you know enough to do your thing.

calebm 12y ago
+1 for d3

webda2l 12y ago

Nice work in reactJS. Github repository of the project https://github.com/vdel26/tinychart https://github.com/vdel26/tinychart (From comments of http://www.producthunt.com/posts/tinychart http://www.producthunt.com/posts/tinychart)

jbergens 12y ago

I think they went too tiny. There is almost no info about possible chart types or what you can do. The download feature is nice but that's all I can see right now. Havn't looked at the source code. I think Plottable looked like a better solution. http://plottablejs.org/ http://plottablejs.org/

Mahn 12y ago

Just a heads up, the font there renders to me as an ugly times new roman, you should probably use something like Google Fonts to load the custom fonts you are using on demand.

ArekDymalski 12y ago

Two bits of feedback about 1st time experience of a non-developer: 1. It took me a moment to find where the save option is located. I guess that some less motivated people won't dig that deep. You could make it more visible as it's the most important part. 2. While entering the data I automaticaly actred like in Excel - I typed the number and pressed the enter, assuming that it will move me to the row below. You could use the power of user's habit :)

Sneeza 12y ago

http://tinychart.co/dist/browser-bundle-d447cd2a4a298091b268.js http://tinychart.co/dist/browser-bundle-d447cd2a4a298091b268... I don't really know how this can be considered "tiny" at all. Dependencies on react, brace and another charting library (http://www.chartjs.org/ http://www.chartjs.org/) seems a little much.

bpg_92 12y ago
Chartjs already is too much. Even with d3 could not be called tiny, just small xD

deleted 12y ago

[deleted]

sjs382 12y ago

Does anyone know of a (free) JS graph library that allows for data at irregular intervals? I'm looking for something like this, but with a more permissive license: http://www.highcharts.com/demo/spline-irregular-time http://www.highcharts.com/demo/spline-irregular-time

MJSplot_author 12y ago
If I may propose my own solution [0]. It has no dependencies and is quite interactive for analysis (regression, measurements, and predictions). However not very customisable and lacks a good method for handling date/time data. [0] http://www.lancaster.ac.uk/pg/sarsby/MJSplot/index http://www.lancaster.ac.uk/pg/sarsby/MJSplot/index
moklick 12y ago
Maybe http://metricsgraphicsjs.org/ http://metricsgraphicsjs.org/ could help you with this.
- sjs382 12y ago
  Hrm, one of the requirements that I forgot to mention (but might be implied by the example?) is that the are 4 different data sets on the graph, all with different different intervals.

dvh 12y ago

90 what? Bananas? Watts? Degrees? Never ever publish chart without axis descriptions. Not even as demo. (Or maybe I'm just grumpy)

felxh 12y ago

looks nice! I noticed some issues on retina screen using safari. Initial render is fine, but it breaks when you update some numbers

victordg 12y ago
thanks for the feedback! I will take a look at that.

victordg 12y ago

This is my first project in React.js and it was really nice to work with. The only part I struggled with was while building the table editor. I'm using contentEditable there and apparently React doesn't play well with it. The virtual DOM gets out of sync after user input and you have to manage it manually. I really enjoyed making this and I'm happy to hear any feedback about ways to improve it! :)

jordanlev 12y ago
I browse with cookies and localStorage disabled by default (I whitelist sites I need to log into). Your site just comes up blank for me... maybe it requires localStorage for some reason? Not sure why it would, but at least you might want to display a message indicating such.
- victordg 12y ago
  oh, it uses localStorage to store your chart data so that you can refresh the page and you won't lose your changes. But you are totally right that it should not be requirement. I will fix that today. Thanks for letting me know!
orbifold 12y ago
Just so you know, there are very few situations where one should produce a graph from a set of points by spline interpolation (at least in the natural sciences). It almost never is the right choice, if you don't have a model for how the graph you are sampling looks like you shouldn't draw lines between points at all.

Someone 12y ago

Today: https://news.ycombinator.com/item?id=9043305 https://news.ycombinator.com/item?id=9043305 => http://tinychart.co/ http://tinychart.co/ Two days ago: https://news.ycombinator.com/item?id=9031894 https://news.ycombinator.com/item?id=9031894 => http://tinychart.co/ http://tinychart.co/ Three days ago: https://news.ycombinator.com/item?id=9027084 https://news.ycombinator.com/item?id=9027084 => http://tinychart.co/ http://tinychart.co/ Is the duplicate detector broken?

igorgue 12y ago
I guess the visibility of the other two was pretty low, is it really that annoying? I didn't see it before I'd have to be here all day to notice the two other posts.
- Gabriel_Martin 12y ago
  Maybe if the implementation wasn't utter garbage on mobile, and if it didn't totally break upon entering new data (at least in Chrome), that wouldn't be the case. I bit my tongue last time, but seriously, this is one of the most garbage demos I've ever seen. Granted, maybe this is my fault somehow, a plugin, or who knows; at first glance 1/10.
  - igorgue 12y ago
    Well that's not what he's complaining about.
- Someone 12y ago
  I'm not saying anything about annoying. I just saw a story title, thought it would be a competitor product to what I saw a few days ago, and was surprised to see what looked like the exact same page. I was even more surprised when a search found not one but two very recent stories with the same URL.

giarc 12y ago

Why don't you zero the y axis?

escape_goat 12y ago

In terms of design, it is a project that victordg can be proud of, but I notice a lack of domain knowledge [1] with respect to what charts portray and how they portray them; in very few situations could one infer bezier curves (or splines, or anything) from a set of data points. The result is more an "artist's conception of a chart" than a chart than an actual useful chart. I do quite like the mouseover data points, I realize these are pretty standard on online charts, but I think he did a good job on them. However, his chart's constraint on the time series -- really only a logistic progression is supported -- means that it essentially can only produce bar charts. I notice that it simply fails when data is missing from any table cell, which is probably an issue for any potential user; how does one then represent the absence of data? [1] Disclosure/DK-filter: I do not work with charts or tables of figures, and I don't know a great deal about the topic: I mention it because my understanding is that that false implication of continuity is a serious flaw in chart design.

sesteel 12y ago

FYI: Adding data to the demo chart spikes my memory usage heavily in Mozilla Firefox on Linux.