Live data from Hacker News

Chartist – Simple responsive charts

gionkunz.github.io

21–30 of 51 posts

Re: Chartist – Simple responsive charts

#21

Looks great. I use Highcharts.js responsively by simply setting the chart width to % rather than pixels. After all, scalable is a key part of SVG. Noting that Chartist is much leaner than Highcharts, how do you envision differntiating this project and avoid feature creep to make it like Highcharts.js 2.0?

good question

Re: Chartist – Simple responsive charts

#22

XSLT can create client-side charts without JavaScript. For example: http://davidjarvis.ca/world-politics/xml/resources.xml The source code is hosted on BitBucket: https://bitbucket.org/djarvis/world-politics/src/master/xml/ Without JavaScript, the interactivity of the charts is limited.

XSLT is kind of like complex regexs, it's a write-only language. I've written a few XSLT transformations over the years for various things and every single time without fail I realize at the end it was a huge mistake.

Also most data is in CSV or similar delimited format and won't be usable with XSLT.

Re: Chartist – Simple responsive charts

#23
post #15

Earlier quoted context omitted.

SVG in general falls over with very large datasets, I find html canvas based libraries such as maybe Flot better for thousands upon thousands of datapoints. I love d3 as much as anyone and all of it's offspring, but SVG is too slow in most browsers (especially Firefox) for lots of datapoints.

It is interesting that you cannot copy SVG out of your browser. When I visit the page in Chrome, mouse over the graph and "copy," it doesn't copy either the BMP buffer OR the raw SVG (XML). I was going to try and copy/paste into Outlook, but that's obviously no-go if you cannot copy at all. Interesting limitation of SVG that I wasn't aware existed until now.

Yet another bonus of canvas, something vaguely akin to:

var canvas = document.getElementById("canvasElement");

var image = canvas.toDataURL("image/png");

document.write('');

Re: Chartist – Simple responsive charts

#24
post #6

Looks very pretty, but doesn't seem to offer hover states or actions / tooltips. I think this is a dealbreaker for a lot of users who wish to add contextual information to their charts.

When I think responsive it's in a mobile first paradigm. There is no hover on mobile.

True, but "mobile first" is not "mobile only". The point of responsive design is for things to work well on multiple platforms, not just one.

Re: Chartist – Simple responsive charts

#25
As somebody who has worked a lot with many javascript charting libraries over the years, one important lesson we have learned is to "never roll your own charting library" and accept the feature set of the library. Too much customization will lead you down a windy path that can lead to nowhere. Pick your library first and keep that library's limitations in mind during the design process to save yourself a world of hurt

This library looks to appease a lot of the design customization so far though, great job and kudos to the author for what looks like a really good start.

Re: Chartist – Simple responsive charts

#26
I rarely have a need to display static charts. My common use when I reach for a chart is to display live streaming data. Usually doing so involves accessing a points list directly and managing the addition/deletion/updating myself.

Is there any chart system that is made with live updating in mind?

Re: Chartist – Simple responsive charts

#27

This website is using SVG graphics, very nicely. Is there a tool (GUI) that does that? Is it an export from a program like Illustrator, or is there something easier --and cheaper-- to do this?

XaraXtreme - http://www.xaraxtreme.org/

InkScape - http://www.inkscape.org/en/

Karbon - https://userbase.kde.org/Karbon

Re: Chartist – Simple responsive charts

#28

XSLT can create client-side charts without JavaScript. For example: http://davidjarvis.ca/world-politics/xml/resources.xml The source code is hosted on BitBucket: https://bitbucket.org/djarvis/world-politics/src/master/xml/ Without JavaScript, the interactivity of the charts is limited.

Are people still adopting XSLT for new projects? It seems it has fallen out of favor.

I use XML/XSLT to transform data into multiple output formats (currently XHTML and ConTeXT/PDF):

https://recipefiddle.com/recipe/15316/truffles (web page)

http://i.imgur.com/T71WhDJ.png (editor)

https://recipefiddle.com/book/examples/recipefiddle_sweet_tr... (printable ebook)

https://recipefiddle.com/book/examples/recipefiddle_sweet_tr... (recipe cards)

Each recipe was created from the same XML recipe data, transformed using two different templates. To my knowledge, JSON cannot be directly transformed into *TeX, but XML can.

To achieve the similar results with JSON, you'd have to first transform it to YAML, then Pandoc, then LaTeX, then finally PDF. Then you'd have to use a different infrastructure to render JSON as XHTML.

Architecturally, in this case, XML/XSLT is the simpler solution. If you only care about mobile apps, and don't need to create beautiful ebooks, then XML/XSLT is not a good choice.

Re: Chartist – Simple responsive charts

#29
post #6

Looks very pretty, but doesn't seem to offer hover states or actions / tooltips. I think this is a dealbreaker for a lot of users who wish to add contextual information to their charts.

When I think responsive it's in a mobile first paradigm. There is no hover on mobile.

There is no hover on mobile, but in this context, touch/press works as an analog for hover. In other words, you want more information/detail on a particular data point, on desktop you hover, on mobile you press.

Re: Chartist – Simple responsive charts

#30
post #15

Earlier quoted context omitted.

SVG in general falls over with very large datasets, I find html canvas based libraries such as maybe Flot better for thousands upon thousands of datapoints. I love d3 as much as anyone and all of it's offspring, but SVG is too slow in most browsers (especially Firefox) for lots of datapoints.

It is interesting that you cannot copy SVG out of your browser. When I visit the page in Chrome, mouse over the graph and "copy," it doesn't copy either the BMP buffer OR the raw SVG (XML). I was going to try and copy/paste into Outlook, but that's obviously no-go if you cannot copy at all. Interesting limitation of SVG that I wasn't aware existed until now.

To be fair, that's not an intrinsic limitation so much as a browser implementation limitation.

File a bug report?

Post reply on HN