diff --git a/demo_rails/app/assets/javascripts/highcharts_css.coffee b/demo_rails/app/assets/javascripts/highcharts_css.coffee new file mode 100644 index 0000000..24f83d1 --- /dev/null +++ b/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/ diff --git a/demo_rails/app/assets/stylesheets/highcharts_css.scss b/demo_rails/app/assets/stylesheets/highcharts_css.scss new file mode 100644 index 0000000..7dbe716 --- /dev/null +++ b/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/ diff --git a/demo_rails/app/controllers/highcharts_css_controller.rb b/demo_rails/app/controllers/highcharts_css_controller.rb new file mode 100644 index 0000000..011256c --- /dev/null +++ b/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 diff --git a/demo_rails/app/helpers/highcharts_css_helper.rb b/demo_rails/app/helpers/highcharts_css_helper.rb new file mode 100644 index 0000000..9301b10 --- /dev/null +++ b/demo_rails/app/helpers/highcharts_css_helper.rb @@ -0,0 +1,2 @@ +module HighchartsCssHelper +end diff --git a/demo_rails/app/views/highcharts_css/highcharts_css.erb b/demo_rails/app/views/highcharts_css/highcharts_css.erb new file mode 100644 index 0000000..56de25d --- /dev/null +++ b/demo_rails/app/views/highcharts_css/highcharts_css.erb @@ -0,0 +1,27 @@ +

Line Graph - Grey Background using CSS

+

+ Data : + <%=raw @line_graph.chart.series_data %> +
+ Options + <%=raw @line_graph.chart.options %> +
+ Chart : +
+ <%=raw @line_graph.div %> +

+
+ +

Column Graph - Different styling using CSS

+

+ Data : + <%=raw @column_graph.chart.series_data %> +
+ Options + <%=raw @column_graph.chart.options %> +
+ Chart : +
+ <%=raw @column_graph.div %> +

+
\ No newline at end of file diff --git a/demo_rails/config/routes.rb b/demo_rails/config/routes.rb index 3db83c4..1fd1a0a 100644 --- a/demo_rails/config/routes.rb +++ b/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 diff --git a/demo_rails/test/controllers/highcharts_css_controller_test.rb b/demo_rails/test/controllers/highcharts_css_controller_test.rb new file mode 100644 index 0000000..4e3470a --- /dev/null +++ b/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