From a84fb3a90db22f12a8bab93f7658d5c728ca4a3a Mon Sep 17 00:00:00 2001
From: Walker Waylon Scott <walker_waylon_s@cat.com>
Date: Wed, 28 Jun 2017 21:05:15 -0500
Subject: [PATCH] feat(c3) Added C3 Example

Added c3 example using c3.load(JSON) to reload the data\
---
 app/app.py                         |  19 +++-
 app/templates/c3.html              |  18 ++++
 app/templates/c3_head_scripts.html |   6 ++
 app/templates/c3_update.js         | 154 +++++++++++++++++++++++++++++
 app/templates/home.html            |   3 +-
 5 files changed, 198 insertions(+), 2 deletions(-)
 create mode 100644 app/templates/c3.html
 create mode 100644 app/templates/c3_head_scripts.html
 create mode 100644 app/templates/c3_update.js

diff --git a/app/app.py b/app/app.py
index f98c727..40e0d11 100644
--- a/app/app.py
+++ b/app/app.py
@@ -103,6 +103,14 @@ def chartist():
     scripts = render_template('chartist.js')
     return render_template('home.html', head_scripts=head_scripts, body=body, scripts=scripts)
 
+@app.route('/c3', methods=['GET', 'POST'])
+def c3_route():
+    form = MyForm()
+    head_scripts = render_template('c3_head_scripts.html')
+    body = render_template('c3.html', form=form)
+    scripts = render_template('c3_update.js')
+    return render_template('home.html', head_scripts=head_scripts, body=body, scripts=scripts)
+
 @app.route('/chartist1', methods=['GET', 'POST'])
 def chartist1():
     form = MyForm()
@@ -129,6 +137,15 @@ def pybokeh(nation):
     return jsonify({'script': script,
                    'div': div})
 
+@app.route('/c3data/<string:nation>')
+def c3_daata_route(nation):
+
+    data = {'columns':[[nation] + df2[nation].astype(float).tolist(), ['x'] + df2.index.astype(float).tolist()],
+    'colors': {nation: '#4286f4'},
+    'unload': "",}
+    return jsonify(data)
+
+
 if __name__ == '__main__':
     port = int(os.environ.get("PORT", 5000))
-    app.run(host='0.0.0.0', port=port)
\ No newline at end of file
+    app.run(host='0.0.0.0', port=port, debug=True)
\ No newline at end of file
diff --git a/app/templates/c3.html b/app/templates/c3.html
new file mode 100644
index 0000000..2735329
--- /dev/null
+++ b/app/templates/c3.html
@@ -0,0 +1,18 @@
+{% from "_render_field.html" import render_field %}
+
+
+<h1>Population by Nation</h1><br>
+data from 
+<a href="https://data.world/nrippner/population-by-country1980-2010">data.world</a>
+<br><br>
+Created with Flask and python c3
+
+<span class='nation' value='nation'></span>
+
+
+<fieldset>
+  <legend>World Population</legend>
+{{ render_field(form.nation) }}
+  
+
+<div id='chart' style='width: 100%; height: 100%'></div>
diff --git a/app/templates/c3_head_scripts.html b/app/templates/c3_head_scripts.html
new file mode 100644
index 0000000..d65a2f0
--- /dev/null
+++ b/app/templates/c3_head_scripts.html
@@ -0,0 +1,6 @@
+<link href='https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.10/c3.min.css' rel='stylesheet' type='text/css'/>
+
+<!-- Load d3.js and c3.js -->
+<script src='http://d3js.org/d3.v3.min.js' charset='utf-8'></script>
+<script src='http://cdnjs.cloudflare.com/ajax/libs/c3/0.4.10/c3.min.js'></script>
+<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
\ No newline at end of file
diff --git a/app/templates/c3_update.js b/app/templates/c3_update.js
new file mode 100644
index 0000000..d252a5a
--- /dev/null
+++ b/app/templates/c3_update.js
@@ -0,0 +1,154 @@
+var data = {
+    'size': {
+        'height': 300
+    },
+    'data': {
+        'x': 'x',
+        'type': 'line',
+        'axes': {
+            'Australia': 'y',
+            'x': 'y'
+        },
+        'columns': [
+        [
+        'Australia',
+        '14.6159',
+        '14.92326',
+        '15.16178',
+        '15.34807',
+        '15.51048',
+        '15.69524',
+        '15.90042',
+        '16.13672',
+        '16.40073',
+        '16.6806',
+        '16.95624',
+        '17.20212',
+        '17.41893',
+        '17.6078',
+        '17.78109',
+        '17.97563',
+        '18.19585',
+        '18.41526',
+        '18.62084',
+        '18.83025',
+        '19.05319',
+        '19.29426',
+        '19.53494',
+        '19.76654',
+        '19.99508',
+        '20.23235',
+        '20.48947',
+        '20.74963',
+        '21.00731',
+        '21.26264',
+        '21.51575'
+        ],
+        [
+        'x',
+        '1980',
+        '1981',
+        '1982',
+        '1983',
+        '1984',
+        '1985',
+        '1986',
+        '1987',
+        '1988',
+        '1989',
+        '1990',
+        '1991',
+        '1992',
+        '1993',
+        '1994',
+        '1995',
+        '1996',
+        '1997',
+        '1998',
+        '1999',
+        '2000',
+        '2001',
+        '2002',
+        '2003',
+        '2004',
+        '2005',
+        '2006',
+        '2007',
+        '2008',
+        '2009',
+        '2010'
+        ]
+        ]
+    },
+    'subchart': {
+        'show': false
+    },
+    'point': {
+        'show': false
+    },
+    'grid': {
+        'x': {
+            'show': false
+        },
+        'y': {
+            'show': false
+        }
+    },
+    'axis': {
+        'x': {
+            'tick': {
+                'count': 10
+            }
+        },
+        'y': {
+            'tick': {
+                'format': ''
+            }
+        },
+        'y2': {
+            'tick': {}
+        }
+    },
+    'zoom': {}
+};
+data['axis']['y']['tick']['format'] = d3.format('')
+data['axis']['y2']['tick']['format'] = d3.format('')
+data['bindto']='#chart'
+var chart = c3.generate(data);
+
+function load_data(country) {
+    var xhr = new XMLHttpRequest();
+
+    xhr.open('GET', 'http://127.0.0.1:5000/' + country);
+    xhr.send(null);
+    results = JSON.parse(xhr.responseText.result)
+    document.getElement
+    return data
+
+}
+
+
+
+function updateChart(){
+  var nation = $("#nation option:selected").text()
+
+  var updatedData = $.get('/c3data/'.concat(nation));
+  updatedData.done(function(results){
+
+  var data = {
+    labels: results.labels,
+    series: [
+      results.results
+      ]
+  };
+
+  chart.load(updatedData.responseJSON)
+  });
+
+}
+
+
+
+$( document ).ready(updateChart)
+// $('#update').on('click', updateChart)
+$('#nation').on('change', updateChart)
\ No newline at end of file
diff --git a/app/templates/home.html b/app/templates/home.html
index b0e55b8..2deaad1 100644
--- a/app/templates/home.html
+++ b/app/templates/home.html
@@ -39,9 +39,10 @@ body {margin:0;}
   <a href="/chartist">Chartist</a>
   <a href="/matplotlib">Matplotlib</a>
   <a href="/bokeh">bokeh</a>
+  <a href="/c3">c3</a>
 </div>
 
-{{ body | safe}}
+{{ body | safe }}
 
 </body>