

Show HN: Create Javascript charts with one line of Ruby - akane
http://ankane.github.io/chartkick/

======
patio11
Nice, going to try this.

I particularly like the groupdate concept, and might send you a pull request
adding 2.X support, if that fits in line with the project goals. I should have
rolled my own years ago rather than repeating the same code at 100 places.

~~~
akane
Awesome, looking forward to it.

------
cabalamat
Assuming the data for the graph shown is the dots, then the lines between them
should be straight, not curved, because othrwise the graph is pretending to
have higher accuracy than it actually has, which is a lie.

~~~
hnriot
it's called interpolation.

~~~
gcr
Using straight lines between points has an _even fancier_ name: " _Linear_
interpolation," which, by your logic, _still_ means it's a better idea.

~~~
ibrahima
I agree that in this case it's stupid, but for some data it can make sense.
But I think people use bezier curves and higher order interpolations on these
types of demos because smooth lines look more visually appealing somehow.

------
jqueryin
The ruby wrapper lib around the JS is dead simple. Could be ported to any
language with ease. Very nice work!

[https://github.com/ankane/chartkick/blob/master/lib/chartkic...](https://github.com/ankane/chartkick/blob/master/lib/chartkick/helper.rb)

~~~
akane
Thanks! I started out heavy on the Ruby side but moved most logic to the JS to
make AJAX charts dead simple to implement. (render :json => chart_data)

~~~
mccolin
The ruby wrapping lib supports AJAX out of the box by passing a URL or route
path to the helper and returning JSON from that endpoint.

~~~
proletarian
Well, well, mccolin replying to akane, long live Context Optional. And nice
work akane.

~~~
mccolin
Long live Context Optional, indeed!

------
windsurfer
Not entirely sure if this is on-topic, but why do so many graphs when told to
"smooth" results simply apply a bezier curve to the data points? It results in
some maximum and minimum vertices appearing at values that don't exist.

------
bluesnowmonkey
If you want to "AJAX" an image onto the page after the initial page load, why
not just use an <img> tag? You may be surprised to learn that it's even part
of the HTML spec!

I was pretty surprised when I got to the ChartsController and saw it returning
JSON. Seems like the hard way to go about it. I just assumed it was generating
SVGs.

~~~
lobster_johnson
Why should the controller be generating graphics? The UI can do that.

~~~
jeremyjh
Depending upon the number of data points you are representing, images may take
less bandwidth and transfer time than the data itself. For example suppose you
have a chart showing network latency; if you sample once a minute and show a
month's worth of data you could easily transfer around 500KB for the raw data
(assuming 12 bytes of json per sample), while an image file would be 20KB. If
you have a dashboard full of images like this, the time to download all that
data could become pretty significant to the end-user.

~~~
lobster_johnson
I see your point, but that's a somewhat contrived example: If you display per-
minute data for an entire month you won't have the horizontal resolution
(43200 to 44640 data points) to plot them all!

If you want zoomable charts to allow for increasing resolution, then the chart
lib should ask the controller for a specific resolution and range on demand.

Even then, 500KB of numeric JSON data compresses really well (I tested with 1
month of real-world per-minute data: 92KB).

------
up_and_up
Lazy Highcharts has been available for quite some time:
<https://github.com/michelson/lazy_high_charts>

I highly recommend it over writing JS for your highcharts, esp if you push a
lot of data into the chart.

------
hiccup
Great meta graphing library. Love that Google Charts AND Highcharts are
supported.

------
tomblomfield
This looks nice, but most of the hard work is done elsewhere.

<https://github.com/ankane/groupdate> (by the same author) makes it simple to
output the right JSON grouped by date (awesome!)

Highcharts/Google charts make it simple to turn json into JS graphs.

This library provides glue so you don't have to read the highchart docs. Might
save some people some time, I guess...

~~~
logicallee
"Beautiful charts with 1 line of ruby"

"This looks nice, but most of the hard work is done elsewhere."

What were you expecting?

~~~
mitchh
The title seems to lead on that it's possible to create beautiful charts with
just one line of Ruby, when really it's 'Create beautiful charts with just one
line of Ruby (if you use these libraries).'

The original title is 'Create beautiful Javascript charts with one line of
Ruby', which is more accurate.

~~~
lobster_johnson
Well, it's true: You _can_ create charts with just one line of Ruby. The fact
that it uses libraries to provide such a service is irrelevant to the
assertion.

------
winstonyw
Good stuff!

The groupdate lib's really handy for quick visualization of data. Nice!

For more complex visualizations, might want to check out GoogleVisualr which I
created <http://googlevisualr.herokuapp.com/> but that only works with Google
Visualizations.

------
hayksaakian
Hmm. I'm getting a

    
    
        undefined method `group' for #<Array:0x3a32f0c>
    

error with

    
    
        <%= pie_chart @pixel.hits.group("referrer").count %>
    

using mongoid 3, Pixel embeds_many Hits, Hit embedded_in Pixel. referrer is a
string field of a Hit.

~~~
jdminhbg
#group is an Arel method that generates a SQL 'GROUP BY' clause in the
resulting statement, not part of chartkick or mongoid.

~~~
hayksaakian
it'd be nice to get a heads up that this was dependent on using a SQL
database.

~~~
akane
It's not dependent on SQL. @pixel.hits is returning an Array, and there is no
method group for Array in Ruby. You could try group_by if you really want to
group an Array, or use the Mongoid syntax for grouping.

~~~
hayksaakian
Is this:

[http://stackoverflow.com/questions/4732393/ordering-and-
grou...](http://stackoverflow.com/questions/4732393/ordering-and-grouping-in-
mongoid)

What you're referring to?

~~~
akane
You may have to use counts from map reduce. I'm not super familiar with the
current state of MongoDB.
[http://mongoid.org/en/mongoid/docs/querying.html#aggregation...](http://mongoid.org/en/mongoid/docs/querying.html#aggregations)

Hopefully someone else can speak to this.

------
tbrooks
I've been looking for something like groupdate for a long time.

Time to go back and refactor...

------
jameswyse
I wasn't going to click on this as I don't use Ruby very often, but I'm glad I
did as it's mostly JavaScript with a ruby helper!

If I were you I would reverse the focus and make it a JavaScript library with
helpers for various languages.

~~~
akane
Would love to do that! Stay tuned :-)

------
gothep
Looks really good, will definitely use this when charts cross my path the next
time! Is there really anything in life that isn't replaceable with one line of
Ruby? Got to love that pile of gems.

------
MartinDuese
I get " __* RuntimeError Exception: Connection adapter not supported: PostGIS"
when trying to use groupdate.

I am using Postgresql with Postgis.

Is there a workaround?

------
swombat
I'm kind of confused about the "group_by_day" type methods... where do those
come from? I guess the app has to code them?

~~~
akane
Those are from groupdate. <https://github.com/ankane/groupdate>

------
vysakh0
This is what i was looking for, just in time :) I had tried Highcharts but
this is the most neat solution. Thanks.

------
MoOmer
Very cool, but the site examples broke on my Android 2.3.5 browser - " Cannot
set property 'overflow' of null"

~~~
akane
Looks like a possible bug with Google Charts
[http://stackoverflow.com/questions/15195808/cannot-set-
prope...](http://stackoverflow.com/questions/15195808/cannot-set-property-
overflow-of-null)

------
huhtenberg

      Error Loading Chart: Please install Google Charts or Highcharts

~~~
sanderjd
Did you include Google Charts or Highcharts as described in the installation
instructions?

~~~
huhtenberg
This is the message I see on the linked page, where (I'm guessing) the demo is
supposed to be.

------
olapersson
That looks really slick. Will give it a spin.

------
purephase
This looks amazing. Thanks for sharing.

------
herman5
Can the charts be customized?

~~~
akane
Minimum customization right now, but I'm open to add more options if specific
ones are in high demand.

------
phillmv
This made my morning. Thanks!

------
MatthewB
This is amazing.

------
summatori
Great Stuff!

------
justplay
amazing .

~~~
justplay
whats wrong ?

