Resolve conflicts

demo_rails/app/assets/javascripts/handling_events.coffee

@@ -0,0 +1,3 @@
+# Place all the behaviors and hooks related to the matching controller here.
+# All this logic will automatically be available in application.js.
+# You can use CoffeeScript in this file: http://coffeescript.org/

demo_rails/app/assets/stylesheets/handling_events.scss

@@ -0,0 +1,3 @@
+// Place all the styles related to the HandlingEvents controller here.
+// They will automatically be included in application.css.
+// You can use Sass (SCSS) here: http://sass-lang.com/

demo_rails/app/controllers/handling_events_controller.rb

@@ -0,0 +1,35 @@
+class HandlingEventsController < ApplicationController
+  def handling_events
+    Daru::View.plotting_library = :googlecharts
+
+    data = [
+            ['Year', 'Sales', 'Expenses'],
+            ['2013',  1000,      400],
+            ['2014',  1170,      460],
+            ['2015',  660,       1120],
+            ['2016',  1030,      540]
+    ]
+    user_options = {
+        listeners: {
+            page: "alert('The user is navigating to page ' + (e['page'] + 1));",
+            select: "alert('A table row was selected');"
+        }
+    }
+    @table = Daru::View::Table.new(data, {page: 'enable', pageSize: 2}, user_options)
+
+    user_options_chart = {
+        listeners: {
+            select: " var selection = chart.getSelection();
+                      var selectedValue = data_table.getFormattedValue(selection[0].row, 0);
+                      alert('You selected ' + selectedValue + ' year');",
+            # exports the chart to PDF format
+            ready: "var doc = new jsPDF();
+                    doc.addImage(chart.getImageURI(), 0, 0);
+                    doc.save('chart.pdf');"
+        }
+    }
+    @column_chart = Daru::View::Plot.new(@table.table, { type: :column, width: 800 }, user_options_chart)
+
+    render "handling_events" , layout: "googlecharts_layout"
+  end
+end

demo_rails/app/helpers/handling_events_helper.rb

@@ -0,0 +1,2 @@
+module HandlingEventsHelper
+end

demo_rails/app/views/handling_events/handling_events.erb

@@ -0,0 +1,27 @@
+<h3> Handling Events in Google Table</h3>
+<p>
+  <b>Data : </b>
+  <%=raw @table.data %>
+  <br>
+  <b>Options</b>
+  <%=raw @table.options %>
+  <br>
+  <b>Table : </b>
+  <br>
+  <%=raw @table.div %>
+</p>
+<br>
+
+<h3> Handling events in Google charts</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>

demo_rails/config/routes.rb

@@ -8,4 +8,5 @@
   get '/highchartscss', to: 'highcharts_css#highcharts_css'
   get '/highchartstockmap', to: 'highchart_stock_map#highchart_stock_map'
   get '/multiplecharts', to: 'multiple_charts#multiple_charts'
+  get '/handlingevents', to: 'handling_events#handling_events'
 end

demo_rails/test/controllers/handling_events_controller_test.rb

@@ -0,0 +1,7 @@
+require 'test_helper'
+
+class HandlingEventsControllerTest < ActionDispatch::IntegrationTest
+  # test "the truth" do
+  #   assert true
+  # end
+end

demo_sinatra/app.rb

@@ -26,6 +26,11 @@
   erb :highchart_stock_map, :layout => :highcharts_layout
 end
 
