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