Undefined local variable or method `parsedData' when Using JSON to Parse data from Googlesheets To FusionCharts in Ruby on Rails app

Question

Im loading Data from Googlesheets to fusioncharts in my rails app.

I use Jquery to Fetch the data from the google sheets as seen in this tutorial https://www.sitepoint.com/interactive-javascript-charts-using-data-from-google-sheets/

Rails always gives me this error undefined local variable or method 'parsedData' for #<GreetingsController:0x007fdb862e9cf8> when I try to fetch the data from the pasedDatavariable like this.

data: parsedData

I'm not sure on what I'm doing wrong here, this is the first time I'm using JSON to load data to fusioncharts in rails app. Any help would be much appreciated

here is the Jquery snippet were the googlesheets gets turned into JSON.

var spreadsheetId = "XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX",
  url = "https://spreadsheets.google.com/feeds/list/" +
  spreadsheetId +
  "/od6/public/basic?alt=json";

$.get({
  url: url,
  success: function(response) {
    var data = response.feed.entry,
      len = data.length,
      i = 0,
      parsedData = [];

    for (i = 0; i < len; i++) {
      parsedData.push({
        label: data[i].title.$t,
        value: data[i].content.$t.replace('income: ', '')
      });
    }

  }
});

Here is the fusionchart snippet from the rails controller

     @chart2 = Fusioncharts::Chart.new({    

     type: 'bar2d',
      renderAt: 'chart-container',
      width: '100%',
      height: '300',
      dataFormat: 'json',
      dataSource: {
        chart: {
         caption: "Highest Paid Actors",
         yAxisName: "Annual Income (in milion USD)",
         numberPrefix: "$",
         theme: "fint",
        exportEnabled: "1",
        },

           data: parsedData 
    }
})

and here is instructions about rails and fusioncharts https://github.com/fusioncharts/rails-wrapper

Answer 1

It seems that you've been confused by the opportunities that fusioncharts/rails-wrapper gem offers.

If you take a look into source files of this gem (render method), it allows you to construct a Ruby object, which represents your chart and then uses javascript to render a template with the chart.

Thus, I see 2 options here.

First option is to continue with the tutorial:

Create an element with a specified id, which will contain your chart:

<div id="chart-container">
  <p>The chart will render here!</p>
</div>

Render your data as soon as you receive it using js:

var spreadsheetId = "XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX",
  url = "https://spreadsheets.google.com/feeds/list/" +
  spreadsheetId +
  "/od6/public/basic?alt=json";

$.get({
  url: url,
  success: function(response) {
    var data = response.feed.entry,
      len = data.length,
      i = 0,
      parsedData = [];

    for (i = 0; i < len; i++) {
      parsedData.push({
        label: data[i].title.$t,
        value: data[i].content.$t.replace('income: ', '')
      });
    }

    new FusionCharts({
      type: 'bar2d',
      renderAt: 'chart-container',
      width: '100%',
      height: '300',
      dataFormat: 'json',
      dataSource: {
        "chart": {
          "caption": "Highest Paid Actors",
          "yAxisName": "Annual Income (in milion USD)",
          "numberPrefix": "$"
        },
        "data": parsedData
      }
    }).render();
  }
});

By this approach you fetch the data using jQuery and parse it in the specified container avoiding the backend.

Another option is to fetch the data in the backend by using HTTParty gem, for example. And then render the chart by using Ruby interface provided by the fusioncharts-rails gem.

But since you've implemented most of the functionality using front-end tools, why not stick to it.