LazyHighCharts

Easily displaying Highcharts graphs with gem style.

Notice

latest version: 1.2.2 ChangeLog

Installation instructions for Rails 3

Installing it by rubygems

To install it, you just need to add it to your Gemfile: gem 'lazy_high_charts'

And then run this to install the javascript files: rails g lazy_high_charts:install

Installing it as a plugin for rails 2.3.x

script/plugin install git://github.com/michelson/lazy_high_charts.git ##(for rails 2)

rails plugin install git://github.com/michelson/lazy_high_charts.git  ##(for rails 3)

HighStocks

LazyHighCharts now compatible with beta HighStock, http://www.highcharts.com/stock/demo/

Usage

About javascript Assets notes:

For Rails 3.2.x

add your highcart js to app/assets/javascripts/application.js //= require highcharts

For Rails 2.x/3.0.x

you need manually put jquery/highcharts js to public/javascript

modify your layout html Sample Code:

<%= javascript_include_tag "http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"  %>
<%= javascript_include_tag :highcharts  %>

add gem name in your config/environment.rb
```
config.gem "lazy_high_charts"
```
Done!

Demo Usage in Controller:

@h = LazyHighCharts::HighChart.new('graph') do |f|
  f.options[:chart][:defaultSeriesType] = "area"
  f.series(:name=>'John', :data=>[3, 20, 3, 5, 4, 10, 12 ,3, 5,6,7,7,80,9,9])
  f.series(:name=>'Jane', :data=> [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 = LazyHighCharts::HighChart.new('graph') do |f|
  #.....
  f.options[:chart][:defaultSeriesType] = "area"
  f.options[:chart][:inverted] = true
  f.options[:legend][:layout] = "horizontal"
  f.options[:xAxis][:categories] = ["uno" ,"dos" , "tres" , "cuatro"]
  #......

Overriding entire option:

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

If you want to use this syntax and still be able to build option step-by-step without overriding:

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

Using the datetime axis type:

@h = LazyHighCharts::HighChart.new('graph', style: '') do |f|
  f.options[:chart][:defaultSeriesType] = "area"
  f.options[:plotOptions] = {area: {pointInterval: 1.day, pointStart: 10.days.ago}}
  f.series(:name=>'John', :data=>[3, 20, 3, 5, 4, 10, 12 ,3, 5,6,7,7,80,9,9])
  f.series(:name=>'Jane', :data=> [1, 3, 4, 3, 3, 5, 4,-46,7,8,8,9,9,0,0,9])
  f.xAxis(type: :datetime)
end

A datetime axis example

Usage in layout:

<%= javascript_include_tag :highcharts %>

Usage in view:

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

You can pass in additional javascript into to the view with a block, this will be executed before the high chart is called

<%= high_chart("my_id", @h) do |c| %>
  alert('hello')
<%end %>

To include javascript function calls or callbacks you can use the js_code method on your string"function".js_code:

f.options[:plotOptions] = { 
  :column => { :events => { :click => %|function() { window.location = "http://www.highcharts.com" }|.js_code } }
}

HighStock Support:

Just call HighChart Helper this way:

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

Option reference:

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

HighCharts License:

http://www.highcharts.com/license

Contributing

We're open to any contribution. It has to be tested properly though.

Fork the project
Do your changes and commit them to your repository
Test your changes. We won't accept any untested contributions (except if they're not testable).
Create an issue with a link to your commits.

Contributer List:

Thanks for Troy & David

Maintainers

Miguel Michelson Martinez github/michelson
Deshi Xiao github/xiaods