Class: SVG::Graph::C3js

Inherits:
Object
  • Object
show all
Defined in:
lib/SVG/Graph/C3js.rb

Overview

This class provides a lightweight generator for html code indluding c3js based graphs specified as javascript.

Instance Method Summary collapse

Instance Method Details

#add_chart_spec(javascript, js_chart_variable_name = "") ⇒ Object

Adds a javascript/json C3js chart definition into the div tag

Examples:

# 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)

Parameters:

  • javascript (String, Hash) —

    see example

  • js_chart_variable_name (String) (defaults to: "") —

    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.

Raises:



104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
 
# File 'lib/SVG/Graph/C3js.rb', line 104

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

#add_javascript(attrs = {}, &block) ⇒ REXML::Element

Appends a

Returns the complete html file.

Returns:

  • (String) —

    the complete html file



150
151
152
153
154
155
 
# File 'lib/SVG/Graph/C3js.rb', line 150

def burn
  f = REXML::Formatters::Pretty.new(0)
  out = ''
  f.write(@doc, out)
  out
end

#burn_svg_only ⇒ String

Burns the graph but returns only the

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.

Returns:

  • (String) —

    the div element into which the graph will be rendered by C3.js



167
168
169
170
171
172
173
174
175
 
# File 'lib/SVG/Graph/C3js.rb', line 167

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