michelson / lazy_high_charts

Make highcharts a la ruby , works in rails 5.X / 4.X / 3.X, and other ruby web frameworks

LazyHighCharts

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. Highcharts is not free for commercial use, so make sure you have a valid license to use Highcharts.

VERSION ChangeLog

Information

• RDoc documentation available on RubyDoc.info
• Source code available on GitHub
• More information, known limitations, and how-tos available on the wiki

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 make sure to get the latest version (unless you'd like an older version for some reason)

rake highcharts:update

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

• Deshi Xiao github/xiaods
• Miguel Michelson github/michelson

License

• Copyright (c) 2008-2014 MIT LICENSE

lazy_high_charts's Issues

Problems rendering pie

I have an app with chart and bar implemented pefectly but pie just won't render with any example

http://pastie.org/private/wwcs4rc0xuqjcxmap6cp9g

will only render anything if I comment out the series

http://pastie.org/private/jh5awdwpfu5cfrvuqcva

view: <%= high_chart("pie", @pie_example) %>

I'm guessing the series syntax is wrong, any help appreciated.

Plot options added twice

When trying to create a pie chart from a controller, I get plotOptions added twice in the config. It will randomly overwrite the config options I have. Thanks for an amazing plugin that saved me a bit of time.

Controller # # # # # # # #

@chart = LazyHighCharts::HighChart.new('pie') do |f|
        f.chart({:defaultSeriesType => "pie", :marginLeft => 400, :backgroundColor => 'transparent'} )
        series = {
                 :type => 'pie',
                 :name => 'Energy Sources',
                 :data => data
        }
        f.series(series)
        f.colors(["#005496", "#59b8e0", "#aadae9", "#7fa42f", "#8dc641", "#9ecb3b", "#cbb778"])
        f.title(
          :text => "Energy Sources",
          :verticalAlign => "top", 
          :align => "right", 
          :x => -45, 
          :y => 60,
          :style => {
            :font=>"34px BebasNeueRegular, Arial, sans-serif",
            :width=>"200",
            :lineHeight=>"34px",
            :color=>"#efefef"
          }
        )
        f.legend(
          :layout => 'vertical', 
          :align => "right", 
          :verticalAlign => "top", 
          :x => -20, 
          :y => 100,
          :borderWidth => 0,
          :itemStyle => {
            :fontWeight=>"bold",
            :font=>"14px Arial, sans-serif",
            :color=>"#efefef"
          }
        )
        f.plot_options(
          :pie =>{
            :allowPointSelect => true, 
            :cursor => "pointer", 
            :dataLabels => {
              :enabled => false
            },
            :showInLegend => true
          }
        )
      end

Created code # # # # # # #

jQuery(function() {
    var options = {
        tooltip: {
            "enabled": true
        },
        credits: {
            "enabled": false
        },
        subtitle: {},
        colors: ["#005496", "#59b8e0", "#aadae9", "#7fa42f", "#8dc641", "#9ecb3b", "#cbb778"],
        plotOptions: {
            "areaspline": {}
        },
        xAxis: {},
        chart: {
            "defaultSeriesType": "pie",
            "marginLeft": 400,
            "renderTo": "top_image",
            "backgroundColor": "transparent"
        },
        title: {
            "x": -45,
            "y": 60,
            "text": "Energy Sources",
            "verticalAlign": "top",
            "align": "right",
            "style": {
                "color": "#efefef",
                "font": "34px BebasNeueRegular, Arial, sans-serif",
                "lineHeight": "34px",
                "width": "200"
            }
        },
        plotOptions: {
            "pie": {
                "dataLabels": {
                    "enabled": false
                },
                "cursor": "pointer",
                "allowPointSelect": true,
                "showInLegend": true
            }
        },
        yAxis: {
            "title": {
                "text": null
            },
            "labels": {}
        },
        legend: {
            "layout": "vertical",
            "x": -20,
            "y": 100,
            "borderWidth": 0,
            "verticalAlign": "top",
            "align": "right",
            "itemStyle": {
                "fontWeight": "bold",
                "color": "#efefef",
                "font": "14px Arial, sans-serif"
            }
        },
        series: [{
            "name": "Energy Sources",
            "data": [["Wind", 7.0], ["Coal", 40.0], ["Hyrdoelectric", 8.0], ["Natural gas", 18.0], ["Nuclear", 23.0], ["Other", 6.0]],
            "type": "pie"
        }]
    };
    var chart = new Highcharts.Chart(options);
});

How to install and use

How do you install this plug-in and use it? I've tried adding it to my gemfile and typing 'bundle install' but that doesn't do anything to my rails app. I also tried installing it as a plugin via: 'rails plugin install git://github.com/michelson/lazy_high_charts.git'. Whenever I try your examples I get "uninitialized constant PacketsController::HighChart" so obviously I'm not requiring your gem correctly. Could you update your README to document the installation procedure a little better? Thanks.

.

.

Highcharts exporting module isn't added in your gem

I was trying to get the exporting module working so my charts could print or be saved as png, jpeg, svg or pdf. But I noticed your highcharts generator only added the highcharts.js file and not the exporting.js from the modules folder in the Highcharts code. I manually added this to app/assets/javascripts/application.js:
//= require modules/exporting

The buttons now show up on my chart but I'm unable to change the name of a exported chart using the following syntax:

controller

@Chart = LazyHighCharts::HighChart.new('graph') do |f|
f.chart({ :renderTo => "chart1", :defaultSeriesType => 'spline' })
...
f.exporting({ :filename => 'my_custom_chart_name' })
end

Any ideas or recommendations on how to specify a custom filename for export?

Formatter not implemented?

I'm trying to implement formatting options for categories on an x axis, namely I want to only show every nth label instead of all of them.

I found out in the high charts forums that you can do this using the x axis formatter option...however I can't seem to get it to work even using the simplest code:

f.options[:x_axis][:formatter] = "function() { return 'hey';}"

Is this not implemented?

use tooltip options,view output double same javascript.no idea.

Dynamically add series to existing chart via Ajax

Love lazy_high_charts, so far it's working out beautifully. However I can't sort something which otherwise seems like it should be so obvious that I'm adding it here as an issue/feature request. I can add a chart to a page via lazy_high_charts' LazyHighCharts::HighChart.new static method. The JavaScript which is generated to add the chart to the desired DIV looks generally like this:

<script type="text/javascript">
    (function() {
        var onload = window.onload;
    window.onload = function(){
        if (typeof onload == "function") onload();
      var options, chart;
      options = { "title": { "text": "Amazon" },
        "legend": { "layout": "vertical","style": {  } },
        "xAxis": { "categories": ["2012-07-01","2012-07-02","2012-07-03""],
        "labels": { "rotation": -45,"align": "right" } },
        "yAxis": { "title": { "text": null },"labels": {  } },"tooltip": { "enabled": true },
        "credits": { "enabled": false },"plotOptions": { "areaspline": {  } },
        "chart": { "defaultSeriesType": "line","renderTo": "charty" },
        "subtitle": {  },"series": [{"name":"Amazon","data":[287,499,385]}] };

      chart = new Highcharts.Chart(options);
    };
})()
</script>

I subsequently want to add new series to the existing chart via Ajax. This is usually very easily done with HighCharts by creating a new series and adding it to the chart object via the addSeries method. However this is not (to my understanding) possible using lazy_high_charts because the chart variable is not global. While I certainly understand why one does not want to make it a habit of creating global JavaScript variables, I'm a bit perplexed by this decision because it means that it is not possible to subsequently add dynamic series to an existing chart, precisely because that chart object is not available?

Surely there is some very easily solution to this problem?

Thanks!
Jason

Not converting <b></b> html tags to actual html

Hello,

Thanks again for this amazing plugin. I have a small problem. When I return this formatter the html tags are printed as strings in the screen instead of rendered as html code. Can someone help with this issue?

<%= "options.plotOptions.pie.dataLabels.formatter =  function() {
              return '<b>'+ this.point.name +'</b>: '+ this.y +' %';
           }" %>

TypeError: Cannot convert 'options.plotOptions.pie' to object

Here is the code I'm using in view:

= high_chart("per_user_ratio", @per_user_ratio) do |c|
  = "options.tooltip.formatter = function() { return '<b>'+ this.point.name +'</b>: '+ Math.round(this.percentage) +' %'; };".html_safe
  = "options.plotOptions.pie.dataLabels.color = Highcharts.theme.textColor || '#000000';".html_safe
  = "options.plotOptions.pie.dataLabels.connectorColor = Highcharts.theme.textColor || '#000000';".html_safe
  = "options.plot_options.pie.dataLabels.formatter = function() { return '<b>'+ this.point.name +'</b>: '+ this.y;};".html_safe

Then I'm getting an error:

Uncaught exception: TypeError: Cannot convert 'options.plotOptions.pie' to object
Error thrown at line 19, column 2 in <anonymous function>() in http://localhost:3000/statistics?utf8=%E2%9C%93&from_tasks=2011-07-18&to_tasks=2011-07-27&commit=Redraw:
    options.plotOptions.pie.dataLabels.color = Highcharts.theme.textColor || '#000000';

This one was tested over the HEAD. In 1.1.1 this works fine and in 1.1.2 an error in controller:

uninitialized constant LazyHighCharts::HighChart::CANVAS_DEFAULT_HTML_OPTIONS

Install as a gem in rails 2.3.x

I'm using bundler in rails 2.3.14 but lazy_high_charts doesn't seem to work fine using it as a gem

Problems adding series using hash

I've been unable to add a series using the hash method, as in the README example:
f.series(:name=>'John', :data=>[3, 20, 3, 5, 4, 10, 12 ,3, 5,6,7,7,80,9,9])

I get an ArgumentError:
ArgumentError (wrong number of arguments (1 for 2)):
app/controllers/weather_controller.rb:35:in series' app/controllers/weather_controller.rb:35:inview'
app/controllers/weather_controller.rb:20:in new' app/controllers/weather_controller.rb:20:inview'

However, if I pass without hash, as in:
f.series('John', [3, 20, 3, 5, 4, 10, 12 ,3, 5,6,7,7,80,9,9])

..the argument error is gone. My issue is that I can't configure the series individually with this method.

Can't use datetime attributes

I'm trying to pass through date time values like in the highcharts example, http://www.highcharts.com/demo/?example=line-time-series&theme=default

This is my code,
f.series(:name=> 'Leads', :fillOpacity => '.3', :pointInterval => 24 * 3600 * 1000, :pointStart => "Date.UTC(2006, 0, 01)", :data => (@start_date..@end_date).inject([]) { |leads, date| leads << @managed_campaigns.sum { |campaign| campaign.number_of_total_leads_between(date, date) } })

the point start and point interval values get passed through as strings and it is breaking my graph. How do I solve this?

showLoading() and hideLoading()

Great job on this gem!

Currently, I have no idea how to call the showLoading() function since the "chart" variable is defined inside the gem itself.
http://www.highcharts.com/ref/#chart-object

I have no clue how to invoke the showLoading() function in my application.js. Any undocumented features regarding this? :)

