Exporting a chart as image using lazy-highcharts gem - ruby-on-rails

I am able to generate the charts using lazy highcharts but i want those charts to exported as images , here is my code which I am using to generate the charts
#fields= ReportHistory.all_history
#h = LazyHighCharts::HighChart.new('graph') do |f|
f.chart(:renderTo => 'container', :zoomType => 'x',:spacingRight=> 20)
f.title(:text => 'Reports')
f.xAxis(:title=>{:text => 'Days'}, :categories =>#fields.map{|x|x.Date}.last(limit=15))
f.yAxis(:title=>{:text=> 'Jobs_count', :type =>'integer' ,:max => 5000000})
f.series(:name =>'jobs_count', :data=> #fields.map{|x| x.jobs_count.to_i }.last(limit=15))
f.export(:type=> 'image/jpeg')
end
and in my view I to show the chart I have this
<%= high_chart("my_id", #h) %>
I want to have the effect like here where I can download the chart image using the export button.

First, you need to ensure that the export module is available and loaded by your view:
<%= javascript_include_tag "vendor/highcharts/highcharts.js" %>
<%= javascript_include_tag "vendor/highcharts/modules/exporting.js" %>
Second... there's nothing to do. As soon as the exporting modul is loaded, it will add the menu to export your graph.
Notes:
You may need to adapt the paths depending on your setup.
The exporting.js is part of the package you download from Highcharts.

You can add/update the following in your application.js
//= require highcharts/highcharts
//= require highcharts/highcharts-more
//= require highcharts/modules/no-data-to-display
//= require highcharts/modules/exporting
If you want also updated vendor assets of highcharts, you can run:
rake highcharts:update

Related

Rails bootstrap select2 is not loading properly

$(document).ready(function(){
$( 'select' ).select2();
});
When entering the dropdown,it shows two different boxes as one shows dropdown field and another one shows select 2 text suggestions.I have searched a lot.but could
.form-group
%label.cols-sm-2.control-label{:for => "company_type"}
.cols-sm-10
.input-group
%span.input-group-addon
%i.fa.fa-user.fa{"aria-hidden" => "true"}
= p.select(:company_type, User::COMPANY,{}, {:class => "form-control ",prompt: "Select Your Business"})
'nt find the exact solution.
require select2 in application.js and application.css
*= require select2 (application.css)
//= require select2 (application.js)

401 Unauthorized error when uploading an image to Cloudinary

I'm using ruby (2.0.0), rails (3.2.17), cloudinary (1.0.70), and jquery-rails (3.1.0). I'm getting this error only when the image upload tag is nested multiple levels deep. If it's only one level deep, I'm able to upload properly. The file upload that is generated is (cloudname, signature, and api key replaced with "xxxx" for StackOverflow):
<input
type="file"
name="file"
data-url="https://api.cloudinary.com/v1_1/xxxxxxxxx/auto/upload"
data-form-data="{"timestamp":1399504570,"callback":"http://localhost:8080/cloudinary_cors.html","signature":"xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx","api_key":"xxxxxxxxxxxxxxx"}"
data-cloudinary-field="page[figures_attributes][1399504574259][images_attributes][0][asset]"
class="cloudinary-fileupload
">
Which, from what I have read seems to be correct, however I am still getting {"error":{"message":"Invalid cloud_name undefined"}} when I try a direct upload.
EDIT:
The URL that it hits when attempting to upload is https://api.cloudinary.com/v1_1/undefined/upload. This makes me wonder why the URL from the data-url attribute in the input is not being used and how this URL is generated.
I'm generating the file upload tag like this:
= f.cl_image_upload :asset
My application.js looks like this:
// WARNING: THE FIRST BLANK LINE MARKS THE END OF WHAT'S TO BE PROCESSED, ANY BLANK LINE SHOULD
// GO AFTER THE REQUIRES BELOW.
//
//= require jquery
//= require jquery_ujs
//= require ckeditor/init
//= require cloudinary
//= require_tree ../../../vendor/assets/javascripts/.
//= require_tree .
Please let me know if you need any other information. Thanks!
The problem was that I wasn't including the cloudinary_js_config script anywhere. So I just added it to the top of the form like so:
= form_for #page, :html => { :multipart => true } do |f|
= cloudinary_js_config

cloudinary-direct upload from browser not uploading

When I try to upload a file directly to Cloudinary nothing happens. The file name in the selected file field is deleted and no file is added to my Cloudinary accounts' Media Library.
This is my index.html.erb file
<%= cloudinary_js_config %>
<%= form_tag(cardset_cards_path(#cardset, #card), :method => :post) do %>
<%= cl_image_upload_tag(:image_id) %>
<%= submit_tag 'Submit' %>
<% end %>
My application.js file
// WARNING: THE FIRST BLANK LINE MARKS THE END OF WHAT'S TO BE PROCESSED, ANY BLANK LINE SHOULD
// GO AFTER THE REQUIRES BELOW.
//
//= require jquery
//= require jquery_ujs
//= require_tree .
//= require cloudinary
I do have the downloaded cloudinary.yml file with api_key and api_secret...
I'm using Rails 4, I haven't set my config.assets.enabled = false, so I belive I am using Asset Pipeline by default.
I believe I'm following the example in Cloudinary, but my Cloudinary Account Media Library doesn't show any file uploaded. I've tried adding :html => {:multipart => true}, but the same things happens nothing. I've tried different things in the controller to get the returned id, but since nothing is happening, I think I'd just be happy to get a file into my Cloudinary Media Library.
-hoping to rise from the dirt to the Clouds

gmap4rails in ActiveAdmin: maps does not appear

In try to use gmaps4rails in my ActiveAdmin / Rails app. To do so, I have added the following in my Gemfile:
gem 'gmaps4rails'
and ran a "bundle". I updated the 'show' method in app/admin/device.rb file with:
show do
attributes_table do
row :name
end
# Get device location
#markers = Location.all.to_gmaps4rails
div do
render "map"
end
end
In the app/views/admin/devices/_map.html.erb I have the following code:
<%= stylesheet_link_tag 'gmaps4rails' %>
<%= gmaps4rails(#markers) %>
<%= yield :scripts %>
In app/assets/javascripts/application.js:
//= require gmaps4rails/gmaps4rails.googlemaps
//= require gmaps4rails/gmaps4rails.base
//= require jquery
//= require jquery_ujs
//= require_tree .
And in my app/models/location.rb:
class Location < ActiveRecord::Base
acts_as_gmappable
attr_accessible :latitude, :longitude
def gmaps4rails_address
"#{self.latitude}, #{self.longitude}"
end
def location
[:latitude, :longitude]
end
end
When I go on the show page of a device, the map does not shows up (all blank). Is there any configuration I missed ?
UPDATE
I have checked with chrome developer tools and noticed the following error:
Uncaught SyntaxError: Unexpected token ;
that make reference to the line:
Gmaps.map.markers = ;
Fix with the following:
div do
markers = Location.all.to_gmaps4rails
render "map", { :markers => markers }
end
and :
<%= stylesheet_link_tag 'gmaps4rails' %>
<%= gmaps({
"map_options" => { "zoom" => 2, "auto_adjust" => false},
"markers" => { "data" => markers }
})
%>
<%= yield :scripts %>
You have to load the Javascript files in the /config/initializers/active_admin.rb; search for the section:
# To load a javascript file:
# config.register_javascript 'my_javascript.js'
Also, I think you should add the CSS files (if is not appearing) into the same file.
Remember that ActiveAdmin manages its own Javascript file, named active_admin.js; you can try loading the Javascript files in this JS; some time ago I had a similar problem and I only was able to solve it adding the files in the initializer.

Autocomplete Rails it is not working

What did I do wrong in this tutorial: https://github.com/grosser/simple_auto_complete
Here are my scripts by the way:
First I put this in my users_controller.rb
autocomplete_for :user, :username, :limit => 15, :order => 'created_at DESC'
In my routes.rb
namespace :profile do
resources :users, :only => [:index] do
collection do
post "search"
get "autocomplete_for_user_name"
end
end
In my application.js
//= require jquery
//= require jquery_ujs
//= require_tree .
//= require jquery.autocomplete.js
//= require jquery.js
jQuery(function($){//on document ready
//autocomplete
$('input.autocomplete').each(function(){
var input = $(this);
input.autocomplete(input.attr('data-autocomplete-url'),{
matchContains:1,//also match inside of strings when caching
// mustMatch:1,//allow only values from the list
// selectFirst:1,//select the first item on tab/enter
removeInitialValue:0//when first applying $.autocomplete
});
});
});
In my views (app/views/profile/messages/compose.html.haml)
%div#page-info
%span#title
Compose
%span#desc
Compose a new Message
= form_for :message, :url => send_message_profile_messages_path do |message|
%label{:for => "friend"} To:
%br
=message.text_field :auto_user_name , :class => 'autocomplete', 'data-autocomplete-url'=> autocomplete_for_user_name_profile_users_path
%script{:type => "text/javascript"}jQuery(function($){//on document ready $('input.autocomplete').each(function(){var $input = $(this);$input.autocomplete($input.attr('data-autocomplete-url'));});});
//= collection_select(:message, :friend_id, #friends, :id, :username)
%br
%label{:for => "message"} Body:
%br
= message.text_area :message
%br
= message.file_field :attachment
%br
= submit_tag "Send", :confirm => "Are you sure?"
I am trying to autocomplete the users using their username (s)
Note: I had also installed the gem and I think there's no problem about that.
What am i doing wrong?
In view
remove the comment //on document ready from script, as it is all in single line I think it is commenting the whole line including js code.
or use alternate formatting
:javascript
//on document ready
jQuery(function($){
$('input.autocomplete').each(function(){
var $input = $(this);
$input.autocomplete($input.attr('data-autocomplete-url'));
});
});
add //= require_self to application file for adding its own js code.
//= require jquery
//= require jquery_ujs
//= require_tree .
//= require jquery.autocomplete.js
//= require jquery.js
jQuery(function($){//on document ready
//autocomplete
$('input.autocomplete').each(function(){
var input = $(this);
input.autocomplete(input.attr('data-autocomplete-url'),{
matchContains:1,//also match inside of strings when caching
// mustMatch:1,//allow only values from the list
// selectFirst:1,//select the first item on tab/enter
removeInitialValue:0//when first applying $.autocomplete
});
});
});
Also try not to have white spaces between require.
rails warning in application.js says
// WARNING: THE FIRST BLANK LINE MARKS THE END OF WHAT'S TO BE PROCESSED, ANY BLANK LINE SHOULD
// GO AFTER THE REQUIRES BELOW.
I have been using this autocomplete it works great for me
https://github.com/crowdint/rails3-jquery-autocomplete

Resources