Merge pull request #13 from Prakriti-nith/sinatra_custom_css

Prakriti-nith · web-flow · commit 6cee55d7798f · 2018-07-28T23:46:09.000+05:30
Added sinatra highcharts CSS examples
diff --git a/demo_sinatra/app.rb b/demo_sinatra/app.rb
@@ -21,6 +21,11 @@
   erb :googlecharts, :layout => :googlecharts_layout
 end
 
+get '/highchartscss' do
+  highcharts_css
+  erb :highcharts_css, :layout => :highcharts_layout
+end
+
 def highchart_example
     # bar chart
     opts = {
@@ -141,3 +146,87 @@ def make_random_series(step)
   end
   data
 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
@@ -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>
