Add option to defer chart creation until after page load

Closes #5

See ankane/chartkick#285

lib/chartkick.ex

@@ -21,21 +21,29 @@ defmodule Chartkick do
     height = Keyword.get(options, :height, "300px")
     width  = Keyword.get(options, :width, "100%")
     only   = Keyword.get(options, :only)
+    defer  = Keyword.get(options, :defer, false)
     case only do
       :html   -> chartkick_tag(id, height, width)
-      :script -> chartkick_script(klass, id, data_source, options_json(options))
+      :script -> chartkick_script(klass, id, data_source, options_json(options), defer)
       _       -> """
                  #{ chartkick_tag(id, height, width) }
-                 #{ chartkick_script(klass, id, data_source, options_json(options)) }
+                 #{ chartkick_script(klass, id, data_source, options_json(options), defer) }
                  """
     end
   end
 
   EEx.function_from_string(
     :def,
     :chartkick_script,
-    ~s[<script type="text/javascript">new Chartkick.<%= klass %>('<%= id %>', <%= data_source %>, <%= options_json %>);</script>],
-    ~w(klass id data_source options_json)a
+    ~s[<script type="text/javascript">
+      <%= if defer do
+          chartkick_defer_create_js(klass, id, data_source, options_json)
+        else
+          chartkick_create_js(klass, id, data_source, options_json)
+        end
+      %>
+    </script>],
+    ~w(klass id data_source options_json defer)a
   )
 
   EEx.function_from_string(
@@ -45,6 +53,31 @@ defmodule Chartkick do
     ~w(id height width)a
   )
 
+  EEx.function_from_string(
+    :def,
+    :chartkick_create_js,
+    ~s[new Chartkick.<%= klass %>('<%= id %>', <%= data_source %>, <%= options_json %>);],
+    ~w(klass id data_source options_json)a
+  )
+
+  EEx.function_from_string(
+    :def,
+    :chartkick_defer_create_js,
+    ~s[
+      (function() {
+        var createChart = function() { <%= chartkick_create_js(klass, id, data_source, options_json) %> };
+        if (window.addEventListener) {
+          window.addEventListener("load", createChart, true);
+        } else if (window.attachEvent) {
+          window.attachEvent("onload", createChart);
+        } else {
+          createChart();
+        }
+      })();
+    ],
+    ~w(klass id data_source options_json)a
+  )
+
   @options ~w(colors curve dataset decimal discrete donut download label legend library max messages min points prefix refresh stacked suffix thousands title xtitle xtype ytitle)a
   defp options_json(opts) do
     opts

test/chartkick_test.exs

@@ -94,26 +94,44 @@ defmodule ChartkickTest do
   end
 
   test "chartkick_script contains script open tag" do
-    script = Chartkick.chartkick_script("", "", "{}", "{}")
+    script = Chartkick.chartkick_script("", "", "{}", "{}", false)
     expected = "<script type=\"text/javascript\">"
     assert String.contains?(script, expected)
   end
 
   test "chartkick_script ends with closing script tag" do
-    script = Chartkick.chartkick_script("", "", "{}", "{}")
+    script = Chartkick.chartkick_script("", "", "{}", "{}", false)
     expected = "</script>"
     assert String.ends_with?(script, expected)
   end
 
+  test "chartkick_script defer adds event listener JS code" do
+    script = Chartkick.chartkick_script("LineChart", "", "{}", "{}", true)
+    expected = "window.addEventListener(\"load\", createChart, true);"
+    assert String.contains?(script, expected)
+  end
+
+  test "chartkick_script defer adds createChart JS function" do
+    script = Chartkick.chartkick_script("LineChart", "", "{}", "{}", true)
+    expected = "var createChart = function() { new Chartkick.LineChart('', {}, {}); };"
+    assert String.contains?(script, expected)
+  end
+
+  test "chartkick_script defer returns script with correct chart class" do
+    script = Chartkick.chartkick_script("LineChart", "", "{}", "{}", true)
+    expected = "new Chartkick.LineChart"
+    assert String.contains?(script, expected)
+  end
+
   test "chartkick_script returns script with correct chart class" do
-    script = Chartkick.chartkick_script("LineChart", "", "{}", "{}")
+    script = Chartkick.chartkick_script("LineChart", "", "{}", "{}", false)
     expected = "new Chartkick.LineChart"
     assert String.contains?(script, expected)
   end
 
   test "chartkick_script returns script with custom id set" do
     id = "my-chart-id"
-    script = Chartkick.chartkick_script("klass", id, "{}", "{}")
+    script = Chartkick.chartkick_script("klass", id, "{}", "{}", false)
     expected  = "new Chartkick.klass('#{id}"
     assert String.contains?(script, expected)
   end
@@ -124,6 +142,12 @@ defmodule ChartkickTest do
     assert String.contains?(script, expected)
   end
 
+  test "chartkick_chart with chart defer option" do
+    script = Chartkick.chartkick_chart("", "{}", defer: true)
+    expected = "window.addEventListener(\"load\", createChart, true);"
+    assert String.contains?(script, expected)
+  end
+
   test "chartkick_chart with chart library option" do
     script = Chartkick.chartkick_chart("", "{}", library: %{ backgroundColor: "#eee" })
     expected  = "{\"library\":{\"backgroundColor\":\"#eee\"}}"