Any thoughts are appreciated.
Thanks!

colors

How are colors done?

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

stacked bar not working

i took the example from the wiki page and dont get a stacked bar. just 2 bars next each other

anyone help?

Trouble with New Javascript File

After I did 'rails g lazy_high_charts:install', and replaced my existing javascript, it seems to break how my existing graphs look. Also, it adds HighStock beta to them at the bottom right.

I'm okay with it if it works fine with the plugin as I'm hoping to replace all the existing graphs.

Can you take a look and make sure the js file is fine? Currently I'm using the old highcharts.js from their site.

PS: Sorry for creating so many issues!

rangeSelector don't work

Trying use "rangeSelector" like in spec file:

@h = LazyHighCharts::HighChart.new('graph', :style => "height:300px;width:600px;") do |f|
  f.title(:text => "Network rate")
  f.options[:rangeSelector] = {:selected=>1};
  f.series(:name=>'Network rate', :data=> @result, :fillOpacity => '.3', :pointStart => 1309737600000, :pointInterval => 1000)
end

Don't work for me :(

Pointer option doesn't work

In the example of click in the wiki puts the cursor to pointer, but for me doesn't work, always set the normal icon.

please consider removing the default width

The default width is limiting. By default the width is calculated from the offset width of the containing element when no width is indicated. Have the fluid width is helpful when building responsive design sites.

