Menu
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 .
461
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: "%" %>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
