airblade / chartjs-ror Goto Github PK

I'm using turbolinks, and trying to render a partial via ajax and js.erb. The initChart method never gets called, so the chart never shows up.

I have in my .js.erb

$('#loading_top_links').html('');
<% if @top_links.to_a.any? %>
$('#top_links').html('<%= escape_javascript render(partial: 'links/top_link', collection: @top_links, as: :top_link) %>');
$('#top_links_chart').html('<%= escape_javascript render(partial: 'links/top_links_chart', locals: {chart_data: @chart_data}) %>');
initChart();
<% else %>
$('#top_links_wrapper').html('<div class="panel radius callout"><p>You do not have any clicks to display</p></div>');
<% end %>

As you can see i'm trying to call initChart after the chart partial gets rendered, but its not doing anything. I don't think the initChart is even being called.

Does anyone have a good solution to using this gem with turbolinks and ajax?

Hi

first of all thanks for this gem.

I think there is a small typo in the readme
https://github.com/airblade/chartjs-ror/blob/master/README.md#sample-output

it should be

var ctx = document.getElementById("chart-0");

instead of

var ctx = document.getElemenyById("chart-0");

Hi,

I've just encountered this error message on a brand new rails 4.2.4 project while running controller specs that render views:

ActionView::Template::Error:
       couldn't find file 'Chart' with type 'application/javascript'

It happens at the line that requires Char in my application.js

It apparently works fine in development mode and when I remove the Chart and excanvas requires from my application.js, and breaks when one or the other is set.

I'm trying to figure out what's going wrong, and I'll be sure to send a PR if I solve it.

The format of my data is as above however i am getting the error. Please help.

Thought I'd ask this here, as i heard about a Chart.scatter plugin that scales an x-axis but I then came here to the README, since I'm using the gem.

i got an error adding

<%= line_chart @data, {width: 1000, generateLegend: true, scaleSteps: 2} %>

and

<%= line_chart @data, {width: 1000, generateLegend: true, scaleOverride: true} %>

I'll dig more, but thought I'd ask this here.

1. Out of the box, does the x axis scale?
2. Is there a plugin architecture i'm unaware of to use if it doesn't? I.e., how easy is it to add chartjs plugins?

Good work and good gem.

I have used Chart JS with ROR (v3.3.1) and my labels are having 3-4 words each on X-axis. But, when the chart is created it always leaves a blank block at the beginning of the chart. If I change the label to one word or some digits, this issue is resolved.

this error appears when i add scaleOverride: true option ..

and if i remove the option, charts are being drawn ..

Hi,

could you update Chart.js to latest version 2.8.0?

Thanks!

I want to show the label for my line graph, thus I added an option to include the label name in my multiTooltipTemplate in my view that renders chartjs like so:

<%= chartjs_line_chart @data, {height: 150, bezierCurve: true, bezierCurveTension: 0, responsive: true, datasetFill: false, generateLegend: true, multiTooltipTemplate: "<%%= datasetLabel %> - <%%= value %>"} %>

but <%%= datasetLabel %> - <%%= value %> this line raised an error in my Rails app:

syntax error, unexpected '>'
/Users/user/Documents/workspace/railsapp/app/views/home/dashboard.html.erb:33: syntax error, unexpected '<', expecting ')'
            </div>
             ^

I've escaped the erb syntax by adding another %, but this doesn't work.

UPDATE on 4th September:

However, if I put the options in the controller without extra % it works.

  @options =  {
    height: 150, 
    bezierCurve: true, 
    bezierCurveTension: 0, 
    responsive: true, 
    datasetFill: false, 
    multiTooltipTemplate: "<%= datasetLabel %> - <%= value %>",
    generateLegend: true
  }

<%= chartjs_line_chart @data, @options %>

Are template options only declarable in controllers but not in views?

using rails 3.2 not sure if that matters here, but looks like it's not finding the Chart js code.
calling via

= horizontal_bar_chart(assessment.chart_data, {})

edit:54 Uncaught ReferenceError: Chart is not definedinitChart @ edit:54

It seems that a legend is trying to be rendered: http://cl.ly/image/2T0w400U2Y39 But is just resulting in two list dots.

I'm using your default data with this helper = line_chart @labels, @datasets, {width: 800, height: 400, responsive: true}

If I use these options, there is no 'legend' = line_chart @labels, @datasets, {width: 800, height: 400, responsive: true, legendTemplate: " "}

How do i use javascript userCallback for ticks in rails format?

In this part
https://github.com/airblade/chartjs-ror/blob/master/lib/chartjs/chart_helpers.rb#L31
the code deletes hash elements from original options hash, making it unusable in further code. The workaround now is to passing the duplicate of options to chart helper:

bar_chart @chart_data, @chart_options.dup

Obviously it is not nice to modify input arguments without any warning.

