chartjs-ror icon indicating copy to clipboard operation
chartjs-ror copied to clipboard

No way to access chart object

Open BlackBeast593 opened this issue 8 years ago • 9 comments

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!

BlackBeast593 avatar Mar 12 '17 20:03 BlackBeast593

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.

airblade avatar Mar 13 '17 10:03 airblade

Thank you!

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

BlackBeast593 avatar Mar 15 '17 00:03 BlackBeast593

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.

BlackBeast593 avatar Mar 15 '17 04:03 BlackBeast593

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.

airblade avatar Mar 15 '17 08:03 airblade

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

vijayj avatar Dec 13 '17 23:12 vijayj

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

AlainPilon avatar Mar 27 '18 12:03 AlainPilon

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

jdefrance-stessa avatar Dec 21 '18 20:12 jdefrance-stessa

@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

vijayj avatar Jan 12 '19 23:01 vijayj

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();

justagitcookie avatar May 18 '19 18:05 justagitcookie