title: Pandas Highcharts - Display Chart with Flask
body: <p>I am having an issue with displaying a Highcharts with the Pandas_Highcharts library. I have spent numerous hours playing around with JSON inputs etc and can't manage to get a graph to display at all.</p>
  
  <p>Everytime I load the /graph on my browser I receive the the text "Test" but do not see any graph at all.</p>
  
  <p>Using Firefox, viewing the page source leads (I have edited out various entries in the data to comply with spacing) to this:</p>
  
  <pre><code>&lt;html&gt;
  &lt;link rel="stylesheet" media="screen" href = "/static/bootstrap.min.css"&gt;
  &lt;meta name="viewport" content = "width=device-width, initial-scale=1.0"&gt;
  &lt;head&gt;
  &lt;script type="text/javascript" src="http://ff.kis.scr.kaspersky-labs.com/1B74BD89-2A22-4B93-B451-1C9E1052A0EC/main.js" charset="UTF-8"&gt;&lt;/script&gt;&lt;/head&gt;
  
  &lt;body&gt;
      &lt;p&gt; Test &lt;/p&gt;
      &lt;div id="my-chart"&gt;&lt;/div&gt;
      &lt;script type="text/javascript"&gt;
          new Highcharts.Chart({"series":[{"data":[[1462838400000,2158372.6420299998],[1462752000000,1438419.8610100001],[1462665600000,667993.263726],[1462579200000,1825474.7086099999],[1462492800000,1908047.6404200001], [1304985600000,228989.8988]],"name":"Value","yAxis":0}],"yAxis":[{}],"chart":{"renderTo":"my-chart"},"xAxis":{"type":"datetime","title":{"text":"Date"}},"legend":{"enabled":true}});
      &lt;/script&gt;
          &lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"&gt;&lt;/script&gt;
          &lt;script src="http://code.highcharts.com/highcharts.js"&gt;&lt;/script&gt;
          &lt;script src="http://code.highcharts.com/modules/exporting.js"&gt;&lt;/script&gt;     
  &lt;/body&gt;
  
  &lt;/body&gt;
  &lt;script type = "text/javascript" src = "/static/bootstrap.min.js"&gt;&lt;/script&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Pandas Higcharts: <a href="https://github.com/gtnx/pandas-highcharts" rel="nofollow">https://github.com/gtnx/pandas-highcharts</a>
  It all looks so simple but why can't I make it work grr.</p>
  
  <p>I do not understand why the following code ceases to work:
  My relevant graph.html page:</p>
  
  <pre><code>&lt;html&gt;
  &lt;link rel="stylesheet" media="screen" href = "/static/bootstrap.min.css"&gt;
  &lt;meta name="viewport" content = "width=device-width, initial-scale=1.0"&gt;
  &lt;head&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
      &lt;p&gt; Test &lt;/p&gt;
      &lt;div id="my-chart"&gt;&lt;/div&gt;
      &lt;script type="text/javascript"&gt;
          new Highcharts.Chart({{chart|safe}});
      &lt;/script&gt;
          &lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"&gt;&lt;/script&gt;
          &lt;script src="http://code.highcharts.com/highcharts.js"&gt;&lt;/script&gt;
          &lt;script src="http://code.highcharts.com/modules/exporting.js"&gt;&lt;/script&gt;     
  &lt;/body&gt;
  
  &lt;/body&gt;
  &lt;script type = "text/javascript" src = "/static/bootstrap.min.js"&gt;&lt;/script&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>My flask python file contains the relevant @app.route('/graph')</p>
  
  <pre><code>from flask import Flask, render_template, request
  import pandas as pd
  import pandas_highcharts.core
  
  app = Flask(__name__)
  
  @app.route('/graph')
  def graph_Example(chartID = 'chart_ID', chart_type = 'line', chart_height = 500):
      df = pd.read_csv('csv/BCHAIN-TRVOU-BitcoinUSDExchangeTradeVolume.csv', index_col='Date', parse_dates='Date')
      dataSet = pandas_highcharts.core.serialize(df, render_to='my-chart', output_type='json')
      return render_template('graph.html', chart=dataSet)
  </code></pre>
  
  <p>In general, I have various DataFrames generated using Pandas. My problem is simply being able to display them with that of HighCharts now.
  My CSV files are also located here: <a href="https://drive.google.com/open?id=0B8xdmDmZgtJbVkhCcjZkZUhaajg" rel="nofollow">https://drive.google.com/open?id=0B8xdmDmZgtJbVkhCcjZkZUhaajg</a></p>
  
  <p>In essence I want to graph each CSV file and then graph certain values against others (eg that of USD Price vs Total Bitcoins). That is my reasoning for using Pandas DataFrame.</p>
  
  <p>Any help would be greatly appreciated :)</p>