Make highcharts a la ruby , works in rails 4.X / 3.X, and other ruby web frameworks
Ruby HTML CSS JavaScript
Latest commit e4cabd0 Nov 2, 2016 @michelson committed on GitHub Merge pull request #225 from CO2Management/master
Update highcharts and modules

README.md

LazyHighCharts

Gitter

This gem provides a simple and extremely flexible way to use HighCharts from ruby code. Tested on Ruby on Rails, Sinatra and Nanoc, but it should work with others too.

Build Status Code Climate

VERSION ChangeLog

Information

Getting Help

  • Please report bugs on the issue tracker but read the "getting help" section in the wiki first.

Installation

Installation with rubygems

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

gem 'lazy_high_charts'

edge version on trial

gem 'lazy_high_charts' --pre

then run

bundle install

and add this in the application.js

//= require jquery
//= require jquery_ujs
//= require_tree .
//= require turbolinks

//= require highcharts/highcharts
//= require highcharts/highcharts-more
//= require highcharts/highstock

to install it.

Usage:

Controller code:

@chart = LazyHighCharts::HighChart.new('graph') do |f|
  f.title(text: "Population vs GDP For 5 Big Countries [2009]")
  f.xAxis(categories: ["United States", "Japan", "China", "Germany", "France"])
  f.series(name: "GDP in Billions", yAxis: 0, data: [14119, 5068, 4985, 3339, 2656])
  f.series(name: "Population in Millions", yAxis: 1, data: [310, 127, 1340, 81, 65])

  f.yAxis [
    {title: {text: "GDP in Billions", margin: 70} },
    {title: {text: "Population in Millions"}, opposite: true},
  ]

  f.legend(align: 'right', verticalAlign: 'top', y: 75, x: -50, layout: 'vertical')
  f.chart({defaultSeriesType: "column"})
end

@chart_globals = LazyHighCharts::HighChartGlobals.new do |f|
  f.global(useUTC: false)
  f.chart(
    backgroundColor: {
      linearGradient: [0, 0, 500, 500],
      stops: [
        [0, "rgb(255, 255, 255)"],
        [1, "rgb(240, 240, 255)"]
      ]
    },
    borderWidth: 2,
    plotBackgroundColor: "rgba(255, 255, 255, .9)",
    plotShadow: true,
    plotBorderWidth: 1
  )
  f.lang(thousandsSep: ",")
  f.colors(["#90ed7d", "#f7a35c", "#8085e9", "#f15c80", "#e4d354"])
end

View Helpers:

<%= high_chart_globals(@chart_globals) %>
<%= high_chart("some_id", @chart) %>

high_chart_globals is optional. Use it to set the global options of all charts that are currently displayed on the page. More info here.

No Data

When your series has no data and you want to display a message using Highcharts' noData feature (Highcarts doc) you have to include the no-data-to-display.js file like so:

//= require highcharts/highcharts
//= require highcharts/highcharts-more
//= require highcharts/modules/no-data-to-display

You can then set the actual message that is displayed like so:

    @chart = LazyHighCharts::HighChart.new('graph') do |f|
      f.options[:lang] = { noData: "My beautiful noData message" }
      f.title(text: nil)
      f.series([])
    end

Demo projects:

Nanoc App

Rails App

Sinatra App

Update to latest js library. Additional command line

To update to the current highcharts.js directly from http://code.highcharts.com/", you can always run

rake highcharts:update

And HC will be copied to your vendor/assets directory on your app

Deprecation notice:

If you use rails 2.3.x or 3.0.x or 3.1.x, please use versions less than 1.3.3.

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.

Thanks for all contributors

Maintainers

License