Plotting data using higcharts in flask web application
<p>I am trying to plot data from mysql server and display it in a web server. I am using highcharts javascript library for plotting. I can get data from mysql database and data is sent from server-side to client-side as json data. Then by using highcharts I want to display it. But chart shows nothing when I try to plot.</p>

<p>Here is important snippet code in server side (I am using AJAX):</p>

<pre><code>def background_process():
    start = request.form['name_start']
    finish = request.form['name_finish']
    df_sorted = mutechDataManipulate.sort_by_time(df, pd.to_datetime(str(start)), pd.to_datetime(str(finish)), 'Date')
    print df_sorted['Date'].head()
    df_out_json = df_sorted[['Date', 'High']].to_json(orient='values')
    return json.dumps(df_out_json)
</code></pre>

<p>Here is client side (I get json data from server successfully):</p>

<pre><code>$(document).ready(function(){
$(document).on("click", "#btn1", function() {       
    console.log("alii");
    var user = $('input[name="name_start"]').val();
    var pass = $('input[name="name_finish"]').val();
    console.log("sivgin");      
    $.ajax({
        url: '/background_process',
        data: $("form").serialize(),
        type: "POST",
        success: function(response) {
            $('#result').highcharts({
        xAxis: {
            type: 'datetime'
        },
        yAxis: {
            title: {
                text: 'High'
            }
        },
        legend: {
            enabled: false
        },
        series: [{
            type: 'area',
            name: 'USD to EUR',
            data: response
                }]
         });
            console.log(response)
        },
        error: function(error) {
            console.log(error);
        }
    });
});
});
</code></pre>

<p>Finally, I get a blank graph like this:</p>

<p><img src="http://i.stack.imgur.com/ShYae.jpg" alt="empty chart"></p>

<p>In addition I try to plot time series line chart. What is wrong? </p>

<p>Edit: Forgot to html file:</p>

<pre><code>    &lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
  &lt;title&gt;Mutech&lt;/title&gt;
  &lt;meta charset="utf-8"&gt;
  &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
  &lt;link rel="stylesheet" href="static/css/bootstrap.min.css"&gt;
    &lt;script src="static/js/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="static/js/bootstrap.min.js"&gt;&lt;/script&gt;
  &lt;script src="static/js/script.js"&gt;&lt;/script&gt;
  &lt;script src="static/js/jquery-1.9.1.js"&gt;&lt;/script&gt;
  &lt;script src="https://code.highcharts.com/highcharts.js"&gt;&lt;/script&gt;
  &lt;script src="https://code.highcharts.com/modules/exporting.js"&gt;&lt;/script&gt;

&lt;/head&gt;
&lt;body&gt;
&lt;br/&gt;
&lt;div class="container"&gt;  
  &lt;form class="form-inline" id="form1"  method="post" &gt;
    &lt;div class="form-group"&gt;
      &lt;label&gt;Start Date&lt;/label&gt;
      &lt;input class="form-control" id="id_start" name ="name_start"&gt;
    &lt;/div&gt;
    &lt;div class="form-group"&gt;
      &lt;label for="pwd"&gt;Finish Date&lt;/label&gt;
      &lt;input class="form-control" id="id_finish" name ="name_finish"&gt;
    &lt;/div&gt;
    &lt;br/&gt;&lt;br/&gt;
    &lt;br/&gt;
    &lt;button type="button" class="btn btn-default" id= "btn1"&gt;Submit&lt;/button&gt;

  &lt;/form&gt;
&lt;/div&gt;

&lt;div class="container" id = "result"&gt;
&lt;/div&gt;



&lt;/body&gt;
&lt;/html&gt;
</code></pre>

<p>It doesn't look your data is formatted correctly for Highcharts.  If you look at <a href="http://stackoverflow.com/questions/29643609/how-to-pass-json-data-to-highcharts-series">this other StackOverlow question about JSON data and Highcharts</a> you'll see that the data should be a list of dictionaries.</p>

<p>To do this why pandas, you pass the value <code>"records"</code> into the <code>orient</code> option.</p>

<pre><code>df_out_json = df_sorted[['Date', 'High']](orient="records")
#[{"Date":1285632000000, "High":None}, {"Date":1285545600000, "High":25.39}]
</code></pre>

<p>See more in the <a href="http://pandas.pydata.org/pandas-docs/stable/generated/pandas.DataFrame.to_json.html" rel="nofollow">pandas documentation</a> for <code>to_json</code>.</p>

javascript jquery python highcharts flask