I'd like to see future versions of lazy high charts remove the default width from the lib/lazy_high_charts/high_chart.rb file

Awesome gem otherwise though! great work!!!

Multiple Y-Axis

I can't figure out how to make two different y-axis. This is important if I have related data but the numbers have a magnitude of difference. Something like this http://highcharts.com/demo/?example=combo-multi-axes&theme=default would be very beneficial.

Ruby Date in Series not Displaying Properly

When passing dates in a series they are not displaying correctly. Is there something I am missing here or does this wrapper around HighCharts not handle dates within a series? I use a lot of dates as the first value within my data pairs in my series and this is something I really need assistance with.

Example of functioning chart (hand made): http://jsfiddle.net/schleichermann/SpQQC/#base

Example chart generated by the following ruby code: http://jsfiddle.net/schleichermann/6vzaF/#base

@h = LazyHighCharts::HighChart.new('graph') do |f|
f.title(:text => 'SuperChart')
f.chart({:defaultSeriesType=>"spline", :inverted => false})
f.xAxis(:type => 'datetime', :tickInterval => 86400000, :dateTimeLabelFormats => {:month => '%e. %b', :day => '%b %e', :hour => '%b %e', :year => '%b'})
f.series(:name=>'John', :data=>[[Date.new(2011, 5, 1), 180], [Date.new(2011, 5, 2), 185], [Date.new(2011, 5, 3), 182], [Date.new(2011, 5, 4), 187], [Date.new(2011, 5, 5), 192]])
f.series(:name => "mental", :data => [[Date.new(2011, 5, 1), 172], [Date.new(2011, 5, 2), 170], [Date.new(2011, 5, 3), 176], [Date.new(2011, 5, 4), 182], [Date.new(2011, 5, 5), 200]])
f.series(:name => "social", :data => [[Date.new(2011, 5, 1), 150], [Date.new(2011, 5, 2), 155], [Date.new(2011, 5, 3), 160], [Date.new(2011, 5, 4), 156], [Date.new(2011, 5, 5), 172]])
f.series(:name => "spiritual", :data => [[Date.new(2011, 5, 1), 160], [Date.new(2011, 5, 2), 157], [Date.new(2011, 5, 3), 165], [Date.new(2011, 5, 4), 155], [Date.new(2011, 5, 5), 170]])
end

how to add events on chart?

hi michelson,

I want to add a mouseOver event on serie's point ,but after I add
<%= "options.plotOptions.series.point.events.mouseOver = function() {alert('hi');}".html_safe %>
on my view file,the chart can not dispaly!

how should I add event on chart?

thank you

You have a nil object when you didn't expect it! error when trying to load

I'm getting this error when I install the latest high charts version:

