Leveraging Flask to pass data to Google Charts with JavaScript

Question

Leveraging Flask to pass data to Google Charts with JavaScript

Trying to integrate Google Charts on my website using Flask as the backend. Need help with sending data from Flask to JavaScript. Here's a snippet of where I plan to retrieve data later:

@app.route("/")
def home():
    data = {'Language': 'DATABASE','PHP': 5000,'ASP': 600,'ASPX': 1231,'PERL': 500,'JSP': 1000}
    return render_template('index.html', data=data)

How can I utilize the 'data=data' here:

function drawChart(stats) {
    var stats = '{{stats}}'
    var data = google.visualization.arrayToDataTable([
        ['Language', 'IN DATABASE'],
        ['PHP', 5000],
        ['ASP', 600],
        ['ASPX', 1231],
        ['PERL', 500],
        ['JSP', 1000]
    ]);

Currently using predefined data, but plan to dynamically pull data from a SQLite database in the future for actual use.

Appreciate any assistance :D

javascript flask

Answer 1

Answer №1

To add any incoming data to the render_template (in this case, data), simply wrap them in double curly braces {{}}. For instance, consider using chart.js as shown below:

<canvas id="myChart" width="100%" height="40%"></canvas>
                                            <script type="text/javascript">
                                            var ctx = document.getElementById("myChart");
                                            var xaxis = ['{{time_series[0]}}', '{{time_series[1]}}', '{{time_series[2]}}', '{{time_series[3]}}', '{{time_series[4]}}', '{{time_series[5]}}']
                                            var yaxis = ['{{data_points[0]}}', '{{data_points[1]}}', '{{data_points[2]}}', '{{data_points[3]}}', '{{data_points[4]}}', '{{data_points[5]}}']
                                            ctx.style.backgroundColor = 'rgba(255,255,255,1)';
                                            var myChart = new Chart(ctx, {
                                                type: 'bar',

In this example, time_series and data_points are passed as lists. To simplify the code, you can also utilize the for statement.

Answer 2

To add any incoming data to the render_template (in this case, data), simply wrap them in double curly braces {{}}. For instance, consider using chart.js as shown below:

<canvas id="myChart" width="100%" height="40%"></canvas>
                                            <script type="text/javascript">
                                            var ctx = document.getElementById("myChart");
                                            var xaxis = ['{{time_series[0]}}', '{{time_series[1]}}', '{{time_series[2]}}', '{{time_series[3]}}', '{{time_series[4]}}', '{{time_series[5]}}']
                                            var yaxis = ['{{data_points[0]}}', '{{data_points[1]}}', '{{data_points[2]}}', '{{data_points[3]}}', '{{data_points[4]}}', '{{data_points[5]}}']
                                            ctx.style.backgroundColor = 'rgba(255,255,255,1)';
                                            var myChart = new Chart(ctx, {
                                                type: 'bar',

In this example, time_series and data_points are passed as lists. To simplify the code, you can also utilize the for statement.

Leveraging Flask to pass data to Google Charts with JavaScript

Answer №1

Similar questions

Utilize new metadata options to incorporate an external style and script file

What is the mechanism behind jQuery triggering the execution of JavaScript code contained in script tags that are retrieved in an AJAX response?

React Native Header Icon Not Showing on the Left Side

When troubleshooting the "Uncaught reference error: require is not defined," the browserify command encountered the error message "Error: Cannot find module."

Creating a callback function within stored procedures using JavaScript Language Integrated Query in documentDB: A step-by-step guide

Inserting a custom text box underneath the Anything Slider

The color of the last clicked DIV is supposed to stay permanent, but for some unknown reason

Is NodeJS Asynchronous: Has the callback been called twice?

"How can you enhance the performance of JavaScript and CSS in a Chrome Extension without using exclude_matches/globs or excluding domains

Having trouble with my ReactJS application where click interactions are functioning properly on the header but not on my content

The functionality of the webservice is not functioning properly

Challenges with dynamically adding rows using jQuery

Strikeout list on click of a mouse

Tips for successfully sending an interface to a generic function

trigger an event once an element has completed cycling using cycle.js

Looking for a way to create a regular expression that can parse an email response containing the newline character?

Preventing Jquery Append from Adding Previous Elements

D3 Treemap for handling extensive sets of data

PHP fails to retrieve data from a JavaScript Ajax function using the FormData object (specifically, when

Incorporating interactive maps into an AngularJS web application