Show HN: Create Javascript charts with one line of Ruby | Hacker News Reader

Show HN: Create Javascript charts with one line of Ruby

ankane.github.io

272 pointsakane61 comments

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.

Awesome, looking forward to it.

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.

it's called interpolation.

It has a name, but it's still a bad idea.

Using straight lines between points has an even fancier name: "Linear interpolation," which, by your logic, still means it's a better idea.

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.

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

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)

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.

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

Long live Context Optional, indeed!

If anyone's looking for similar functionality for PHP (Database-level time-grouping, time-ranged drilldowns, charts), you can check out http://razorflow.com

(Disclosure: I am the developer of RazorFlow, and am only posting here because I feel it's relevant to this particular story)

We are building something similar for Django/Python:

https://github.com/agiliq/django-graphos

I am going to pick up some ideas from your code.

shabda - this is great. i'm going to try this out and contribute some more graph types over the next few weeks.

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.

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.

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

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.

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

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.

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

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

Highcharts, Google Chart, groupdate, jQuery (for AJAX), and iso8601.js (date parsing) definitely do the heavy lifting.

My favorite part about the library is you don't need to worry about getting the data in correct format. It just works with existing Rails methods, like ActiveRecord's count.

Also, Google Charts look a lot better with a little bit of custom styling.

"Beautiful charts with 1 line of ruby"

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

What were you expecting?

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.

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.

Agh, pedantic semantics!

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.

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.

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

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

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.

Is this:

http://stackoverflow.com/questions/4732393/ordering-and-grou...

What you're referring to?

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

Hopefully someone else can speak to this.

You can do the same in just ruby:

    pie_chart @pixel.hits.group_by{|u| u.referrer }.each_with_object({}) {|(k,v), h| h[k] = v.size }

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

Time to go back and refactor...

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.

Would love to do that! Stay tuned :-)

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.

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

I am using Postgresql with Postgis.

Is there a workaround?

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?

There you go: https://github.com/ankane/groupdate

Those are from groupdate. https://github.com/ankane/groupdate

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

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

Looks like a possible bug with Google Charts http://stackoverflow.com/questions/15195808/cannot-set-prope...

  Error Loading Chart: Please install Google Charts or Highcharts

You have to install either library as well:

For Google Charts, use:

<%= javascript_include_tag "//www.google.com/jsapi", "chartkick" %> If you prefer Highcharts, use:

<%= javascript_include_tag "path/to/highcharts.js", "chartkick" %>

Be sure you include the <script> tag for Google Charts or Highcharts before you include chartkick.js.

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

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

That looks really slick. Will give it a spin.

This looks amazing. Thanks for sharing.

Can the charts be customized?

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

This made my morning. Thanks!

This is amazing.

Great Stuff!

amazing .

whats wrong ?

Reply on news.ycombinator.com