/Work/projectrev/vendor/plugins/lazy_high_charts/lib/lazy_high_charts/railtie.rb:10:in block in <class:Railtie>': You have a nil object when you didn't expect it! (NoMethodError) You might have expected an instance of Array. The error occurred while evaluating nil.[]= from /Users/radu/.rvm/gems/ruby-1.9.2-p290/gems/activesupport-3.1.3/lib/active_support/lazy_load_hooks.rb:34:incall'
from /Users/radu/.rvm/gems/ruby-1.9.2-p290/gems/activesupport-3.1.3/lib/active_support/lazy_load_hooks.rb:34:in execute_hook' from /Users/radu/.rvm/gems/ruby-1.9.2-p290/gems/activesupport-3.1.3/lib/active_support/lazy_load_hooks.rb:26:inon_load'
from /Users/radu/.rvm/gems/ruby-1.9.2-p290/gems/railties-3.1.3/lib/rails/railtie/configuration.rb:36:in before_configuration' from /Users/radu/Work/projectrev/vendor/plugins/lazy_high_charts/lib/lazy_high_charts/railtie.rb:9:inclass:Railtie'
from /Users/radu/Work/projectrev/vendor/plugins/lazy_high_charts/lib/lazy_high_charts/railtie.rb:8:in <module:LazyHighCharts>' from /Users/radu/Work/projectrev/vendor/plugins/lazy_high_charts/lib/lazy_high_charts/railtie.rb:6:in<top (required)>'
from /Users/radu/.rvm/gems/ruby-1.9.2-p290/gems/activesupport-3.1.3/lib/active_support/dependencies.rb:240:in require' from /Users/radu/.rvm/gems/ruby-1.9.2-p290/gems/activesupport-3.1.3/lib/active_support/dependencies.rb:240:inblock in require'
from /Users/radu/.rvm/gems/ruby-1.9.2-p290/gems/activesupport-3.1.3/lib/active_support/dependencies.rb:223:in block in load_dependency' from /Users/radu/.rvm/gems/ruby-1.9.2-p290/gems/activesupport-3.1.3/lib/active_support/dependencies.rb:640:innew_constants_in'
from /Users/radu/.rvm/gems/ruby-1.9.2-p290/gems/activesupport-3.1.3/lib/active_support/dependencies.rb:223:in load_dependency' from /Users/radu/.rvm/gems/ruby-1.9.2-p290/gems/activesupport-3.1.3/lib/active_support/dependencies.rb:240:inrequire'
from /Users/radu/Work/projectrev/vendor/plugins/lazy_high_charts/lib/lazy_high_charts.rb:3:in <top (required)>' from /Users/radu/.rvm/gems/ruby-1.9.2-p290/gems/activesupport-3.1.3/lib/active_support/dependencies.rb:240:inrequire'
from /Users/radu/.rvm/gems/ruby-1.9.2-p290/gems/activesupport-3.1.3/lib/active_support/dependencies.rb:240:in block in require' from /Users/radu/.rvm/gems/ruby-1.9.2-p290/gems/activesupport-3.1.3/lib/active_support/dependencies.rb:223:inblock in load_dependency'
from /Users/radu/.rvm/gems/ruby-1.9.2-p290/gems/activesupport-3.1.3/lib/active_support/dependencies.rb:640:in new_constants_in' from /Users/radu/.rvm/gems/ruby-1.9.2-p290/gems/activesupport-3.1.3/lib/active_support/dependencies.rb:223:inload_dependency'
from /Users/radu/.rvm/gems/ruby-1.9.2-p290/gems/activesupport-3.1.3/lib/active_support/dependencies.rb:240:in require' from /Users/radu/Work/projectrev/vendor/plugins/lazy_high_charts/init.rb:2:inblock in class:Plugin'
from /Users/radu/.rvm/gems/ruby-1.9.2-p290/gems/railties-3.1.3/lib/rails/plugin.rb:81:in eval' from /Users/radu/.rvm/gems/ruby-1.9.2-p290/gems/railties-3.1.3/lib/rails/plugin.rb:81:inblock in class:Plugin'
from /Users/radu/.rvm/gems/ruby-1.9.2-p290/gems/railties-3.1.3/lib/rails/initializable.rb:30:in instance_exec' from /Users/radu/.rvm/gems/ruby-1.9.2-p290/gems/railties-3.1.3/lib/rails/initializable.rb:30:inrun'
from /Users/radu/.rvm/gems/ruby-1.9.2-p290/gems/railties-3.1.3/lib/rails/initializable.rb:55:in block in run_initializers' from /Users/radu/.rvm/gems/ruby-1.9.2-p290/gems/railties-3.1.3/lib/rails/initializable.rb:54:ineach'
from /Users/radu/.rvm/gems/ruby-1.9.2-p290/gems/railties-3.1.3/lib/rails/initializable.rb:54:in run_initializers' from /Users/radu/.rvm/gems/ruby-1.9.2-p290/gems/railties-3.1.3/lib/rails/application.rb:96:ininitialize!'
from /Users/radu/.rvm/gems/ruby-1.9.2-p290/gems/railties-3.1.3/lib/rails/railtie/configurable.rb:30:in method_missing' from /Users/radu/Work/projectrev/config/environment.rb:5:in<top (required)>'
from /Users/radu/.rvm/gems/ruby-1.9.2-p290/gems/activesupport-3.1.3/lib/active_support/dependencies.rb:240:in require' from /Users/radu/.rvm/gems/ruby-1.9.2-p290/gems/activesupport-3.1.3/lib/active_support/dependencies.rb:240:inblock in require'
from /Users/radu/.rvm/gems/ruby-1.9.2-p290/gems/activesupport-3.1.3/lib/active_support/dependencies.rb:223:in block in load_dependency' from /Users/radu/.rvm/gems/ruby-1.9.2-p290/gems/activesupport-3.1.3/lib/active_support/dependencies.rb:640:innew_constants_in'
from /Users/radu/.rvm/gems/ruby-1.9.2-p290/gems/activesupport-3.1.3/lib/active_support/dependencies.rb:223:in load_dependency' from /Users/radu/.rvm/gems/ruby-1.9.2-p290/gems/activesupport-3.1.3/lib/active_support/dependencies.rb:240:inrequire'
from /Users/radu/Work/projectrev/config.ru:4:in block in <main>' from /Users/radu/.rvm/gems/ruby-1.9.2-p290/gems/rack-1.3.5/lib/rack/builder.rb:51:ininstance_eval'
from /Users/radu/.rvm/gems/ruby-1.9.2-p290/gems/rack-1.3.5/lib/rack/builder.rb:51:in initialize' from /Users/radu/Work/projectrev/config.ru:1:innew'
from /Users/radu/Work/projectrev/config.ru:1:in <main>' from /Users/radu/.rvm/gems/ruby-1.9.2-p290/gems/rack-1.3.5/lib/rack/builder.rb:40:ineval'
from /Users/radu/.rvm/gems/ruby-1.9.2-p290/gems/rack-1.3.5/lib/rack/builder.rb:40:in parse_file' from /Users/radu/.rvm/gems/ruby-1.9.2-p290/gems/rack-1.3.5/lib/rack/server.rb:200:inapp'
from /Users/radu/.rvm/gems/ruby-1.9.2-p290/gems/railties-3.1.3/lib/rails/commands/server.rb:46:in app' from /Users/radu/.rvm/gems/ruby-1.9.2-p290/gems/rack-1.3.5/lib/rack/server.rb:301:inwrapped_app'
from /Users/radu/.rvm/gems/ruby-1.9.2-p290/gems/rack-1.3.5/lib/rack/server.rb:252:in start' from /Users/radu/.rvm/gems/ruby-1.9.2-p290/gems/railties-3.1.3/lib/rails/commands/server.rb:70:instart'
from /Users/radu/.rvm/gems/ruby-1.9.2-p290/gems/railties-3.1.3/lib/rails/commands.rb:54:in block in <top (required)>' from /Users/radu/.rvm/gems/ruby-1.9.2-p290/gems/railties-3.1.3/lib/rails/commands.rb:49:intap'
from /Users/radu/.rvm/gems/ruby-1.9.2-p290/gems/railties-3.1.3/lib/rails/commands.rb:49:in <top (required)>' from script/rails:6:inrequire'
from script/rails:6:in `

'

Creating a pie-donut does not work

I am trying to create a pie-donut (http://highcharts.com/demo/pie-donut) but my code does not seem to work.

Can you please help me?

@h = LazyHighCharts::HighChart.new('graph') do |f|
  f.chart({:defaultSeriesType=>"pie", :margin=> [50, 0, 0, 0]})
  f.title({:text => "test"})
  f.subtitle({:text => "Inner circle: Your Permissions, Outer circle: Your Friend Permission"})
  series = [{
     :type => "pie",
     :name => "2008",
     :size => "45%",
     :innerSize => "20%",
     :data => [
        { :name => "Firefox", :y => 44.2, :color => "#4572A7" },
        { :name => "IE", :y => 46.6, :color => "#AA4643" },
        { :name => "Chrome", :y => 3.1, :color => "#89A54E" },
        { :name => "Safari", :y => 2.7, :color => "#80699B" },
        { :name => "Opera", :y => 2.3, :color => "#3D96AE" },
        { :name => "Mozilla", :y => 0.4, :color => "#DB843D" }
     ],
     :dataLabels=> {
        :enabled => false
     }
  }, {
     :type=> "pie",
     :name => "2010",
     :innerSize => "45%",
     :data => [
        { :name => "Firefox", :y => 45.0, :color => "#4572A7" },
        { :name => "IE", :y => 26.8, :color => "#AA4643" },
        { :name => "Chrome", :y => 12.8, :color => "#89A54E" },
        { :name => "Safari", :y => 8.5, :color => "#80699B" },
        { :name => "Opera", :y => 6.2, :color => "#3D96AE" },
        { :name => "Mozilla", :y => 0.2, :color => "#DB843D" }
     ],
     :dataLabels => {
        :enabled => true
     }
  }]
  f.series(series)
end

I get the following error:

TypeError (can't convert Symbol into Integer):

Populate Table w/ Multiple Charts - Tooltips don't work

Hi,

I first recognize this is not a code bug. I'm new to github and looking for assistance here; usually at rails or ruby forum. So please, if this is the inappropriate place to post this, please direct me to the appropriate.

I've posted on Rails Forum and done a number of Google searches but have not found a solution to my problem. I am populating a table with multiple charts. Each chart has three data series and represents bandwidth consumption for a give IP. My main problem is that the Tooltips don't work.. while the Legend does work and you can show/hide a data set. I'm happy to post separately my two other issues, (orphan

tag from high_charts() call and can't get y-axis title to print. BTW, this gem ROCKs! No really!

View

<% i = -1 %>
<% @ips.each do |ip| %>
<% i += 1 %>

<%= ip[:ip_addr] %>

<%= high_chart('chart_'+i.to_s, @charts[i]) %>

<% end %>

Controller

start = Time.local(2011,12,1).to_i * 1000
interval = 1.day * 1000

chart_data = [{
               name: 'Received',
               pointInterval: interval,
               pointStart: start,
               data: data[:received],
               zIndex: 3
                },{
                 name: 'Transmitted',
               pointInterval: interval,
               pointStart: start,
               data: data[:transmitted],
                 zIndex: 2
                },{
                 name: 'Total',
               pointInterval: interval,
               pointStart: start,
               data: data[:total],
                 zIndex: 1
                }]
chart = LazyHighCharts::HighChart.new('graph') do |f|      
  f.options[:chart][:type] = 'areaspline'
  f.options[:chart][:width] = '570'
  f.options[:chart][:height] = '275'
  f.options[:chart][:renderTo] = 'null'
  f.options[:chart][:backgroundcolor] = '#FFFFFF'
  f.options[:chart][:shadow] = true
  f.options[:credits][:enabled] = true
  f.options[:credits][:position] = { :align => 'right', :x => -10, :verticalAlign => 'bottom', :y => -10 }
  f.options[:title][:text] = 'Bandwidth Usage'
  f.options[:subtitle][:text] = 'In megabits'        
  f.options[:xAxis] = { :type => "datetime", :lineWidth => 1 }
  f.options[:xAxis][:linewidth] = 1
  f.options[:xYxis] = { :title => { :text => 'Bandwidth Consumed' } }
  f.options[:plotOptions][:series] = { :lineWidth => 1, :marker => { :radius => 4 } }
  f.data = chart_data  
  f.options[:navigation] = { :buttonOptions => { :align => 'right' }}
end
return chart

How can I convert that to be used with this gem?

Thanks for this wonderful plugin. I would like to convert this jquery code taken from http://highcharts.com/demo/pie-basic to gem code. I cannot understand which of the options should be in the controller and which in the view.

Can you please help me?

Thanks in advance.

plotOptions: {
     pie: {
        allowPointSelect: true,
        cursor: 'pointer',
        dataLabels: {
           enabled: true,
           color: Highcharts.theme.textColor || '#000000',
           connectorColor: Highcharts.theme.textColor || '#000000',
           formatter: function() {
              return '<b>'+ this.point.name +'</b>: '+ this.y +' %';
           }
        }
     }
  },

options.xAxis undefined

I'm trying to implement setExtremes event on x axis:
<%= high_stock("my_id", @h) do |c| %>
<%"options.xAxis.events.setExtremes = function(x){ alert('try');}"%>
<%end %>

I got an error : options.xaxis is undefined.
thanks.

Error in Default Container Styling

CANVAS_DEFAULT_HTML_OPTIONS = { :style => "height: 300px, width:615px" } in high_chart.rb is invalid CSS.

The comma needs to be replaced with a semi-colon to get the style to work correctly.

The correct line is: CANVAS_DEFAULT_HTML_OPTIONS = { :style => "height: 300px; width:615px" }

it don't show graph in Rails 3

Hi,
I use Rails 3, but plugin don't show map. What i am wrong? please recommend.
Thank you very much.
Sawangpong, Thailand

Multi series in live chart

I have the following code which displays one series but how to add more than one?
This will get a random point from remote script and update the graph every second.

f.options[:chart][:events] = {:load => %|function requestData(){$.ajax({url:'live-server-data.php',success:function(a){var c=chart.series[0],d=c.data.length>20;chart.series[0].addPoint(a,true,d);setTimeout(requestData,1e3)},cache:false});}

f.options[:chart][:events] = {:load => %|function requestData(){$.ajax({url:'live-server-data.php',success:function(a){var c=chart.series[1],d=c.data.length>20;chart.series[1].addPoint(a,true,d);setTimeout(requestData,1e3)},cache:false});}

Furthermore I have added two series

f.series(:name=>'test', :data=>[])
f.series(:name=>'test2', :data=>[])

Highstock v Highchart

I'm using 'lazy_high_charts', '~> 1.1.5' and by default it seems to throw in Highstocks into the highchart.js file. Now, that is fine even if a little weird, but I've noticed that tooltips do not work properly.

When using highstock the tooltip always hovers over the first point on the map, no matter which point you hover over, which is a massive problem for complicated data sets.

If I switch the javascript file to use the highcharts 2.1.6 src js then tooltips work fine, but if you have multiple series on the map then some do not show. I have to manually set a min and max on the Y axis for all my data to be displayed, and this is not something I should need to do.

Any suggestions?

It outputs this JS:

      <script type="text/javascript">
  jQuery(function() {
        // 1. Define JSON options
        var options = {
                      chart: {"defaultSeriesType":"line","renderTo":"my_id","height":600},
                              title: {"text":"Stuff I follow"},
                              legend: {"layout":"vertical","style":{}},
                              xAxis: {"title":{"text":"Time"},"type":"datetime"},
                              yAxis: {"title":{"text":"Stuff?"},"min":0,"max":3100},
                              tooltip:  {"enabled":true},
                              credits: {"enabled":false},
                              plotOptions: {"areaspline":{}},
                              series: [{"name":"real_ate: Followers","data":[[1318420879000,"92"],[1318420879000,"92"],[1318417285000,"92"],[1318417281000,"92"],[1318410078000,"92"],[1318410077000,"92"],[1318406478000,"92"],[1318406475000,"92"],[1318402877000,"92"],[1318402876000,"92"],[1318399276000,"92"],[1318399275000,"92"],[1318395689000,"92"],[1318395687000,"92"],[1318392083000,"92"],[1318392080000,"92"],[1318388480000,"92"],[1318384883000,"92"],[1318384878000,"92"],[1318381295000,"92"],[1318381285000,"92"],[1318377686000,"92"],[1318377686000,"92"],[1318374074000,"92"],[1318374073000,"92"],[1318370474000,"92"],[1318370473000,"92"],[1318366880000,"92"],[1318366874000,"92"],[1318363334000,"92"],[1318363333000,"92"]]},{"name":"philsturgeon: Followers","data":[[1318420879000,"2994"],[1318420872000,"2994"],[1318417285000,"2993"],[1318417275000,"2993"],[1318410078000,"2992"],[1318410074000,"2992"],[1318406478000,"2992"],[1318406471000,"2992"],[1318402880000,"2992"],[1318402874000,"2992"],[1318399276000,"2991"],[1318399270000,"2991"],[1318395690000,"2991"],[1318395682000,"2991"],[1318392083000,"2992"],[1318392077000,"2992"],[1318388479000,"2992"],[1318384883000,"2992"],[1318384872000,"2992"],[1318381296000,"2991"],[1318381273000,"2991"],[1318377690000,"2991"],[1318377675000,"2991"],[1318374074000,"2991"],[1318374071000,"2991"],[1318370474000,"2991"],[1318370472000,"2991"],[1318366880000,"2989"],[1318366872000,"2989"],[1318363335000,"2989"],[1318363331000,"2989"],[1318361578000,"2988"],[1318361082000,"2988"],[1318360983000,"2988"],[1318360871000,"2988"]]},{"name":"philsturgeon: dsfsd","data":[]},{"name":"Raphaelle: Followers","data":[]},{"name":"daveerasmus: Followers","data":[[1318420880000,"554"],[1318417285000,"555"]]},{"name":"davestone: Followers","data":[[1318420877000,"2511"],[1318417281000,"2511"],[1318410077000,"2511"],[1318406475000,"2511"],[1318402875000,"2511"],[1318399275000,"2511"],[1318395686000,"2511"],[1318392079000,"2511"],[1318388480000,"2511"],[1318384877000,"2511"],[1318381276000,"2512"],[1318377686000,"2511"],[1318374073000,"2511"],[1318370473000,"2511"],[1318366874000,"2511"],[1318363332000,"2511"],[1318361578000,"2511"],[1318361083000,"2511"]]},{"name":"pete: Followers","data":[[1318420879000,"22"],[1318417284000,"22"],[1318410077000,"22"],[1318406478000,"22"],[1318402876000,"22"],[1318399275000,"22"],[1318395688000,"22"],[1318392083000,"22"],[1318388482000,"22"],[1318384881000,"22"],[1318381285000,"22"],[1318377686000,"22"],[1318374074000,"22"],[1318370473000,"21"],[1318366877000,"21"],[1318363334000,"21"],[1318361579000,"21"]]}],
                              subtitle: {}
                      };

        // 2. Add callbacks (non-JSON compliant)

        // 3. Build the chart
          var chart = new Highcharts.Chart(options);
    });
    </script>

 <div id="my_id" style="height: 300px, width:615px"></div>

Anyway to remove onload ?

Hello @michelson

I load highcharts graph through a post request and graphs does'nt display because my window is already loaded.

Any option to remove onload function and immediatelly excecute HighCharts Javascript Code ?

Regards,

data

how do we put dynamic data into the options? Here is what I have but it fails:

@h = LazyHighCharts::HighChart.new('graph') do |f|
f.options[:chart][:defaultSeriesType] = "column"
f.series(:name=>'Current', :data=>[ @current])
end

Adding flags to highstocks

Hi,

Firstly thanks guys for this gem, has helped me a lot. I am trying to add flags to my chart like this demo chart (this is the jsfiddle to show how the data is arranged). The data part of my code gets rendered like this

h1 = LazyHighCharts::HighChart.new('graph') do |f|
....
f.series(:name=>'Consumption', :data => [[1333152000000, 1200], [1335744000000, 1140]] )
....
end

How can i pass the flag options array data into f.series
Thanks

Update for docs

Gentlemen,

Thanks so much for the gem! Its great work and I really appreciate it.

I am using 1.9.2 and 3.0.7, and I found that I have to render the tooltip formatter with the raw() method to get html tags to work:

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

It took some digging to figure it out, might be helpful for others in the future.

Thanks again!

Default options

If I don't set f.options[:x_axis][:categories], I always get "Monday to Sunday" at the bottom on the x axis. Is this the expected behavior?

Thanks!

How to best approach BigDecimal data series?

I'm dealing with data that ranges from around 10^-9 to about 10^-2 and am not sure exactly the right way to work with this in Ruby along with lazy_high_charts in that the numbers are all stored as BigDecimals.

Could you please provide an example of how it would be best to approach this? I am wondering if I should convert them over to another format, or if there's a way to just work with them in their current format.

Unable to create subtitle?

I've tried a variety of ways to pass a subtitle to my graph, but none of them display. Following your example, this code leads to an exception:

f.options[:subtitle][:text] = "This is a subtitle"

The following produces nothing:

f.subtitle({:text => "This is a subtitle"})

Any ideas? What is the proper way to pass a subtitle?

Adding extra tooltip info

Just doing a quick search to see how I would do it.

Any suggestions as I am looking at maybe having to not use the gem to do it.

Usage in layout

Hi!

After following the usage instructions, graphs were not displayed.

<%= javascript_include_tag :highcharts %>

instead of

<%= javascript_include_tag :high_charts %>

worked for me (Rails 3.2).

Chart line only renders after window resize

My issue seems in line with this one:

http://stackoverflow.com/questions/6924356/highcharts-jquery-rendering-problem-all-browsers

This just started happening. Potentially due to a rails minor release update, potentially due to Bundler updating the high charts package without me noticing.

Here is my code:

<%= high_chart("my_id", high_chart) do |c| %>
    options.tooltip.formatter = function() { 
        minutes = parseInt(this.y/1000/60);
        seconds = parseInt(this.y/1000 % 60).toString();

        if (seconds.length == 0) {
            seconds = '00';
        } else if (seconds.length == 1) {
            seconds = '0' + seconds;
        }

        return minutes + ':' + seconds + ' @ ' + this.x/1000/60/60 + ':00' ; }
<% end %>

Before the updates, it was this:

<%= high_chart("my_id", high_chart) do |c| %>
    <%= "options.tooltip.formatter = function() { 
        minutes = parseInt(this.y/1000/60);
        seconds = parseInt(this.y/1000 % 60).toString();

        if (seconds.length == 0) {
            seconds = '00';
        } else if (seconds.length == 1) {
            seconds = '0' + seconds;
        }

        return minutes + ':' + seconds + ' @ ' + this.x/1000/60/60 + ':00' ; }" %>
<% end %>

I was getting javascript errors related to the use of the ' character, so I had to change it.

I am currently using:

Rails 3.2.8
jQuery 1.8.0
lazy_high_charts 1.1.7

.js_code setting ignored

Hello,

I can't seem to get .js_code trick working to pass JS functions to highcharts.js.

Trying to debug I've added puts statements in the js_code and js_code? methods to find out that while the @_lazy_high_charts_js_code variable gets set properly, when js_code? check runs the variable is nil.

This is with MRI Ruby 1.9.3p194. Can it be some sort of incompatibility between Ruby versions?

Custom JS in the view/Formatter options broken

I can no longer do this with the newest code:

- high_chart("self_bar_chart", @self_bar_chart) do |chart|
  = "tooltip: { formatter: function() { return '' + this.x + ': ' + this.y + ' Points'; }} "

If I just use:

high_chart("self_bar_chart", @self_bar_chart) 

it works fine.

Live Charts

Following this guide for live charts I have added a function in my controller:

def live
    x = Time.now.to_i * 1000
    y = Random.rand(11)
    #create an array and echo to JSON
    ret =[x,y]
    x=ActiveSupport::JSON
    @j=x.encode(ret)
    render :json => @j
  end

Next I have a new JS file called live_update.js where I pasted steps 2. and 3. containing 'requestData()'

I made the callback from the view:

 = high_chart("my_id", @h) do |c|
        requestData();

NOTE: I wasn't able to call f.options[:chart][:events][:load] = 'requestData'

When I run it, I get an error: chart is not defined

This is what I see in the browser Source View:

 <script type="text/javascript">
            jQuery(function() {
                  // 1. Define JSON options
                  var options = {
                                chart: {"defaultSeriesType":"column","renderTo":"my_id","zoomType":"xy"},
                                        title: {"text":"Test"},
                                        legend: {"layout":"horizontal","style":{}},
                                        xAxis: {"type":"datetime"},
                                        yAxis: {"title":{"text":"Agents"},"labels":{},"min":"0","allowDecimals":false,"gridLineDashStyle":"LongDash"},
                                        tooltip:  {"enabled":true},
                                        credits: {"enabled":false},
                                        plotOptions: {"areaspline":{}},
                                        series: [{"name":"test","data":[]}],
                                        subtitle: {}
                                };

                  // 2. Add callbacks (non-JSON compliant)                
                  requestData();


                  // 3. Build the chart
                    var chart = new Highcharts.Chart(options);
              });
              </script>

Allow user to return :ajax result if necessary

Allow the user to pass an html_options flag, in order to get a result without the "script" and "div" already created.

For example:
chart = LazyHighCharts::HighChart.new('bar', :ajax_enabled => true)

will return:

(function() {        var options, chart;
         options = { "title": { "text": "" } };

         chart = new Highcharts.Chart(options);
})()

Clickable bar chart example doesn't work

I get an error undefined method []=' for nil:NilClass`

