svg-graph 2.1.1 → 2.2.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
-SHA1:
-  metadata.gz: a522ee6da8f411c886cf522dca6e8ab1a6e6dc4b
-  data.tar.gz: 917c7446f2d06edc9ba644948d17f3cb63f3e446
+SHA256:
+  metadata.gz: c6eaa56f94856a998ecd2f0befef3a38c5529da886266cd15150cf4e9758168f
+  data.tar.gz: f9eb26d8c758153505d95d450e57c3fa0dfbfcdd9018d89bb6bcee3b656cebff
 SHA512:
-  metadata.gz: 149a97802da1b358eb5fa43d77066c3c1950b644dcc5ae817f360c64b3045ea7d56505590fa0bd4144c22e342829c0e1bda59a3960b4557d2e52172a18f5a608
-  data.tar.gz: bfe772c7f4b72975960645206f3283250878c9d83da249c237b9baf4eca0d8b79ba5107acaa189c9f455c7e05709343666372bdd583c950e6fa74cd6e0713925
+  metadata.gz: 5c77c61810a9d855bc469ac4672d9917f0bbb345b5464235c0a06e9d901aa796c8cba67c12e181200ca3865ea2ce9629d8ae39065aec831b77c707fdc46720d4
+  data.tar.gz: d270039fc1ea0340a515f554c4ff1f6437d0138c62ff09daafb5c1599df819d096ab04ffa23fe8862cac16b4bd6fcc71efea973e001fa97cfd1e5058e7444a82

data/History.txt

@@ -1,6 +1,40 @@
 TODO / Backlog
-* add unit tests for all types of graphs
 * refactor various hardcoded constant pixel offsets in Graph class to use named constants or variables
