Tinychart – simple, ready-to-go charts | Hacker News Reader

Tinychart – simple, ready-to-go charts

tinychart.co

72 pointshboon30 comments

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

If you're a web developer you can start at chapter 6 and stop as soon as you know enough to do your thing.

+1 for d3

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/) seems a little much.

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

Today: https://news.ycombinator.com/item?id=9043305 => http://tinychart.co/

Two days ago: https://news.ycombinator.com/item?id=9031894 => http://tinychart.co/

Three days ago: https://news.ycombinator.com/item?id=9027084 => http://tinychart.co/

Is the duplicate detector broken?

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.

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.

Well that's not what he's complaining about.

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.

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.

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

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.

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!

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.

Nice work in reactJS.

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

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.

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

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/

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

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

Maybe http://metricsgraphicsjs.org/ could help you with this.

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.

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.

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

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

Why don't you zero the y axis?

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

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

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

I really like this. Good work.

Reply on news.ycombinator.com