Merge pull request #2 from Prakriti-nith/import_spreadsheet

Added rails example of importing data from google spreadsheet in google charts
Shekharrajak · Jul 13, 2018 · 3d53ebe · 3d53ebe
2 parents bb7c765 + 414b0bd
commit 3d53ebe
Show file tree

Hide file tree

Showing 2 changed files with 101 additions and 0 deletions.
diff --git a/demo_rails/app/controllers/application_controller.rb b/demo_rails/app/controllers/application_controller.rb
@@ -249,6 +249,29 @@ def googlecharts
         ['Russia', 'Russia: 146,019,512'],
         ['Japan', 'Japan: 127,120,000']
       ]
+
+    @data_customers = 'https://docs.google.com/spreadsheets/d/1aXns2ch8y_rl9ZLxSYZIU5ewUB1ZNAg5O6iPLZLApZI/gviz/tq?header=1&tq='
+    @query_customers = 'SELECT * WHERE A > 1'
+    @data_customers << @query_customers
+    @customers_table = Daru::View::Table.new(@data_customers, adapter: :googlecharts)
+    @customers_chart = Daru::View::Plot.new(@data_customers, {type: :line, adapter: :googlecharts})
+
+    @query_products = 'SELECT A, H, O, Q, R, U LIMIT 5 OFFSET 8'
+    @products = 'https://docs.google.com/spreadsheets/d/1XWJLkAwch5GXAt_7zOFDcg8Wm8' \
+            'Xv29_8PWuuW15qmAE/gviz/tq?gid=0&headers=1&tq='
+    @products << @query_products
+    @column_chart_options = {
+      width: 600,
+      type: :column,
+      adapter: :googlecharts
+    }
+    @table_options = {
+      adapter: :googlecharts,
+      showRowNumber: true
+    }
+    @products_table = Daru::View::Table.new(@products, @table_options)
+    @column_chart = Daru::View::Plot.new(@products, @column_chart_options)
+
     df_cp = Daru::DataFrame.rows(country_population)
     df_cp.vectors = Daru::Index.new(['Country', 'Population'])
     @cp_table = Daru::View::Table.new(df_cp, pageSize: 5, adapter: :googlecharts)

diff --git a/demo_rails/app/views/application/googlecharts.erb b/demo_rails/app/views/application/googlecharts.erb
@@ -47,6 +47,84 @@ charts is not coming in 3d, since google_visualr loading only corechart package
 </p>
 <br>
 
+<h3> Importing Data from Google spreadsheet - 1 </h3>
+<p>
+  <b>Data: </b>
+  <%=raw @customers_table.data %>
+  <br>
+  <b>Options</b>
+  <%=raw @customers_table.options %>
+  <br>
+  <b>JavaScript Generated: </b>
+  <br> &ensp;function draw() {
+  <br> &emsp;var query = new google.visualization.Query('https://docs.google.com/spreadsheets/d/1aXns2ch8y_rl9ZLxSYZIU5ewUB1ZNAg5O6iPLZLApZI/gviz/tq?header=1&tq=SELECT * WHERE A > 1');
+  <br> &emsp;query.send(handleQueryResponse);
+  <br> &ensp;}
+  <br> &ensp;function handleQueryResponse(response) {
+  <br> &emsp;var data_table = response.getDataTable();
+  <br> &emsp;var table = new google.visualization.Table(document.getElementById('id'));
+  <br> &emsp;table.draw(data_table, {});
+  <br> &ensp;};
+  <br>
+  <b>Table : </b>
+  <br>
+  <%=raw @customers_table.div %>
+</p>
+<br>
+
+<h3> Importing Data from Google spreadsheet - 1 </h3>
+<p>
+  <b>Data: </b>
+  <%=raw @customers_chart.data %>
+  <br>
+  <b>Options</b>
+  <%=raw @customers_chart.options %>
+  <br>
+  <b>JavaScript Generated: </b>
+  <br> &ensp;function draw() {
+  <br> &emsp;var query = new google.visualization.Query('https://docs.google.com/spreadsheets/d/1aXns2ch8y_rl9ZLxSYZIU5ewUB1ZNAg5O6iPLZLApZI/gviz/tq?header=1&tq=SELECT * WHERE A > 1');
+  <br> &emsp;query.send(handleQueryResponse);
+  <br> &ensp;}
+  <br> &ensp;function handleQueryResponse(response) {
+  <br> &emsp;var data_table = response.getDataTable();
+  <br> &emsp;var table = new google.visualization.LineChart(document.getElementById('id'));
+  <br> &emsp;table.draw(data_table, {});
+  <br> &ensp;};
+  <br>
+  <b>Chart : </b>
+  <br>
+  <%=raw @customers_chart.div %>
+</p>
+<br>
+
+<h3> Importing Data from Google spreadsheet - 2 </h3>
+<p>
+  <b>Data: </b>
+  <%=raw @products_table.data %>
+  <br>
+  <b>Options</b>
+  <%=raw @products_table.options %>
+  <br>
+  <b>Table : </b>
+  <br>
+  <%=raw @products_table.div %>
+</p>
+<br>
+
+<h3> Importing Data from Google spreadsheet - 2 </h3>
+<p>
+  <b>Data: </b>
+  <%=raw @column_chart.data %>
+  <br>
+  <b>Options</b>
+  <%=raw @column_chart.options %>
+  <br>
+  <b>Chart : </b>
+  <br>
+  <%=raw @column_chart.div %>
+</p>
+<br>
+
 <h3> Map (Fixme: Not able to see google map) </h3>
 <p>
  <br>