
Tinychart – simple, ready-to-go charts - hboon
http://tinychart.co/
======
timme
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.ht...](http://chimera.labs.oreilly.com/books/1230000000345/index.html)

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
+1 for d3

------
Sneeza
[http://tinychart.co/dist/browser-
bundle-d447cd2a4a298091b268...](http://tinychart.co/dist/browser-
bundle-d447cd2a4a298091b268.js)

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
Chartjs already is too much. Even with d3 could not be called tiny, just small
xD

------
Someone
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
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
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
Well that's not what he's complaining about.

------
escape_goat
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.

------
victordg
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
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
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!

------
webda2l
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))

------
Mahn
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
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 :)

------
jbergens
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/)

------
sjs382
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)

~~~
moklick
Maybe [http://metricsgraphicsjs.org/](http://metricsgraphicsjs.org/) could
help you with this.

~~~
sjs382
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.

------
ledzep2
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
...and that's why something "simple" hardly ever works in real-life! :P

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

------
giarc
Why don't you zero the y axis?

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

~~~
victordg
thanks for the feedback! I will take a look at that.

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

------
nastygibbon
I really like this. Good work.