For me, the default 400 for width and height is not applied when I try to render chart (tried for bar_chart).
My custom values are also does not applied directly, but applied in some weird modified states.
Here is origial (default) output code:

<canvas id="chart-0" class="chart" width="1064" height="1064" style="display: block; width: 1064px; height: 1064px;"></canvas>

Here is code with passed

    @chart_options = {
      :height => '20',
      :width => '100'
    }

<canvas id="chart-0" class="chart" width="1081" height="216" style="display: block; width: 1081px; height: 216px;"></canvas>

I'm showing the different currency dynamically.

I want to change the dollar sign format at run time,

How could I hack it ? currently, i have some setting in the following

THanks so much

line_chart chart_data, {animation: false, responsive: true, maintainAspectRatio: false,bezierCurve: false}

I can't use a DateTime object in the series, but I needed it in xAxes as js date in a scatter chart.

I've solved it overwriting the helper, i've just added this:
when DateTime
"new Date('#{element.iso8601}')"

Thanks

With newer versions of Rails which enable a CSP header by default, you may experience issues if you are not allowing execution of unsafe-inline script tags.

Depending on your settings, this may prevent the graph from loading or just fill your console with errors.

A suggestion would be to add the CSP nonce to the generated <script> tag, so something like this (chart_helpers.rb, line 38).

Before:

script = javascript_tag do
   ...
end

After:

script = javascript_tag(nonce: true) do
   ...
end

As README says, I added:

# config/initializers/chartjs.rb
Chartjs.no_confict!

But I get undefined methodno_confict!' for Chartjs:Module (NoMethodError)`? File is correctly place, lines added to application.js. Server won't load. Was trying to add this to remove any conflict with chartkick.

Hi Everyone!
In this very example, trying to format y axes as well as tooltip values with currency format.
Ultimately, I also want to use JavaScript to make some of the series clickable.. etc.

As per this gem documentation, this normally is possible:

You can put anything in the options hash that Chart.js recognises. To pass a JavaScript function as an option value, wrap it in quotation marks to make it a string.

In practice, I don't seem to be able to make it work.

<div> <%= bar_chart @chart_data, { responsive: true, legend: { position: "right", }, maintainAspectRatio: false, tooltips: { mode: 'label', intersect: true, callbacks: { title: "function(tooltipItem) { return moment(tooltipItem[0].xLabel).format('ll'); }", label: "function(tooltipItem, data) { return data.datasets[tooltipItem.datasetIndex].label + ': ' + tooltipItem.yLabel; }" } }, scales: { xAxes: [{ stacked: true, }], yAxes: [{ stacked: false, userCallback: "function(value, index, values) { value = value.toString(); value = value.split(/(?=(?:...)*$)/); value = value.join(','); return '$' + value; }" }] }} %> </div>

Is this a know bug/issue?
Should I be doing this differently?

Alternatively, is there any way to access the ctx and chart variables from the generated script, so I can eventually attach these callbacks in raw JS, in the case this gem doesn't allow it?

Thanks in advance!

Hey there,
I've a problem with showing the "labels" on doughnut-charts.
If I only have 2 values - labels are shown correctly, but if I have more than 2 values for the 'labels' attribute the third value becomes a: "-"

I collect the values via PHP in my var '$close1', when I do a print_r($close1) I get:
["customer", "fb", "colo", "isam", "reseller"]
...but in chartJS-script I've the following values:
["customer", "fb", "-", "colo", "isam"]

...what can I do?

I don't use this plugin much any more and consequently struggle to put time into it. It doesn't need much time – just a little to stay on top of occasional issues and pull requests.

Please let me know if you would like to become a maintainer.

Seem to be getting that error using your default data. Here's the script that's being inserted.

<figure class="chart"><canvas height="400" id="chart-0" width="400"></canvas></figure><script type="text/javascript">
 //<![CDATA[
(function() { var initChart = function() { var data = {labels: {"labels":["January","February","March","April","May","June","July"],"datasets":[{"fillColor":"rgba(220,220,220,0.5)","strokeColor":"rgba(220,220,220,1)","pointColor":"rgba(220,220,220,1)","pointStrokeColor":"#fff","data":[65,59,90,81,56,55,40]},{"fillColor":"rgba(151,187,205,0.5)","strokeColor":"rgba(151,187,205,1)","pointColor":"rgba(151,187,205,1)","pointStrokeColor":"#fff","data":[28,48,40,19,96,27,100]}]}, datasets: {}}; var opts = {}; if (!("animation" in opts)) { opts["animation"] = (typeof Modernizr == "undefined") || Modernizr.canvas; } var canvas = document.getElementById("chart-0"); var ctx = canvas.getContext('2d'); var chart = new Chart(ctx).Line(data, opts); window.Chart["chart-0"] = chart; var legend = chart.generateLegend(); if (legend.trim().length > 0) { var legendHolder = document.createElement("div"); legendHolder.innerHTML = legend; canvas.parentNode.insertBefore(legendHolder.firstChild, canvas.nextSibling); } }; /* W3C standard */ if (window.addEventListener) { window.addEventListener("load", initChart, false); } /* IE */ else if (window.attachEvent) { window.attachEvent("onload", initChart); } })();
            //]]>
