YeqsJquery¶ ↑

This project rocks and uses MIT-LICENSE.

Install yeqs_jquery as a gem and get it work with your rails 3 applications.

gem install yeqs_jquery

Add yeqs_jquery to your Gemfile.

gem 'yeqs_jquery'

Generate the assets of jquery related components.

rails g yeqs:jquery core
rails g yeqs:jquery ui
rails g yeqs:jquery tools
rails g yeqs:jquery rails
rails g yeqs:jquery highcharts

Jquery is the basic component of all the jquery related components. You should include jquery component in your views at first.

<%= include_jquery %>

this will produce html like:

<script type="text/javascript" src="/components/jquery/jquery-1.4.2.min.js"></script>

In order to use jqueryui, you should include jqueryui scripts and stylesheets in your views.

<%= include_jqueryui %>

this will produce html like:

<link type="text/css" media="screen" rel="stylesheet" href="/components/jqueryui/css/smoothness/jquery-ui-1.8.2.custom.css" />
<script type="text/javascript" src="/components/jqueryui/js/jquery-ui-1.8.2.custom.min.js"></script>

In order to use jquerytools, you should include jquerytools scripts in your views.

<%= include_jquerytools %>

this will produce html like:

<script type="text/javascript" src="/components/jquerytools/jquery.tools.min.js"></script>

In order to use jquery rails support, you should include jquery rails scripts in your views.

<%= include_jqueryrails %>

this will produce html like:

<script type="text/javascript" src="/components/jqueryrails/rails.js"></script>

In order to use highcharts, you should include highcharts scripts in your views.

<%= include_jqueryhighcharts %>

this will produce html like:

<script type="text/javascript" src="/components/jqueryhighcharts/js/highcharts.js"></script>

Usage in Controller:

@h = Yeqs::Jquery::Highchart.new('graph') do |f|
  f.series('John', [3, 20, 3, 5, 4, 10, 12 ,3, 5,6,7,7,80,9,9])
  f.series('Jane', [1, 3, 4, 3, 3, 5, 4,-46,7,8,8,9,9,0,0,9] )
end

Without overriding entire option , (only change a specific option index):

@h = Yeqs::Jquery::Highchart.new('graph') do |f|
.....
  f.options[:chart][:defaultSeriesType] = "area"
  f.options[:chart][:inverted] = true
  f.options[:legend][:layout] = "horizontal"
  f.options[:x_axis][:categories] = ["uno" ,"dos" , "tres" , "cuatro"]
......

Overriding entire option:

@h = Yeqs::Jquery::Highchart.new('graph') do |f|
.....
  f.x_axis(:categories => @days.reverse! , :labels=>{:rotation=>-45 , :align => 'right'})
  f.chart({:defaultSeriesType=>"spline" , :renderTo => "myRenderArea" , :inverted => true})
.....

Usage in view:

<%= highchart("my_id", @h) %>

Passing formatting options in the view to the helper block , because all the helper options declared in the controller are converted in strict/valid json (quoted key); so we need to extend the json object with some js.

<% highchart("my_id", @h) do |c| %>
 	<%= "options.tooltip.formatter = function() { return '<b>HEY!!!'+ this.series.name +'</b><br/>'+ this.x +': '+ this.y +' units';}" %>
 	<%= "options.xAxis.labels.formatter = function() { return 'ho';}" %>
 	<%= "options.yAxis.labels.formatter = function() { return 'hey';}" %>
<%end %>

Option reference:

http://www.highcharts.com/ref/