airblade / chartjs-ror

[Not supported - see #53] Simplifies using Chart.js in Rails
MIT License
184 stars 57 forks source link

No way to access chart object #34

Open BlackBeast593 opened 7 years ago

BlackBeast593 commented 7 years ago

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!

airblade commented 7 years ago

This plugin just loads Chart.js via a Ruby gem. You'll need to ask on the Chart.js repo how to update your chart with new data.

BlackBeast593 commented 7 years ago

Thank you!

Actually Chart.js includes the updateData function. There is some way to access to the chart object generated by chartjs-ror?

BlackBeast593 commented 7 years ago

Hello,

I just achieved my goal. I'm not an expert in javascript but I modified the file "chart_helpers.rb", in line 42, to remove the "var" prefix on "chart" variable so now I am able to access to the chart object from another piece of javascript on the same page, for instance:

I'm not sure if this change could provoke some inestable performance on the plugin, but it worked for me.

Thank you very much, this plugin is awesome because it supports the complete set of options of Chart.js, such as the multi Y axis or the time format X axis.

airblade commented 7 years ago

Glad you got it working for you.

You're right, there isn't a way to access the chart object. I'll leave this issue open until that's possible.

vijayj commented 6 years ago

I did a small hack where I am using the global window object and adding charts object to it

 var initChart = function() {
            var ctx = document.getElementById(#{element_id.to_json});
            var chart = new Chart(ctx, {
              type:    "#{camel_case type}",
              data:    #{to_javascript_string data},
              options: #{to_javascript_string options}
            });
            window.charts = window.charts || [];
            window.charts.push(chart);
          };

I don't think it is completely safe but it's an idea

AlainPilon commented 6 years ago

+1 to find a way to access the chart object.

jdefrance-stessa commented 5 years ago

Was there a pull request ever submitted for your changes @vijayj ? Or did you end up cloning/forking this project?

vijayj commented 5 years ago

@jdefrance-stessa - I just added that code to my project so no clone or fork. I am still not convinced whether this is the safest way to access chart object. I am not sure this merits a pull request

justagitcookie commented 5 years ago

EDIT: SORRY i realized my mistake that the google search led me to a ruby project in search of accessing chartjs objects at a later time!

@BlackBeast593 , @vijayj , @AlainPilon Since this issue is still open i'd like to propose you use the following procedure

// when you initialize a new chart, save the chart to the data field that is hidden in the DOM.
// you can store objects here and retrieve them whenever you need to.
// so in yourFunctionThatInitsYourChart:

var ctx = $('#yourcanvas');
var yourChart = new Chart(ctx, config);
ctx.data('storedChart', yourChart);`

// and then load the data field at any time you wish by selecting this data field again
// so in yourFunctionThatGetsCalledToUpdateYourChart:

var chartLoadedAgain = $('#yourcanvas').data('storedChart');
var labelsAndDataContainer = seperateLabelsAndData(timeSeriesData);
var labelsArray = labelsAndDataContainer[0];
var dataArray = labelsAndDataContainer[1];

graph.data.labels = labelsArray;
graph.data.datasets[0].data = dataArray;
chartLoadedAgain.update();