6 ms·
Show HN: Create Javascript charts with one line of Ruby
- purephase 13y agoThis looks amazing. Thanks for sharing.
- hiccup 13y agoGreat meta graphing library. Love that Google Charts AND Highcharts are supported.
- olapersson 13y agoThat looks really slick. Will give it a spin.
- huhtenberg 13y agoError Loading Chart: Please install Google Charts or Highcharts
- envex 13y agoYou 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" %> --
- akane 13y agoBe sure you include the <script> tag for Google Charts or Highcharts before you include chartkick.js.
- sanderjd 13y agoDid you include Google Charts or Highcharts as described in the installation instructions?
- huhtenberg 13y agoThis is the message I see on the linked page, where (I'm guessing) the demo is supposed to be.
- jqueryin 13y agoThe 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/chartkick/helper.rb https://github.com/ankane/chartkick/blob/master/lib/chartkic...
- akane 13y agoThanks! 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 13y agoThe 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 13y agoWell, well, mccolin replying to akane, long live Context Optional. And nice work akane.
- mccolin 13y agoLong live Context Optional, indeed!
- antileet 13y agoIf anyone's looking for similar functionality for PHP (Database-level time-grouping, time-ranged drilldowns, charts), you can check out http://razorflow.com 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)
- shabda 13y agoWe are building something similar for Django/Python: https://github.com/agiliq/django-graphos https://github.com/agiliq/django-graphos I am going to pick up some ideas from your code.
- swombat 13y agoI'm kind of confused about the "group_by_day" type methods... where do those come from? I guess the app has to code them?
- cabalamat 13y agoAssuming 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 13y agoit's called interpolation.
- cscheid 13y agoIt has a name, but it's still a bad idea.
- gcr 13y agoUsing straight lines between points has an even fancier name: "Linear interpolation," which, by your logic, still means it's a better idea.
- ibrahima 13y agoI 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.
- MoOmer 13y agoVery cool, but the site examples broke on my Android 2.3.5 browser - " Cannot set property 'overflow' of null"
- akane 13y agoLooks like a possible bug with Google Charts http://stackoverflow.com/questions/15195808/cannot-set-property-overflow-of-null http://stackoverflow.com/questions/15195808/cannot-set-prope...
- tomblomfield 13y agoThis looks nice, but most of the hard work is done elsewhere. https://github.com/ankane/groupdate 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...
- akane 13y agoHighcharts, 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.
- logicallee 13y ago"Beautiful charts with 1 line of ruby" "This looks nice, but most of the hard work is done elsewhere." What were you expecting?
- mitchh 13y agoThe 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 13y agoWell, 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.
- CatMtKing 13y agoAgh, pedantic semantics!
- justplay 13y agoamazing .
- justplay 13y agowhats wrong ?
- patio11 13y agoNice, 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 13y agoAwesome, looking forward to it.
- up_and_up 13y agoLazy Highcharts has been available for quite some time: https://github.com/michelson/lazy_high_charts 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.
- vysakh0 13y agoThis is what i was looking for, just in time :) I had tried Highcharts but this is the most neat solution. Thanks.
- bluesnowmonkey 13y agoIf 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 13y agoWhy should the controller be generating graphics? The UI can do that.
- jeremyjh 13y agoDepending 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 13y agoI 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).
- windsurfer 13y agoNot 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.
- MatthewB 13y agoThis is amazing.
- tbrooks 13y agoI've been looking for something like groupdate for a long time. Time to go back and refactor...
- hayksaakian 13y agoHmm. 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 13y ago#group is an Arel method that generates a SQL 'GROUP BY' clause in the resulting statement, not part of chartkick or mongoid.
- hayksaakian 13y agoit'd be nice to get a heads up that this was dependent on using a SQL database.
- akane 13y agoIt'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 13y agoIs this: http://stackoverflow.com/questions/4732393/ordering-and-grouping-in-mongoid http://stackoverflow.com/questions/4732393/ordering-and-grou... What you're referring to?
- akane 13y agoYou 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#aggregations http://mongoid.org/en/mongoid/docs/querying.html#aggregation... Hopefully someone else can speak to this.
- 13y ago
- phillmv 13y agoThis made my morning. Thanks!
- summatori 13y agoGreat Stuff!
- jameswyse 13y agoI 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 13y agoWould love to do that! Stay tuned :-)
- deleted 13y ago[deleted]
- deleted 13y ago[deleted]
- gothep 13y agoLooks 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.
- herman5 13y agoCan the charts be customized?
- akane 13y agoMinimum customization right now, but I'm open to add more options if specific ones are in high demand.
- winstonyw 13y agoGood 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/ http://googlevisualr.herokuapp.com/ but that only works with Google Visualizations.
- MartinDuese 13y agoI get "* RuntimeError Exception: Connection adapter not supported: PostGIS" when trying to use groupdate. I am using Postgresql with Postgis. Is there a workaround?