</script>

I was trying to utilize the :element_id option you mention in the README, but it wasn't working.

I dug into the code and I found this in chart_helpers.rb:

element_id = options.delete(:id)     || "chart-#{@chart_id += 1}"

It looks like the :id option will work the way :element_id was intended to work.

The way I see it, there are 3 possible options to fix this:

• Update the README to reflect the true option

`:id` - id of the `<canvas/>` - default is `chart-n` where `n` is the 0-based index of the chart on the page.        

• Deprecate the :id option, and replace it with :element_id like it says in README

element_id = options.delete(:element_id) || "chart-#{@chart_id += 1}"

• Provide backwards compatibility with :id and support :element_id and possibly deprecate :id in the future

element_id = options.delete(:id) || options.delete(:element_id) || "chart-#{@chart_id += 1}"

I'd be happy to submit a pull-request with any of the above mentioned changes, I just wanted to see what was the preferred option first.

I'm currently using chartkick gem, but its not allowing me to turn large decimals into formatted money objects. I see 2500000 instead of $25,000 on the column_chart, and the chart itself only allows me to go from $0 to $1 using the thousands: "," prefix: "$". Do you know how to remedy this issue? Does the gem allow formatting for decimal numbers?

Hello,

There are some built-in function to auto update the chart with new data?

If not, please do you have any sugestions to auto update the chartjs-ror graphic?

Please let me know, thank you very much!

Hello! I noticed you bumped the major version of this gem. Would you be willing to provide a CHANGELOG file with details on what caused the major version bump?

Hallo.

I have a strange problem. My Pie, doughtnut and Polar charts aren't receiving data therefore they don't render.

This is the controller code.

@data = {
      labels: "May",
      datasets: [
        {
           data: 4
           backgroundColor: "#FF6384",
           hoverBackgroundColor: "#FF6384"

        }
      ]
    }
@options = {}

Here's the view:

= pie_chart @data, @options

I don't get any errors at all. And the Javascript code doesn't have the datasets as do the others (line chart etc). The other charts work properly. Any idea on what might be the problem?

Below is a screenshot of a working chart js, it has the datasets attribute that is missing in the three charts that don't work.

Thanks for your assistance!

Thanks for creating such an easy to use plugin! Was curious if there was a way to facilitate supporting horizontal bar charts similar to how this is implemented here: https://github.com/tomsouthall/Chart.HorizontalBar.js

Even if you could point me in the right direction to enabling this myself would be much appreciated.

I am able to get points when I use javascript and define the chart that way. I want to know if there is a way I can do it as it is intended using your gem.

Now that Rails 6 is out since a few months it would be great if the Installation paragraph in this project's README file could be updated to explain how to use this gem with Rails 6 and webpacker. Unfortunately the current instructions are not valid anymore for a new Rails 6 project using webpacker.

Plugin

The plugin appears to be loaded ,in as much there are no errors in either Rails or Java console.

The following code in the Controller is seems correct as per the documentation..

    @data_waterfall = {
      
      datasets: [
        {
          label: 'Expenses',
          data: [50],
          background_color: '#e8cdd7',
          stack: 'stack 1',
        },
        {
          data: [50], 
          waterfall: {
            dummyStack: true,
          },
          background_color: "rbga(0,0,0,0)",
          stack: 'stack 2'
        },
        {
          label: "Head Count",
          data: [50],
          stack: 'stack 2',
          background_color: '#a53860'
        },
        {
          label: 'New Expenses',
          data: [100],
          background_color: '#a53860',
          stack: 'stack 3'
        }
      ]
    }

    @options_waterfall = {
      plugins: {
        waterFallPlugin: {
          stepLines: {
            enabled: true,
            startColorStop: 0,
            endColorStop: 0.6,
            startColor: 'rgba(0, 0, 0, 0.55)',
            endColor: 'rgba(0, 0, 0, 0)',
            diagonalStepLines: true
          }
        }
      }
    }

Also in the view we have

<%= bar_chart @data_waterfall, @options_waterfall %>

The dummy stack is visible, so I think that the plugin is being ignored. i am not sure why.

I have installed npm and have it loading all the JS. I gives no errors. The package-lock.json shows