+get '/highchartscss' do
+  highcharts_css
+  erb :highcharts_css, :layout => :highcharts_layout
+end
+
 def highchart_example
     # bar chart
     opts = {
@@ -316,32 +321,32 @@ def highchart_stock_map
 
 
   opts5 = {
-      chart: {
-        type: 'pie',
-        options3d: {
-            enabled: true,
-            alpha: 45,
-            beta: 0
-        }
-      },
-      title: {
-          text: 'Browser market shares at a specific website, 2014'
-      },
-      tooltip: {
-          pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
-      },
-      plotOptions: {
-        pie: {
-            allowPointSelect: true,
-            cursor: 'pointer',
-            depth: 35,
-            dataLabels: {
-                enabled: true,
-                format: '{point.name}'
-            }
-        }
+    chart: {
+      type: 'pie',
+      options3d: {
+          enabled: true,
+          alpha: 45,
+          beta: 0
+      }
+    },
+    title: {
+        text: 'Browser market shares at a specific website, 2014'
+    },
+    tooltip: {
+        pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
+    },
+    plotOptions: {
+      pie: {
+          allowPointSelect: true,
+          cursor: 'pointer',
+          depth: 35,
+          dataLabels: {
+              enabled: true,
+              format: '{point.name}'
+          }
       }
     }
+  }
 
   # data for the charts
   series_dt5 = ([{
@@ -529,3 +534,86 @@ def highchart_stock_map
 
   @map_idea = Daru::View::Plot.new(series_dt8, opts8)
 end
+
+def highcharts_css
+    # set the library, to plot charts
+  Daru::View.plotting_library = :highcharts
+
+  # options for the charts
+  opts = {
+    chart: {defaultSeriesType: 'line'},
+    css: ['.highcharts-background {fill: #efefef;stroke: #a4edba;stroke-width: 2px;}'],
+    title: {
+      text: 'Solar Employment Growth by Sector, 2010-2016'
+    },
+
+    subtitle: {
+      text: 'Source: thesolarfoundation.com'
+    },
+
+    yAxis: {
+      title: {
+        text: 'Number of Employees'
+      }
+    },
+    legend: {
+      layout: 'vertical',
+      align: 'right',
+      verticalAlign: 'middle'
+    }
+  }
+
+  # data for the charts
+  data = Daru::Vector.new([29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4])
+
+  # initialize
+  @line_graph = Daru::View::Plot.new(data, opts)
+
+  opts2 = {
+    chart: {
+      type: 'column'
+    },
+
+    css: ['.highcharts-color-0 {fill: #7cb5ec;stroke: #7cb5ec;}',
+          '.highcharts-axis.highcharts-color-0 .highcharts-axis-line {stroke: #7cb5ec;}',
+          '.highcharts-axis.highcharts-color-0 text {fill: #7cb5ec;}',
+          '.highcharts-color-1 {fill: #90ed7d;stroke: #90ed7d;}',
+          '.highcharts-axis.highcharts-color-1 .highcharts-axis-line {stroke: #90ed7d;}',
+          '.highcharts-axis.highcharts-color-1 text {fill: #90ed7d;}',
+          '.highcharts-yaxis .highcharts-axis-line {stroke-width: 2px;}'
+          ],
+
+    title: {
+        text: 'Styling axes'
+    },
+
+    yAxis: [{
+        className: 'highcharts-color-0',
+        title: {
+            text: 'Primary axis'
+        }
+    }, {
+        className: 'highcharts-color-1',
+        opposite: true,
+        title: {
+            text: 'Secondary axis'
+        }
+    }],
+
+    plotOptions: {
+        column: {
+            borderRadius: 5
+        }
+    }
+  }
+
+  series_dt2 = [{
+    data: [1, 3, 2, 4]
+  }, {
+      data: [324, 124, 547, 221],
+      yAxis: 1
+  }]
+
+  # initialize
+  @column_graph = Daru::View::Plot.new(series_dt2, opts2)
+end

demo_sinatra/views/highcharts_css.erb

@@ -0,0 +1,27 @@
+<h3> Line Graph - Grey Background using CSS</h3>
+<p>
+  <b>Data : </b>
+  <%= @line_graph.chart.series_data %>
+  <br>
+  <b>Options</b>
+  <%= @line_graph.chart.options %>
+  <br>
+  <b>Chart : </b>
+  <br>
+  <%= @line_graph.div %>
+</p>
+<br>
+
+<h3> Column Graph - Different styling using CSS</h3>
+<p>
+  <b>Data : </b>
+  <%= @column_graph.chart.series_data %>
+  <br>
+  <b>Options</b>
+  <%= @column_graph.chart.options %>
+  <br>
+  <b>Chart : </b>
+  <br>
+  <%= @column_graph.div %>
+</p>
+<br>