Giter Club home page Giter Club logo

google_visualr's Introduction

Overview

This Ruby library, GoogleVisualr, is a wrapper around the Google Visualization API and allows you to create the same visualizations with just pure Ruby; you don’t have to write any JavaScript at all.

Good for any Ruby on Rails setup whereby you prefer to work your logic in models or controllers.

Please refer to the GoogleVisualr reference site for a complete list of visualizations that you can create with GoogleVisualr.

The Gist

  • In your model or controller, write Ruby code to create your visualization (e.g. Area Chart, Bar Chart, even Spark Lines etc).

  • Configure your visualization with all the options as listed in Google Visualization API Docs. E.g. Area Chart’s configuration options.

  • In your view, just call a visualization.render(div_id) method that will magically generate and insert JavaScript into the final HTML output.

  • You get your visualization, and you didn’t write any JavaScript!

Limitations

Do note that GoogleVisualr is not a 100% complete wrapper for the Google Visualization API. These are not implemented for sake of simplicity:

  • JavaScript Methods for use after a visualization has been rendered in a view. E.g. Area Chart’s methods.

  • JavaScript Events for use after a visualization has been rendered in a view. E.g. Area Chart’s events.

  • Visualizations not created by Google, and a few image-only charts.

Install

Just install the GitHub repository into your app/vendor/plugin folder.

> rails my_app; cd my_app;
> script/plugin install git://github.com/winston/google_visualr.git

Basics

This section describes a basic implementation of the GoogleVisualr::AreaChart class.

Please review the Docs for detailed documentation and advanced implementation of constructors and methods.


In your Rails layout, load Google Ajax API in the head tag, at the very top.

<script src='http://www.google.com/jsapi'></script>

In your Rails controller, initialize a visualization (area chart) with an empty constructor.

@chart = GoogleVisualr::AreaChart.new

Populate visualization with column headers, and row values.

# Add Column Headers
@chart.add_column('string', 'Year' )
@chart.add_column('number', 'Sales')
@chart.add_column('number', 'Expenses')

# Add Rows and Values
@chart.add_rows(4)
@chart.set_value(0, 0, '2004')
@chart.set_value(0, 1, 1000)
@chart.set_value(0, 2, 400)
@chart.set_value(1, 0, '2005')
@chart.set_value(1, 1, 1170)
@chart.set_value(1, 2, 460)
@chart.set_value(2, 0, '2006')
@chart.set_value(2, 1, 1500)
@chart.set_value(2, 2, 660)
@chart.set_value(3, 0, '2007')
@chart.set_value(3, 1, 1030)
@chart.set_value(3, 2, 540)

Configure visualization with options.

@chart.width = 400
@chart.height = 240

In your Rails view, render visualization.

<div id='chart'></div>
<%= @chart.render('chart') %>

Support

Please submit all feedback, bugs and feature-requests to GitHub Issues Tracker.

Please also feel free to clone/fork the project, and improve it further!

Author

GoogleVisualr is maintained by Winston Teo, and his Ninja Penguin.

Who is Winston Teo? Find out more on WinstonYW, LinkedIn, or follow Winston on Twitter.

License

Copyright © 2010 Winston Teo Yong Wei. Free software, released under the MIT license.

google_visualr's People

Contributors

sigmike avatar winston avatar yatsyk avatar

Stargazers

 avatar

Watchers

 avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.