{
  "name": "fintyre",
  "version": "1.0.0",
  "lockfileVersion": 1,
  "requires": true,
  "dependencies": {
    "chart.js": {
      "version": "2.8.0",
      "resolved": "https://registry.npmjs.org/chart.js/-/chart.js-2.8.0.tgz",
      "integrity": "sha512-Di3wUL4BFvqI5FB5K26aQ+hvWh8wnP9A3DWGvXHVkO13D3DSnaSsdZx29cXlEsYKVkn1E2az+ZYFS4t0zi8x0w==",
      "requires": {
        "chartjs-color": "^2.1.0",
        "moment": "^2.10.2"
      }
    },
    "chartjs-color": {
      "version": "2.3.0",
      "resolved": "https://registry.npmjs.org/chartjs-color/-/chartjs-color-2.3.0.tgz",
      "integrity": "sha512-hEvVheqczsoHD+fZ+tfPUE+1+RbV6b+eksp2LwAhwRTVXEjCSEavvk+Hg3H6SZfGlPh/UfmWKGIvZbtobOEm3g==",
      "requires": {
        "chartjs-color-string": "^0.6.0",
        "color-convert": "^0.5.3"
      }
    },
    "chartjs-color-string": {
      "version": "0.6.0",
      "resolved": "https://registry.npmjs.org/chartjs-color-string/-/chartjs-color-string-0.6.0.tgz",
      "integrity": "sha512-TIB5OKn1hPJvO7JcteW4WY/63v6KwEdt6udfnDE9iCAZgy+V4SrbSxoIbTw/xkUIapjEI4ExGtD0+6D3KyFd7A==",
      "requires": {
        "color-name": "^1.0.0"
      }
    },
    "chartjs-plugin-custom-lines": {
      "version": "0.0.5",
      "resolved": "https://registry.npmjs.org/chartjs-plugin-custom-lines/-/chartjs-plugin-custom-lines-0.0.5.tgz",
      "integrity": "sha1-U3XilzceuNhUgQ46i8mYlirp77Q=",
      "requires": {
        "lodash.merge": "^4.6.0"
      }
    },
    "chartjs-plugin-waterfall": {
      "version": "1.0.3",
      "resolved": "https://registry.npmjs.org/chartjs-plugin-waterfall/-/chartjs-plugin-waterfall-1.0.3.tgz",
      "integrity": "sha1-wcntwyyX913U4qYwdQoKlZM3B0o=",
      "requires": {
        "lodash.groupby": "^4.6.0",
        "lodash.merge": "^4.6.0"
      }
    },
    "color-convert": {
      "version": "0.5.3",
      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-0.5.3.tgz",
      "integrity": "sha1-vbbGnOZg+t/+CwAHzER+G59ygr0="
    },
    "color-name": {
      "version": "1.1.4",
      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
      "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA=="
    },
    "lodash.groupby": {
      "version": "4.6.0",
      "resolved": "https://registry.npmjs.org/lodash.groupby/-/lodash.groupby-4.6.0.tgz",
      "integrity": "sha1-Cwih3PaDl8OXhVwyOXg4Mt90A9E="
    },
    "lodash.merge": {
      "version": "4.6.1",
      "resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.1.tgz",
      "integrity": "sha512-AOYza4+Hf5z1/0Hztxpm2/xiPZgi/cjMqdnKTUWTBSKchJlxXXuUSxCCl8rJlf4g6yww/j6mA8nC8Hw/EZWxKQ=="
    },
    "moment": {
      "version": "2.24.0",
      "resolved": "https://registry.npmjs.org/moment/-/moment-2.24.0.tgz",
      "integrity": "sha512-bV7f+6l2QigeBBZSM/6yTNq4P2fNpSWj/0e7jQcy87A8e7o2nAfP/34/2ky5Vw4B9S446EtIhodAzkFCcR4dQg=="
    }
  }
}

and I have

config.assets.paths << Rails.root.join('node_modules')` in config/application.rb

My suspicion is that i am missing something in loading the JS.

Any help would be greatly appreciated.

hi - thanks for the gem, i'm managing to get most of what I want done but I cant seem to hook into the onAnimationComplete event. Have you got any idea how I can achieve this? Presumably this is the only way to know the chart is complete and exists at window.Chart[id] ??

if I pass some js through options it just fails to call the function eg.
onAnimationComplete: j('function(){alert("hello!");};')

I want to show each dataset's label in tooltip,

I don't get what do you mean on the README.md

Which file should I modify ? vendor/assets/javascripts/Chart.js ???

              label: dataset[:type],
              pointHighlightStroke: "#{color}",
              data: dataset[:data]

It looks like Chart.js handles this itself now.

Investigate whether I can drop Chartjs::AxisHelpers#series.

I want to show multiple chart in one page, for example using this:

<%= chartjs_line_chart @DaTa, @options %>
<%= chartjs_pie_chart @datastaffcount %>

but when its rendered it only show first chart and the other is blank.

Did you ever see a problem like this?

Hi,

could you update Chart.js to latest version 2.7.3?

Thanks!