Skip to main content

Using Charts in Rails Application

Hi Folks,
               i have been using charts and graphs to show statistics such for number of orders,products category,daily visits.etc.

Before i started using charts,i have been using Charts,js to show charts,which is too very easy.
Here is the link where you can get more to understand about Chart.js As i want to share more about Chartkick,which is a ruby gem which simplifies usage of Charts/Graphs in any Rails application just by simply installing the Gem and using one-line code in your view files wherein you need to pass group_by aggregated results

 Let us Start by visiting the Gthub page for Chartkick gem


  1. Install the Gem 
  2. Add the Dependent script(google chart/highchart js) in layout file
<%= javascript_include_tag "//www.google.com/jsapi", "chartkick" %>
3.YOU ARE DONE :)
Once you have the Gem,all you need to do is to decide what type of charts you want to show.which can be:-


  1. Line Chart
2. Pie Chart



3. Column/Bar Chart



4. Area Chart



5. Geo Chart



And Much more....

For all the above charts and graphs,you just need to use one line of ruby code where you specify which chart helper(pie,bar,area,line etc) you are using and pass in the array of two columns(name-> count)

So this is what you need to do to generate all of the above charts..

First  get the data to be shown on the Chart which should be always grouped by count.

###in model/controller/concerns
##i want to show how many orders are created at which particular date
##hence i am grouping them by order_date/created_at
@orders=Orders.group("DATE(order_date)").order("order_date ASC").count 
##which gives me this
##{"1.01.2015" => 10, "5.02.2015" => 5, "8.02.2015" => 25, "12.03.2015" => 50}


###in view file
<%= line_chart @orders%>
<%= pie_chart @orders%>
<%= bar_chart @orders%>
<%= geo_chart @orders%>

That's it....All the above code will generate the above shown graphs very easily.

So,now you also know how easy it is to use charts in Rails application instead of adding lots of javascript code to show the same if you have a better option-Chartkick.

I too love to use HighCharts,Chart.js but if you are looking for default charts and graphs,then this is probably the most optimal choice you can go for...




Comments

Post a Comment

Popular posts from this blog

Access files on AWS S3 bucket using aws-sdk-s3 with Rails 6

This is a quick post to share few easy methods to access files on AWS S3. The below custom utility methods uses  aws-sdk-s3 Firstly lets define a constant to access files on S3 -  ##to manage S3 Resources S3 = Aws::S3::Resource.new( region: "YOUR-REGION", access_key_id: "YOUR-AWS-KEY", secret_access_key: "YOUR-AWS-SECRET") ##to query S3 S3_client = Aws::S3::Client.new( access_key_id: configatron.aws.s3.credentials.access_key_id, secret_access_key: configatron.aws.s3.credentials.secret_access_key, region: configatron.aws.s3.region ) Now, lets use the S3 OBJECT to access files in different ways -  1. Get all files in a S3 FOLDER     ##this gives a array of file paths present in the folder specified by prefix attribute          s3objects = S3.bucket("my-output-bucket").objects({prefix: "/inputs/any-random-user-folder"}).collect(&:key) ##you can also delete the file if found ...
Post a Comment
Read more

Setting Axios to put/post dynamically

 Let me avoid wasting more time and quickly jump on the problem statement. What is the problem statement -  - I want to use the same React component both for Create/Update. How I achieved it -  - Firstly for new object, it worked smoothly and I wanted to reuse the same component again for edit/update too. - I sent the existing values as props and saved them into the corresponding states. - I reused the existing method ( axios server call ) so that it dynamically POST/PUT as needed.This is show below -         //this method calls post/put dynamically - simple code here..no rocket science methodCall = () => { const { Id, editable, details } = this.state; //check if new or existing record if (editable) { return API.put(`/post/${Id}`, details); } else { return API.post("/post", details); } }; //call this method onClick/onSubmit - as you want to handleSubmit = (event) => { event.preventDefault(); ...
Post a Comment
Read more

So easy to install ruby on rails on ubuntu 12.04/centos 6 and start development

Its easy to start development on ubuntu/centos using vmware and start development.i will start the code on certain assumptions : you know ruby on rails you are aware of how to make use of google(in case u are stuck and want to explore more without spoon feeding) LAST BUT NOT LEAST---you love coding short preview of sequence you need to follow:  START -> get vmware -> get ubuntu/centos -> get rvm -> get ruby -> get rails----END--THAT'S IT Lets start and finish this quickly using below mentioned steps: install vmware player if you are using windows/mcintosh from https://my.vmware.com/web/vmware/downloads  NOW.vmware player need image file of the operating system you want,so hit the url and get centos at http://vault.centos.org/6.2/isos/ OR ubuntu at http://www.ubuntu.com/download/desktop ONCE both vmware player and ubuntu/centos are downloaded,follow the steps to first install vmware(very simple) and mounting ubu...
Post a Comment
Read more