Merge pull request #4 from Prakriti-nith/custom_css_highcharts

Added custom css in highcharts example

demo_rails/app/assets/javascripts/highcharts_css.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/highcharts_css.scss

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

demo_rails/app/controllers/highcharts_css_controller.rb

@@ -0,0 +1,86 @@
+class HighchartsCssController < ApplicationController
+  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)
+
+    render "highcharts_css" , layout: "highcharts_layout"
+  end
+end

demo_rails/app/helpers/highcharts_css_helper.rb

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

demo_rails/app/views/highcharts_css/highcharts_css.erb

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

demo_rails/config/routes.rb

@@ -4,5 +4,6 @@
   get '/highcharts', to: 'application#highcharts'
   get '/googlecharts', to: 'application#googlecharts'
   get '/datatables', to: 'application#datatables'
+  get '/highchartscss', to: 'highcharts_css#highcharts_css'
   get '/highchartstockmap', to: 'highchart_stock_map#highchart_stock_map'
 end

demo_rails/test/controllers/highcharts_css_controller_test.rb

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