CODEWITHSUNDEEP
javascriptruby-on-railsd3.jsgoogle-visualization
Kamesh Joshi
Kamesh Joshi

Reputation: 390

View data in graph from rails

I have 3 sections section1, section2, section3, and each section has 3 subsection correct,incorrect and wrong and each one of then again has 3 Subsections H,M,L like this in rails.

 {"section1"=>{"correct"=>{"h"=>"2", "m"=>"4", "l"=>"6"}, 
"wrong"=>{"h"=>"7", "m"=>"6", "l"=>"7"}, "blank"=>{"h"=>"5", 
"m"=>"7", "l"=>"9"}}, "section2"=>{"correct"=>
{"h"=>"3", "m"=>"1", "l"=>"2"}, "wrong"=>{"h"=>"2", "m"=>"2",
"l"=>"2"}, "blank"=>{"h"=>"4", "m"=>"2", "l"=>"4"}}, "section3"=>
{"correct"=>{"h"=>"3", "m"=>"2", "l"=>"4"}, "wrong"=>{"h"=>"4",
"m"=>"4", "l"=>"6"}, "blank"=>{"h"=>"6", "m"=>"7", "l"=>"5"}}}

i want to show about representation in graph either using d3.js or google charts and i have no clue how to to that, can someone please suggest a way of doing this. thanks in advance.

Upvotes: 0

Views: 360

Answers (2)

Deepak Mahakale
Deepak Mahakale

Reputation: 23661

There is fusioncharts which has a rails wrapper over it. And it is easy to use Just initialize a new object

Controller

class DashboardController < ApplicationController

  def index

    @chart = Fusioncharts::Chart.new({
        width: "600",
        height: "400",
        type: "mscolumn2d",
        renderAt: "chartContainer",
        dataSource: {
            chart: {
            caption: "Comparison of Quarterly Revenue",
            subCaption: "Harry's SuperMart",
            xAxisname: "Quarter",
            yAxisName: "Amount ($)",
            numberPrefix: "$",
            theme: "fint",
            exportEnabled: "1",
            },
            categories: [{
                    category: [
                        { label: "Q1" },
                        { label: "Q2" }
                    ]
                }],
                dataset: [
                    {
                        seriesname: "Previous Year",
                        data: [
                            { value: "10000" },
                            { value: "11500" }
                        ]
                    },
                    {
                        seriesname: "Current Year",
                        data: [
                            { value: "25400" },
                            { value: "29800" }
                        ]
                    }
              ]
        }
    })

  end

end

View

<h3>My Chart</h3>
<div id="chartContainer"><%= @chart.render() %></div>

That's it

Output

enter image description here

Fiddle

http://jsfiddle.net/fusioncharts/zKL3F/

GitHub

https://github.com/fusioncharts/rails-wrapper

Upvotes: 1

Chris Lewis
Chris Lewis

Reputation: 1325

Chartkick provides a neat way to take hashes and display them using either Google Charts or Highcharts:

https://github.com/ankane/chartkick

There are examples and documentation on the github page above.

Upvotes: 0

Related Questions