Serving json data on Javascript with flask

Question

I want to serve my csv data to google charts for bubble chart on google, but I have little problem, I cannot create a array

This is my python data

```
    python_data = {
    'some_list': ["USA", "CN", "EU"],
    'some_list_2': [2, 5, 8],
    'some_list_3': [2, 3, 4],
    'some_list_4': [40, 500, 68]}
 ```

I want to serve this data in js like this.


    var data = google.visualization.arrayToDataTable([
            ['ID', 'Life Expectancy', 'Fertility Rate', 'Population'],
            ['CAN',    80.66,              1.67,        33739900],
            ['DEU',    79.84,              1.36,            81902307],
            ['DNK',    78.6,               1.84,            5523095],
            ['EGY',    72.73,              2.78,          79716203],
            ['GBR',    80.05,              2,             61801570],
            ['IRN',    72.49,              1.7,          73137148],
            ['IRQ',    68.09,              4.77,         31090763],
            ['ISR',    81.55,              2.96,        7485600],
            ['RUS',    68.6,               1.54,        141850000],
            ['USA',    78.09,              2.05,      307007000]
          ]);

at the en of the day i want to run this function on my flask website

  <script type="text/javascript">
    google.charts.load("current", {packages:["corechart"]});
    google.charts.setOnLoadCallback(drawChart);

    function drawChart() {

      var data = google.visualization.arrayToDataTable([
        ['ID', 'Life Expectancy', 'Fertility Rate', 'Region',     'Population'],
        ['CAN',    80.66,              1.67,      'North America',  33739900],
        ['DEU',    79.84,              1.36,      'Europe',         81902307],
        ['DNK',    78.6,               1.84,      'Europe',         5523095],
        ['EGY',    72.73,              2.78,      'Middle East',    79716203],
        ['GBR',    80.05,              2,         'Europe',         61801570],
        ['IRN',    72.49,              1.7,       'Middle East',    73137148],
        ['IRQ',    68.09,              4.77,      'Middle East',    31090763],
        ['ISR',    81.55,              2.96,      'Middle East',    7485600],
        ['RUS',    68.6,               1.54,      'Europe',         141850000],
        ['USA',    78.09,              2.05,      'North America',  307007000]
      ]);

      var options = {
        title: 'Correlation between life expectancy, fertility rate ' +
               'and population of some world countries (2010)',
        hAxis: {title: 'Life Expectancy'},
        vAxis: {title: 'Fertility Rate'},
        bubble: {
          textStyle: {
            fontSize: 12,
            fontName: 'Times-Roman',
            color: 'green',
            bold: true,
            italic: true
          }
        }
      };

      var chart = new google.visualization.BubbleChart(document.getElementById('textstyle'));

      chart.draw(data, options);
    }
  </script>

Thank you for your attention and help :)

Pierre V. · Accepted Answer · 2019-11-01 11:41:09Z

1

You basically have two options:

Use Flask templating system to create a javascript variable (see the accepted answer here: Passing a JSON object from Flask to JavaScript)
Make an AJAX call from your javascript script to your Flask application. The Flask documentation has a simple example here (with jQuery, but can be adapted to whatever library you're using): https://flask.palletsprojects.com/en/1.1.x/patterns/jquery/

answered Nov 1, 2019 at 11:41

Pierre V.

1,6151 gold badge11 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Serving json data on Javascript with flask

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related