+* Fix bug in Plot where min/max_x/y_value are not respected, TODO
+
+=== 2.2.1 / 2020-12-25
+* Remove inline styling for data point labels and popups [thanks marnen, PR #23]
+* fix #29 text background not aligned close to axis due to missing anchors
+* add & document  :shape and :url hash keys for `add_data` [thanks t12nslookup, PR #32]
+* add custom datapoint support to Line graphs
+* Add white text behind popup text so that the black text is more readable [thanks t12nslookup, PR #30]
+* fix #19 rotated lables should no longer be cropped or overlapping
+
+=== 2.2.0 / 2019-11-26
+* on top of 2.2.0.beta adds the following
+* Fixed Divizion by zero when data is 0,0 in Pie [thanks chrismedrdz, PR #16]
+* Automatically render graphs in iruby [thanks dansbits, PR #14]
+
+=== 2.2.0.beta / 2019-05-07
+* Fix typo in Plot's `scale_y_integers` [thanks ashleydavies, PR #9]
+* Fix bug in Plot which enabled too-short axis [thanks ashleydavies, PR #10]
+* Fix issue where horizontal bar graphs were not lined up properly [thanks erullmann]
+* removed some outdated documentation and uneeded files
+* add support for c3js / d3js based graphs `SVG::Graph::C3js`, see http://c3js.org/
+* add *very* basic unit tests for all types of graphs
+* add :show_percent for Bar graphs [thanks  Cameron2920]
+* add :inline_style_sheet  parameter for all graphs to allow inline css instead of specifying external stylesheets via url [thanks erullmann]
+* add parameters to control the key  :key_box_size, :key_spacing, :key_width  [thanks erullmann]
+* add support for X and Y label rotation to be different than 90 degree [thanks frenkel, PR #12]
+
+=== 2.1.3 / 2017-12-27
+* fixes float comparison and color for pie chart [thanks tiwi, pull request #7]
+
+=== 2.1.2 / 2017-02-26
+* show_key_actual_values in pie chart lets user chose to show values in key [thanks olegsfinest, pull request #5]
+
+=== 2.1.1 / 2017-02-26
+* Bar graphs are rounding bars to nearest Y axis label number [thanks adamalbrecht, pull request #4]
 
 === 2.1.0 / 2017-02-26 [lumean]
 * [#2] change behavior for number format, Strings axis labels will never be formatted

data/{README.markdown → README.md}

@@ -1,9 +1,14 @@
 SVG::Graph
 ============
 
+[![Build Status](https://travis-ci.com/lumean/svg-graph2.svg?branch=master)](https://travis-ci.com/lumean/svg-graph2)
+[![Maintainability](https://api.codeclimate.com/v1/badges/0a2b2d977bb9a43f488a/maintainability)](https://codeclimate.com/github/lumean/svg-graph2/maintainability)
+[![Test Coverage](https://api.codeclimate.com/v1/badges/0a2b2d977bb9a43f488a/test_coverage)](https://codeclimate.com/github/lumean/svg-graph2/test_coverage)
+[![This project is using Percy.io for visual regression testing.](https://percy.io/static/images/percy-badge.svg)](https://percy.io/a5e00e98/svg-graph2)
+
 Description
 -----------
-This is an effort to revive the [SVG::Graph library](http://www.germane-software.com/software/SVG/SVG::Graph/) by Sean Russell. I'd also like to thank Claudio Bustos for giving me permissions to continue publishing the gem under it's original name: [svg-graph](https://rubygems.org/gems/svg-graph)
+This repo is the continuation of the original [SVG::Graph library](http://www.germane-software.com/software/SVG/SVG::Graph/) by Sean Russell. I'd like to thank Claudio Bustos for giving me permissions to continue publishing the gem under it's original name: [svg-graph](https://rubygems.org/gems/svg-graph)
 
 [Changelog](../master/History.txt)
 
@@ -37,7 +42,7 @@ require 'SVG/Graph/Bar'
 
 x_axis = ['1-10', '10-30', '30-50', '50-70', 'older']
 
-options = {  
+options = {
   :width             => 640,
   :height            => 300,
   :stack             => :side,  # the stack option is valid for Bar graphs only
@@ -66,7 +71,7 @@ g.add_data( {
     :title => "Male"
   })
 
-# graph.burn            # this returns a full valid xml document containing the graph  
+# graph.burn            # this returns a full valid xml document containing the graph
 # graph.burn_svg_only   # this only returns the <svg>...</svg> node
 File.open('bar.svg', 'w') {|f| f.write(g.burn_svg_only)}
 ```
@@ -100,12 +105,28 @@ File.open('bar.svg', 'w') {|f| f.write(g.burn_svg_only)}
 
 ![example timeseries graph](https://cdn.rawgit.com/lumean/svg-graph2/master/examples/timeseries.svg)
 
-Also have a look at the original [SVG::Graph web page](http://www.germane-software.com/software/SVG/SVG::Graph/), but note that this repository has already added some additional functionality, not available with the original.
+### C3js
+
+Source: [C3js.rb](../master/examples/c3js.rb)
+
+[Link to Preview](https://cdn.rawgit.com/lumean/svg-graph2/master/examples/c3js.html)
+
 
 Build
 -----
+* Test
+
+`bundle exec rake`
 
 * Build gem:
- *  gem build svg-graph.gemspec
+
+`gem build svg-graph.gemspec`
+
 * Install:
- *  gem install svg-graph-\<version>.gem
+
+`gem install svg-graph-\<version>.gem`
+
+Percy.io integration
+---
+https://docs.percy.io/docs/travis-ci
+https://docs.percy.io/docs/snapshot-cli-command

data/Rakefile

@@ -21,11 +21,22 @@
 #  self.remote_rdoc_dir = 'svg-graph'
 #end
 
-# run all unit tests with 'rake test'
-task default: %w[test]
+# by default run all unit tests with 'rake test'
+task default: [:test]
 
 task :test do
-  ruby "test/test_data_point.rb"
-  ruby "test/test_plot.rb"
-  ruby "test/test_svg_graph.rb"
+  [
+    "test/test_data_point.rb",
+    "test/test_plot.rb",
+    "test/test_svg_graph.rb",
+    "test/test_graph.rb",
+    "test/run_examples_and_percy.io.rb"
+  ].each do |file|
+    # exec all above scripts (with simplecov if env is set)
+    args = file
+    if ENV['COVERAGE']
+      args = '-r ./test/simplecov ' + file
+    end
+    ruby args
+  end
 end

data/lib/SVG/Graph/Bar.rb

@@ -110,6 +110,10 @@ module SVG
         @config[:fields].each_index { |i|
           dataset_count = 0
           for dataset in @data
+            total = 0
+            dataset[:data].each {|x|
+              total += x
+            }
 
             # cases (assume 0 = +ve):
             #   value  min  length
@@ -133,10 +137,13 @@ module SVG
               "height" => length.to_s,
               "class" => "fill#{dataset_count+1}"
             })
-
-            make_datapoint_text(left + bar_width/2.0, top - font_size/2, dataset[:data][i])
+            value_string = ""
+            value_string += (@number_format % dataset[:data][i]) if show_actual_values
+            percent = 100.0 * dataset[:data][i] / total
+            value_string += " (" + percent.round.to_s + "%)" if show_percent
+            make_datapoint_text(left + bar_width/2.0, top - font_size/2, value_string)
             # number format shall not apply to popup (use .to_s conversion)
-            add_popup(left + bar_width/2.0, top , dataset[:data][i].to_s)
+            add_popup(left + bar_width/2.0, top , value_string)
             dataset_count += 1
           end
           field_count += 1

data/lib/SVG/Graph/BarBase.rb

@@ -28,7 +28,7 @@ module SVG
       # [bar_gap] true
       # [stack] :overlap
       def set_defaults
-        init_with( :bar_gap => true, :stack => :overlap )
+        init_with( :bar_gap => true, :stack => :overlap, :show_percent => false, :show_actual_values => true)
       end
 
       #   Whether to have a gap between the bars or not, default
@@ -38,22 +38,26 @@ module SVG
       #   transparent colors, :top stacks bars on top of one another,
       #   :side stacks the bars side-by-side. Defaults to :overlap.
       attr_accessor :stack
+      # If true, display the percentage value of each bar. Default: false
+      attr_accessor :show_percent
+      # If true, display the actual field values in the data labels. Default: true
+      attr_accessor :show_actual_values
       protected
-      
+
       # space in px between x-labels, we override the Graph version because
       # we need the extra space (i.e. don't subtract 1 from get_x_labels.length)
       def field_width
-        # don't use -1 otherwise bar is out of bounds        
+        # don't use -1 otherwise bar is out of bounds
         @graph_width.to_f / ( get_x_labels.length )
       end
-      
+
       def max_value
         @data.collect{|x| x[:data].max}.max
       end
 
       def min_value
         min = 0
-        if min_scale_value.nil? 
+        if min_scale_value.nil?
           min = @data.collect{|x| x[:data].min}.min
           # by default bar should always start from zero unless there are negative values
           min = min > 0 ? 0 : min
@@ -70,73 +74,73 @@ module SVG
 	fill: #ff0000;
 	fill-opacity: 0.5;
 	stroke: none;
-	stroke-width: 0.5px;	
+	stroke-width: 0.5px;
 }
 .key2,.fill2{
 	fill: #0000ff;
 	fill-opacity: 0.5;
 	stroke: none;
-	stroke-width: 1px;	
+	stroke-width: 1px;
 }
 .key3,.fill3{
 	fill: #00ff00;
 	fill-opacity: 0.5;
 	stroke: none;
-	stroke-width: 1px;	
+	stroke-width: 1px;
 }
 .key4,.fill4{
 	fill: #ffcc00;
 	fill-opacity: 0.5;
 	stroke: none;
-	stroke-width: 1px;	
+	stroke-width: 1px;
 }
 .key5,.fill5{
 	fill: #00ccff;
 	fill-opacity: 0.5;
 	stroke: none;
-	stroke-width: 1px;	
+	stroke-width: 1px;
 }
 .key6,.fill6{
 	fill: #ff00ff;
 	fill-opacity: 0.5;
 	stroke: none;
-	stroke-width: 1px;	
+	stroke-width: 1px;
 }
 .key7,.fill7{
 	fill: #00ffff;
 	fill-opacity: 0.5;
 	stroke: none;
-	stroke-width: 1px;	
+	stroke-width: 1px;
 }
 .key8,.fill8{
 	fill: #ffff00;
 	fill-opacity: 0.5;
 	stroke: none;
-	stroke-width: 1px;	
+	stroke-width: 1px;
 }
 .key9,.fill9{
 	fill: #cc6666;
 	fill-opacity: 0.5;
 	stroke: none;
-	stroke-width: 1px;	
+	stroke-width: 1px;
 }
 .key10,.fill10{
 	fill: #663399;
 	fill-opacity: 0.5;
 	stroke: none;
-	stroke-width: 1px;	
+	stroke-width: 1px;
 }
 .key11,.fill11{
 	fill: #339900;
 	fill-opacity: 0.5;
 	stroke: none;
-	stroke-width: 1px;	
+	stroke-width: 1px;
 }
 .key12,.fill12{
 	fill: #9966FF;
 	fill-opacity: 0.5;
 	stroke: none;
-	stroke-width: 1px;	
+	stroke-width: 1px;
 }
 EOL
       end

data/lib/SVG/Graph/BarHorizontal.rb

@@ -110,14 +110,18 @@ module SVG
         bar_height = fieldheight - bargap
         bar_height /= @data.length if stack == :side
         y_mod = (bar_height / 2) + (font_size / 2)
-
         field_count = 1
+
         @config[:fields].each_index { |i|
           dataset_count = 0
           for dataset in @data
+            total = 0
+            dataset[:data].each {|x|
+              total += x
+            }
             value = dataset[:data][i]
 
-            top = @graph_height - (fieldheight * field_count) + bargap
+            top = @graph_height - (fieldheight * field_count) + (bargap/2)
             top += (bar_height * dataset_count) if stack == :side
             # cases (assume 0 = +ve):
             #   value  min  length          left
@@ -134,10 +138,13 @@ module SVG
               "height" => bar_height.to_s,
               "class" => "fill#{dataset_count+1}"
             })
-
-            make_datapoint_text(left+length+5, top+y_mod, dataset[:data][i], "text-anchor: start; ")
+            value_string = ""
+            value_string += (@number_format % dataset[:data][i]) if show_actual_values
+            percent = 100.0 * dataset[:data][i] / total
+            value_string += " (" + percent.round.to_s + "%)" if show_percent
+            make_datapoint_text(left+length+5, top+y_mod, value_string, "text-anchor: start; ")
             # number format shall not apply to popup (use .to_s conversion)
-            add_popup(left+length, top+y_mod , dataset[:data][i].to_s)
+            add_popup(left+length, top+y_mod , value_string)
             dataset_count += 1
           end
           field_count += 1

data/lib/SVG/Graph/C3js.rb

@@ -0,0 +1,274 @@
+require 'rexml/document'
+require 'json'
+
+module SVG
+  module Graph
+
+    # This class provides a lightweight generator for html code indluding c3js based
+    # graphs specified as javascript.
+    class C3js
+
+      # By default, the generated html code links the javascript and css dependencies
+      # to the d3 and c3 libraries in the <head> element. The latest versions of d3 and c3 available
+      # at the time of gem release are used through cdnjs.
+      # Custom versions of d3 and c3 can easily be used by specifying the corresponding keys
+      # in the optional Hash argument.
+      #
+      # If the dependencies are http(s) urls a simple href / src link is inserted in the
+      # html header.
+      # If you want to create a fully offline capable html file, you can do this by
+      # downloading the (minified) versions of d3.js, c3.css, c3.js to disk and then
+      # point to the files instead of http links. This will then inline the complete
+      # script and css payload directly into the generated html page.
+      #
+      #
+      # @option opts [String] "inline_dependencies" if true will inline the script and css
+      #                       parts of d3 and c3 directly into html, otherwise they are referred
+      #                       as external dependencies. default: false
+      # @option opts [String] "d3_js"  url or path to local files. default: d3.js url via cdnjs
+      # @option opts [String] "c3_css" url or path to local files. default: c3.css url via cdnjs
+      # @option opts [String] "c3_js"  url or path to local files. default: c3.js url via cdnjs
+      # @example create a simple graph
+      #   my_graph = SVG::Graph::C3js.new("my_funny_chart_var")
+      # @example create a graph with custom version of C3 and D3
+      #   # use external dependencies
+      #   opts = {
+      #     "d3_js"  => "https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js",
+      #     "c3_css" => "https://cdnjs.cloudflare.com/ajax/libs/c3/0.6.8/c3.min.css",
+      #     "c3_js"  => "https://cdnjs.cloudflare.com/ajax/libs/c3/0.6.8/c3.min.js"
+      #   }
+      #   # or inline dependencies into generated html
+      #   opts = {
+      #     "inline_dependencies" => true,
+      #     "d3_js"  => "/path/to/local/copy/of/d3.min.js",
+      #     "c3_css" => "/path/to/local/copy/of/c3.min.css",
+      #     "c3_js"  => "/path/to/local/copy/of/c3.min.js"
+      #   }
+      #   my_graph = SVG::Graph::C3js.new("my_funny_chart_var", opts)
+      def initialize(opts = {})
+        default_opts = {
+          "inline_dependencies" => false,
+          "d3_js"  => "https://cdnjs.cloudflare.com/ajax/libs/d3/5.12.0/d3.min.js",
+          "c3_css" => "https://cdnjs.cloudflare.com/ajax/libs/c3/0.7.11/c3.min.css",
+          "c3_js"  => "https://cdnjs.cloudflare.com/ajax/libs/c3/0.7.11/c3.min.js"
+        }
+        @opts = default_opts.merge(opts)
+        if @opts["inline_dependencies"]
+          # we replace the values in the opts Hash by the referred file contents
+          ["d3_js", "c3_css", "c3_js"].each do |key|
+            if !File.file?(@opts[key])
+              raise "opts[\"#{key}\"]: No such file - #{File.expand_path(@opts[key])}"
+            end
+            @opts[key] = File.read(@opts[key])
+          end # ["d3_js", "c3_css", "c3_js"].each
+        end # if @opts["inline_dependencies"]
+        start_document()
+      end # def initialize
+
+      # Adds a javascript/json C3js chart definition into the div tag
+      # @param javascript [String, Hash] see example
+      # @param js_chart_variable_name [String] only needed if the `javascript` parameter is a Hash.
+      #    unique variable name representing the chart in javascript scope.
+      #    Note this is a global javascript "var" so make sure to avoid name clashes
+      #    with other javascript us might use on the same page.
+      #
+      # @raise
+      # @example
+      #   # see http://c3js.org/examples.html
+      #   # since ruby 2.3 you can use string symbol keys:
+      #   chart_spec = {
+      #     # bindto is mandatory
+      #     "bindto": "#this_is_my_awesom_graph",
+      #     "data": {
+      #       "columns": [
+      #           ['data1', 30, 200, 100, 400, 150, 250],
+      #           ['data2', 50, 20, 10, 40, 15, 25]
+      #       ]
+      #   }
+      #   # otherwise simply write plain javascript into a heredoc string:
+      #   # make sure to include the  var <chartname> = c3.generate() if using heredoc
+      #   chart_spec_string =<<-HEREDOC
+      #   var mychart1 = c3.generate({
+      #     // bindto is mandatory
+      #     "bindto": "#this_is_my_awesom_graph",
+      #     "data": {
+      #       "columns": [
+      #           ['data1', 30, 200, 100, 400, 150, 250],
+      #           ['data2', 50, 20, 10, 40, 15, 25]
+      #       ]
+      #   });
+      #   HEREDOC
+      #   graph.add_chart_spec(chart_spec, "my_chart1")
+      #   # or
+      #   graph.add_chart_spec(chart_spec_string)
+      def add_chart_spec(javascript, js_chart_variable_name = "")
+        if javascript.kind_of?(Hash)
+          if js_chart_variable_name.to_s.empty? || js_chart_variable_name.to_s.match(/\s/)
+            raise "js_chart_variable_name ('#{js_chart_variable_name.to_s}') cannot be empty or contain spaces, " +
+                  "a valid javascript variable name is needed."
+          end
+          chart_spec = JSON(javascript)
+          inline_script = "var #{js_chart_variable_name} = c3.generate(#{chart_spec});"
+        elsif javascript.kind_of?(String)
+          inline_script = javascript
+          if !inline_script.match(/c3\.generate/)
+            raise "var <chartname> = c3.generate({...}) statement is missing in javascript string"
+          end
+        else
+          raise "Unsupported argument type: #{javascript.class}"
+        end
+        # (.+?)" means non-greedy match up to next double quote
+        if m = inline_script.match(/"bindto":\s*"#(.+?)"/)
+          @bindto = m[1]
+        else
+          raise "Missing chart specification is missing the mandatory \"bindto\" key/value pair."
+        end
+        add_div_element_for_graph()
+        add_javascript() {inline_script}
+      end # def add_chart_spec
+
+      # Appends a <script> element to the <div> element, this can be used to add additional animations
+      # but any script can also directly be part of the js_chart_specification in the #add_chart_spec
+      # method when you use a HEREDOC string as input.
+      # @param attrs [Hash] attributes for the <script> element. The following attribute
+      #   is added by default:  type="text/javascript"
+      # @yieldreturn [String] the actual javascript code to be added to the <script> element
+      # @return [REXML::Element] the Element which was just added
+      def add_javascript(attrs={}, &block)
+        default_attrs = {"type" => "text/javascript"}
+        attrs = default_attrs.merge(attrs)
+        temp = REXML::Element.new("script")
+        temp.add_attributes(attrs)
+        @svg.add_element(temp)
+        raise "Block argument is mandatory" unless block_given?
+        script_content = block.call()
+        cdata(script_content, temp)
+      end # def add_javascript
+
+
+      # @return [String] the complete html file
+      def burn
+        f = REXML::Formatters::Pretty.new(0)
+        out = ''
+        f.write(@doc, out)
+        out
+      end # def burn
+
+      # Burns the graph but returns only the <div> node as String without the
+      # Doctype and XML / HTML Declaration. This allows easy integration into
+      # existing xml/html documents. The Javascript to create the C3js graph
+      # is inlined into the div tag.
+      #
+      # You have to take care to refer the proper C3 and D3 dependencies in your
+      # html page.
+      #
+      # @return [String] the div element into which the graph will be rendered
+      #    by C3.js
+      def burn_svg_only
+        # initialize all instance variables by burning the graph
+        burn
+        f = REXML::Formatters::Pretty.new(0)
+        f.compact = true
+        out = ''
+        f.write(@svg, out)
+        return out
+      end # def burn_svg_only
+
+      private
+
+      # Appends a <style> element to the <div> element, this can be used to add additional animations
+      # but any script can also directly be part of the js_chart_specification in the #add_chart_spec
+      # method when you use a HEREDOC string as input.
+      # @yieldreturn [String] the actual javascript code to be added to the <script> element
+      # @return [REXML::Element] the Element which was just added
+      def add_css_to_head(&block)
+        raise "Block argument is mandatory" unless block_given?
+        css_content_or_url = block.call()
+        if @opts["inline_dependencies"]
+          # for inline css use "style"
+          temp = REXML::Element.new("style")
+          attrs = {
+            "type" => "text/css"
+          }
+          cdata(css_content_or_url, temp)
+        else
+          # for external css use "link"
+          temp = REXML::Element.new("link")
+          attrs = {
+            "href" => @opts["c3_css"],
+            "rel" => "stylesheet"
+          }
+        end
+        temp.add_attributes(attrs)
+        @head.add_element(temp)
+      end # def add_css_to_head
+
+      # Appends a <script> element to the <head> element, this can be used to add
+      # the dependencies/libraries.
+      # @yieldreturn [String] the actual javascript code to be added to the <script> element
+      # @return [REXML::Element] the Element which was just added
+      def add_js_to_head(&block)
+        raise "Block argument is mandatory" unless block_given?
+        script_content_or_url = block.call()
+        attrs = {"type" => "text/javascript"}
+        temp = REXML::Element.new("script")
+        if @opts["inline_dependencies"]
+          cdata(script_content_or_url, temp)
+        else
+          attrs["src"] = script_content_or_url
+          # note: self-closing xml script tags are not allowed in html. Only for xhtml this is ok.
+          # Thus add a space textnode to enforce closing tags.
+          temp.add_text(" ")
+        end
+        temp.add_attributes(attrs)
+        @head.add_element(temp)
+      end # def add_js_to_head
+
+      def start_document
+        # Base document
+        @doc = REXML::Document.new
+        @doc << REXML::XMLDecl.new("1.0", "UTF-8")
+        @doc << REXML::DocType.new("html")
+        # attribute xmlns is needed, otherwise the browser will only display raw xml
+        # instead of rendering the page
+        @html = @doc.add_element("html", {"xmlns" => 'http://www.w3.org/1999/xhtml'})
+        @html << REXML::Comment.new( " "+"\\"*66 )
+        @html << REXML::Comment.new( " Created with SVG::Graph - https://github.com/lumean/svg-graph2" )
+        @head = @html.add_element("head")
+        @body = @html.add_element("body")
+        @head.add_element("meta", {"charset" => "utf-8"})
+        add_js_to_head() {@opts["d3_js"]}
+        add_css_to_head() {@opts["c3_css"]}
+        add_js_to_head() {@opts["c3_js"]}
+      end # def start_svg
+
+      # @param attrs [Hash] html attributes for the <div> tag to which svg graph
+      #                     is bound to by C3js. The "id" attribute
+      #                     is filled automatically by this method. default: an empty hash {}
+      def add_div_element_for_graph(attrs={})
+        if @bindto.to_s.empty?
+          raise "#add_chart_spec needs to be called before the svg can be added"
+        end
+        attrs["id"] = @bindto
+        @svg = @body.add_element("div", attrs)
+      end
+
+      # Surrounds CData tag with c-style comments to remain compatible with normal html.
+      # This can be used to inline arbitrary javascript code and is compatible with many browsers.
+      # Example /*<![CDATA[*/\n ...content ... \n/*]]>*/
+      # @param str [String] the string to be enclosed in cdata
+      # @param parent_element [REXML::Element] the element to which cdata should be added
+      # @return [REXML::Element] parent_element
+      def cdata(str, parent_element)
+        # somehow there is a problem with CDATA, any text added after will automatically go into the CDATA
+        # so we have do add a dummy node after the CDATA and then add the text.
+        parent_element.add_text("/*")
+        parent_element.add(REXML::CData.new("*/\n"+str+"\n/*"))
+        parent_element.add(REXML::Comment.new("dummy comment to make c-style comments for cdata work"))
+        parent_element.add_text("*/")
+      end # def cdata
+
+    end # class C3js
+
+  end # module Graph
+end # module SVG