Giter Site home page Giter Site logo

tkling / lazy_high_charts Goto Github PK

View Code? Open in Web Editor NEW

This project forked from christian-blades-cb/lazy_high_charts

0.0 2.0 0.0 650 KB

rails plugin for make highcharts a la ruby , works in rails 3.0 / 3.1

Home Page: http://www.suipit.com

License: MIT License

Ruby 100.00%

lazy_high_charts's Introduction

LazyHighCharts

Easily displaying Highcharts graphs with gem style. Build Status

Notice

Current VERSION ChangeLog

Installation

Installing it by rubygems

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

You do not need to run this unless you are using the older rails versions 3.0 or 3.1: 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

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

For Rails 2.x/3.0.x

  1. you need manually put jquery/highcharts js to public/javascript
  2. 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  %>
  1. add gem name in your config/environment.rb
config.gem "lazy_high_charts"
  1. 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] = {areaspline: {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

License

  • Copyright (c) 2011,2012 Deshi Xiao,released under the MIT license
  • Copyright (c) 2010 Miguel Michelson Martinez, released under the MIT license

lazy_high_charts's People

Contributors

clifff avatar fred avatar hectormalot avatar kylewelsby avatar leftis avatar michelson avatar nodrog avatar raggi avatar rkischuk avatar ryanmt avatar surajreddy avatar tboyko avatar tkling avatar tomgi avatar xiaods 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.