Coder Social home page Coder Social logo

zhengjia / lazy_high_charts Goto Github PK

View Code? Open in Web Editor NEW

This project forked from michelson/lazy_high_charts

1.0 1.0 1.0 1.12 MB

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

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

License: MIT License

Ruby 100.00%

lazy_high_charts's Introduction

This is forked from the original gem_support branch.

In this fork:

  1. All the default options are removed. Those default options in the original library can really make you lazy, but it often gives you surprising result if you don't redefine it. Besides, the HTML and CSS default options should really be handled separately. You have more control over what you need with this fork.

  2. You are able to append additional options. It makes it easier to have a template chart object and construct it for different scenarios. For example, you want to show temperatures for different periods of time. You can define a template like this:

template = LazyHighCharts::HighChart.new do |f| f.xAxis(:type => "datetime") f.yAxis(:title => { :text => "Degrees" } ) f.series(:pointInterval => 86400000 ) end

You can append the data later to the template like this:

template.tap do |f| f.title(:text => "Week to Date Smokes") f.series({:pointStart => Time.now.beginning_of_week.to_i*1000, :data => @week_data}, :merge ) end

Notice the :merge option, which takes the hash and merge it to the first element of the array options[:series][:data]

If you need to add a second series of data, just don't pass the :merge option, and it will be appended to the data array, like this:

template.tap do |f| f.series(:pointInterval => 86400000, :pointStart => Time.now.beginning_of_last_week.to_i*1000, :data => @last_week_data ) end

  1. You only need to pass in one optional parameter to the initializer. So you can do:

LazyHighCharts::HighChart.new do |f| ... end

And by default the highchart js library will use line to plot.

You can also pass in the optional parameter to specify the type of graph, like:

LazyHighCharts::HighChart.new('pie') do |f| ... end

The plot options are documented on highcharts website.

  1. Rename options[:x_axis] and options[:y_axis] to options[:xAxis] and options[:xYxis], and options[:plot_options] to options[:plotOptions] to make it consistent with highcharts.

  2. Generators are removed. You can download highcharts and include it in views yourself.

LazyHighCharts

update(Dec 4,2010)

  • Test Environment ruby 1.9.2p0 (2010-08-18 revision 29036) [x86_64-darwin10.4.0] rspec 2.0 rails 3.0.1
  • Result(autotest) Finished in 0.01502 seconds 9 examples, 0 failures

Attention: this gem Only support Rails 3.x

Usage

In your Gemfile, add this line: gem 'lazy_high_charts'

Usage in Controller:

 @h = LazyHighCharts::HighChart.new('graph') do |f|
    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[:x_axis][:categories] = ["uno" ,"dos" , "tres" , "cuatro"]
 ......

Overriding entire option:

 @h = LazyHighCharts::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 layout:

<%= javascript_include_tag 'highcharts' %>

Usage in view:

<%= high_chart("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.

  <% high_chart("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/

Contributors

LazyHighCharts gem is maintained by "Deshi Xiao":https://github.com/xiaods

git shortlog -n -s --no-merges

Copyright (c) 2010 Miguel Michelson Martinez, released under the MIT license

lazy_high_charts's People

Contributors

michelson avatar xiaods avatar zhengjia avatar clifff avatar

Stargazers

William Flanagan avatar

Watchers

 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.