diff --git a/jchart/jinja2/charting/async/chart.html b/jchart/jinja2/charting/async/chart.html
new file mode 100644
index 0000000..0717a80
--- /dev/null
+++ b/jchart/jinja2/charting/async/chart.html
@@ -0,0 +1,2 @@
+{{ html }}
+{{ js }}
\ No newline at end of file
diff --git a/jchart/jinja2/charting/async/html.html b/jchart/jinja2/charting/async/html.html
new file mode 100644
index 0000000..e79fca4
--- /dev/null
+++ b/jchart/jinja2/charting/async/html.html
@@ -0,0 +1,3 @@
+<div class="chart-container" style="position: relative; {% if chart.height %}height: {{ chart.height }}px;{% endif %} {% if chart.width %}width: {{ chart.width }}px{% endif %}">
+  <canvas class="chart" id="{{ html_id }}"></canvas>
+</div>
diff --git a/jchart/jinja2/charting/async/js.html b/jchart/jinja2/charting/async/js.html
new file mode 100644
index 0000000..cc37287
--- /dev/null
+++ b/jchart/jinja2/charting/async/js.html
@@ -0,0 +1,9 @@
+<script type="text/javascript">
+window.addEventListener("DOMContentLoaded", function() {
+    $.get('{{ url }}', function(configuration) {
+        var ctx = document.getElementById("{{ html_id }}").getContext("2d");    
+
+        new Chart(ctx, configuration);
+    });
+});
+</script>
\ No newline at end of file
diff --git a/jchart/jinja2/charting/chart.html b/jchart/jinja2/charting/chart.html
new file mode 100644
index 0000000..0c6cb4e
--- /dev/null
+++ b/jchart/jinja2/charting/chart.html
@@ -0,0 +1,2 @@
+{{ html|safe }}
+{{ js|safe }}
\ No newline at end of file
diff --git a/jchart/jinja2/charting/html.html b/jchart/jinja2/charting/html.html
new file mode 100644
index 0000000..e79fca4
--- /dev/null
+++ b/jchart/jinja2/charting/html.html
@@ -0,0 +1,3 @@
+<div class="chart-container" style="position: relative; {% if chart.height %}height: {{ chart.height }}px;{% endif %} {% if chart.width %}width: {{ chart.width }}px{% endif %}">
+  <canvas class="chart" id="{{ html_id }}"></canvas>
+</div>
diff --git a/jchart/jinja2/charting/js.html b/jchart/jinja2/charting/js.html
new file mode 100644
index 0000000..c733732
--- /dev/null
+++ b/jchart/jinja2/charting/js.html
@@ -0,0 +1,7 @@
+<script type="text/javascript">
+window.addEventListener("DOMContentLoaded", function() {
+    var ctx = document.getElementById("{{ html_id }}").getContext("2d");
+
+    new Chart(ctx, {{ chart_configuration|safe }});
+});
+</script>
\ No newline at end of file