on this line:

f.options[:plot_options][:column] = {:stacking=>'normal', 
              :cursor => 'pointer',
              :point => {:events => {:click => "function() {alert ('Chart loaded');"}}
           }  

Untitled

Change the pie chart color

I want to change the pie chart colors

I don;t know how to do that

This is my method controller

def set_pie_chart(data)
fixed_data = []
data.each_pair do |key, value|
fixed_data << [key.name, value]
end

  @color = data.keys.map {|e| "#" + e.colour }  # e.colour is like '333333'
  @chart = LazyHighCharts::HighChart.new('pie') do |c|
    c.chart({:defaultSeriesType=>"pie" , :margin=> [0, 0, 0, 0]})
    series = {
      type: 'pie',
      name: 'total expenses',
      data: fixed_data,
      colors: ['green','red'] # intent
    }
    c.series(series)
    c.colors = ['red','blue','black'] # intent
    c.options[:colors] = ['green','blue','yellow'] # intent
    c.options['colors'] = ['red','blue','yellow'] # intent
    c.options[:title][:text] = nil
    c.plot_options(:pie=>{
      cursor: "pointer",
      center: ['50%','37%'],
      color: 'red', #intent
      dataLabels: { enabled: false }
    })
  end
end

this method doesn't leave any error, what is the correct way or its not possible with this gem?

javascript in assets.

For rails 3.1 and later

Maybe put the js file in vendor folder instead of a generator to copy js files to rails app?
Like jquery-rails and other gems does?

And if you insist to use a generator,

https://github.com/michelson/lazy_high_charts/blob/master/lib/generators/lazy_high_charts/install/install_generator.rb#L8

I suggest copy files to vendor folder:

get 'http://highcharts.com/js/highstock.js', 'vendor/assets/javascripts/highcharts.js'

😄