In my ROR I want to add Percentages to my Piechart, I'm using the chartkick gem to render the Pie chart. I've tried various approaches to the problem, but none seems to work. I've also googled around and look at similar posts at stack overflow.
This is what I've come up with but it's not showing the %.
<%= pie_chart [["Soccer", #soccer_total], ["Basketball", #basketball_total, ["Baseball", #baseball_total], ["Other", #other_total ]], library: {legend: {labelFormat: '{name} : {y} ({percentage}%)'}} %>
I've also tried this approach, but still with out a luck
<%= pie_chart [["Soccer", #soccer_total], ["Basketball", #basketball_total, ["Baseball", #baseball_total], ["Other", #other_total ]], library: {pieSliceText: 'value-and-percentage'} %>
Please can someone more experienced help me with this?
UPADATE FOR OSCAR'S ANSWER
I followed the directions provided for Oscar's answer but its still not showing %.
This how the <head>in application.html.erb looks:
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true %>
<%= javascript_include_tag "https://www.gstatic.com/charts/loader.js" %>
<%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
<%= javascript_include_tag "path/to/highcharts.js", "chartkick" %>
and the appplication.js is like this:
//
//= require jquery
//= require jquery_ujs
//= require bootstrap-sprockets
//= require turbolinks
//= require_tree .
I had a similar problem working with this. So Chart.bundle doesn't provide that options for pie chart
Instead of that you can use Google Charts as specified at documentation here
So what you have to do is remove //= require Chart.bundle from application.js
Go to application.html.erb or the layout that you are using for showing your view and before <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %> or something similar that you have for loading js libs add <%= javascript_include_tag "https://www.gstatic.com/charts/loader.js" %>. It will look like this:
<%= javascript_include_tag "https://www.gstatic.com/charts/loader.js" %>
<%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
And there is!. Also I noticed that you are missing a "]" at your code. Fixing that you can run the chart with this:
<%= pie_chart [["Soccer", #soccer_total], ["Basketball", #basketball_total], ["Baseball", #baseball_total], ["Other", #other_total ]] %>
You should be able to see the percentages without adding any options
If you want customize the chart options then you can see the documentation here
EDIT: You application.js should look like this
//= require jquery
//= require jquery_ujs
//= require chartkick
//= require bootstrap-sprockets
//= require turbolinks
//= require_tree .
And your application.html.erb or the layout that you are using at your controller like this(delete that highcharts.js include_tag at the end you don't need it):
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true %>
<%= javascript_include_tag "https://www.gstatic.com/charts/loader.js" %>
<%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
hey You can find Something better here
As per my opinion, you can try this code.
Instead of this
<%= pie_chart [["Soccer", #soccer_total], ["Basketball", #basketball_total, ["Baseball", #baseball_total], ["Other", #other_total ]], library: {pieSliceText: 'value-and-percentage'} %>
You can Try This
<%= pie_chart [["Soccer", #soccer_total], ["Basketball", #basketball_total, ["Baseball", #baseball_total], ["Other", #other_total ]], library: {pieSliceText: 'value'} %>
Hey you can puth below code in your header.
<script> https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.0/Chart.bundle.js</script>
<script> https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.0/Chart.bundle.min.js</script>
<script> https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.0/Chart.js</script>
<script> https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.0/Chart.min.js</script>
I made it by doing this
1) I configured my Chartkick to use Highcharts, as described in https://github.com/ankane/chartkick.
2) I used the following library options with my pie chart:
library: {plotOptions: {pie: {dataLabels: {format: "<b>{point.name}</b>: {point.y} ({point.percentage:.1f}%)"}}}}
ChartKick now supports the feature.
You can use
<%= pie_chart data, suffix: "%" %>
When I enabled the turbolinks in my rails app, some of the content layout been affected and not aligned properly. But if I refresh the page then the content is aligned properly.
After adding turbolinks,
remove below Two link in views/applicatios.html.erb
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true %>
<%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
it works for me..
I'm starting in de Ruby on Rails world (I'm the noobest noob), as far as I know, when I put .css and .js into the app/assets/stylesheets folder and javascripts folder, respectively, it should automatic load those files. But it just doesn't.
I've found this code line
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true %>
But it just renders the application.css into the HTML code.
Is there some setting I'm missing?
Ruby -v: 2.2.4p230 (2015-12-16 revision 53155) [i386-mingw32]
Rails -v: 4.2.6
stylesheet and javascript folders are different asset types, so you should declare separately.
this is my application.html.erg layout.
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true %>
<%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
Well, the problem wasn't Ruby, wasn't Rails... Wasn't even me (I think). The problem was Windows. I did exactly the same in the Mint partition and everything worked. Thanks you, guys!
I have added the bootstrap-sass gem and have installed the bundle. I have gone to github and think I have followed the directions correctly to finish the install for ruby on rails. It doesn't appear to be making a difference however on my local site - no font/formatting changes have been made, even after the install.
I am using a PC, https://github.com/findingtheway/pin
Change your app/views/layouts/application.html.erb to this:
<head>
<title>Pin</title>
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true %>
<%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
<%= csrf_meta_tags %>
</head>
Rails uses application by default you have default which is why bootstrap is not loading.
I've been doing a project using the foundation-rails gem and now that I've got to a part where I need to use its javascript - a reveal modal, it doesn't seem to be working, I can't get any of the foundation javascript features to work and have tried for hours to no avail.
app/javascripts/application.js
//= require jquery
//= require jquery_ujs
//= require foundation.min
//= require modernizr.custom.72741
//= require fastclick
//= require foundation.reveal
//= require_tree .
$(document).foundation();
relevant parts of application.html.haml
%head
%meta{charset:"utf-8"}
%meta{name:"viewport", content:"width=device-width, initial-scale=1.0"}
%title Instaharam
= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true
= javascript_include_tag "vendor/modernizr"
= csrf_meta_tags
%link{href:"http://fonts.googleapis.com/css?family=Dancing+Script", rel:"stylesheet", type:"text/css"}
%body
...
= javascript_include_tag 'application'
mark-up to display the modal
%li= link_to "Add a post", '#', :'data-reveal-id' => 'add-post-modal'
#add-post-modal.reveal-modal
- #new_post = Post.new
= form_for #new_post, data: {abide: true}, :html => {:multipart => true } do |f|
= f.label :image
= f.file_field :image, required: true
= f.label :caption
= f.text_field :caption
= f.submit name: "Create Post"
%a.close-reveal-modal& ×
When I click the link it simply takes me to the top of the page.