diff --git a/demo_rails/app/assets/javascripts/handling_events.coffee b/demo_rails/app/assets/javascripts/handling_events.coffee
new file mode 100644
index 0000000..24f83d1
--- /dev/null
+++ b/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/
diff --git a/demo_rails/app/assets/stylesheets/handling_events.scss b/demo_rails/app/assets/stylesheets/handling_events.scss
new file mode 100644
index 0000000..1a4dec3
--- /dev/null
+++ b/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/
diff --git a/demo_rails/app/controllers/handling_events_controller.rb b/demo_rails/app/controllers/handling_events_controller.rb
new file mode 100644
index 0000000..a402b3b
--- /dev/null
+++ b/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
diff --git a/demo_rails/app/helpers/handling_events_helper.rb b/demo_rails/app/helpers/handling_events_helper.rb
new file mode 100644
index 0000000..b7db6ef
--- /dev/null
+++ b/demo_rails/app/helpers/handling_events_helper.rb
@@ -0,0 +1,2 @@
+module HandlingEventsHelper
+end
diff --git a/demo_rails/app/views/handling_events/handling_events.erb b/demo_rails/app/views/handling_events/handling_events.erb
new file mode 100644
index 0000000..3c2425b
--- /dev/null
+++ b/demo_rails/app/views/handling_events/handling_events.erb
@@ -0,0 +1,27 @@
+ Handling Events in Google Table
+
+ Data :
+ <%=raw @table.data %>
+
+ Options
+ <%=raw @table.options %>
+
+ Table :
+
+ <%=raw @table.div %>
+
+
+
+ Handling events in Google charts
+
+ Data :
+ <%=raw @column_chart.data %>
+
+ Options
+ <%=raw @column_chart.options %>
+
+ Chart :
+
+ <%=raw @column_chart.div %>
+
+
\ No newline at end of file
diff --git a/demo_rails/config/routes.rb b/demo_rails/config/routes.rb
index 5fdb16f..449a667 100644
--- a/demo_rails/config/routes.rb
+++ b/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
diff --git a/demo_rails/test/controllers/handling_events_controller_test.rb b/demo_rails/test/controllers/handling_events_controller_test.rb
new file mode 100644
index 0000000..c58b494
--- /dev/null
+++ b/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
diff --git a/demo_sinatra/app.rb b/demo_sinatra/app.rb
index 1a0eb87..51e15bd 100644
--- a/demo_sinatra/app.rb
+++ b/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}: {point.percentage:.1f}%'
- },
- 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}: {point.percentage:.1f}%'
+ },
+ 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
diff --git a/demo_sinatra/views/highcharts_css.erb b/demo_sinatra/views/highcharts_css.erb
new file mode 100644
index 0000000..de814e3
--- /dev/null
+++ b/demo_sinatra/views/highcharts_css.erb
@@ -0,0 +1,27 @@
+ Line Graph - Grey Background using CSS
+
+ Data :
+ <%= @line_graph.chart.series_data %>
+
+ Options
+ <%= @line_graph.chart.options %>
+
+ Chart :
+
+ <%= @line_graph.div %>
+
+
+
+ Column Graph - Different styling using CSS
+
+ Data :
+ <%= @column_graph.chart.series_data %>
+
+ Options
+ <%= @column_graph.chart.options %>
+
+ Chart :
+
+ <%= @column_graph.div %>
+
+
\ No newline at end of file