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

javascriptflask

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.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The loading GIF in jQuery is malfunctioning when displayed simultaneously on multiple div elements

I am currently working on my Laravel dashboard's blade to showcase various statistics. These stats will be updated whenever the date picker is changed. Below is the code for my date picker: <div class="row"> <div class=&qu ...

javascriptphpjqueryajax

ESLint flagging "Unexpected tab character" error with "tab" indentation rule enabled

Currently, my ESLint setup includes the Airbnb plugin (eslint-config-airbnb) along with the Babel parser. I recently decided to enforce the rule of using Tab characters for indentation instead of spaces. This is how my .eslintrc file looks like: { "p ...

javascriptbabeljseslintindentationeslint-config-airbnb

Trigger a pop up using AJAX when successful

There is a button that, when clicked, triggers a pop up dialog box with the code below: <div class="button-wrap"><button data-dialog="somedialog" class="trigger">Open Dialog</button></div> The script responsible for activating the ...

javascriptjqueryajax

One Functionality on Button is Failing to Execute among Several Tasks

I've encountered an issue with one of the tasks triggered by a button click. The button successfully executes two out of three tasks (hides them on click), except for the last task which involves a text-blinking JavaScript function. I've used the ...

javascripthtmlscript-tag

Is it possible to add filtering to my MongoDB when using the find() method in express routing? If so, how can

Hey there! I have this GET function that uses async to find a specific "Category" mongoose Schema that the user just clicked on, along with another "Tool" mongoose Schema which fetches all tools from my database and sends them both to a rendered page. I&a ...

javascriptmongodbexpressmongoosemongoose-schema

Executing a JavaScript function within a Vue component script

I'm working on a simple component file for submitting a form, along with a JavaScript function to handle an action: <template> <div> <div class="modal-header"> <button type="button" class="close" data-dismi ...

javascriptvue.js

Place a drop-down menu inside the input box

Struggling with this issue, I've come across various messy solutions, but I'm determined to find a cleaner one. What I'm looking for is an input field that includes a dropdown selection on the left side. This is essentially what I have in m ...

javascriptcsshtml

What is the best approach to resolving the MongoServerError: E11000 duplicate key error?

Index.Js File: const cookieSession = require("cookie-session"); const express = require("express"); const app = express(); const helmet = require("helmet"); const morgan = require("morgan"); const dotenv = require(&q ...

javascriptnode.jsmongodbexpressmongoose

What could be causing the d3.js pie chart transition to malfunction?

Today I am experimenting with d3.js to create a unique pie chart from scratch. While following tutorials here as my base, there were modifications made in the code to add personal touches and customization. The challenge arose during Step 6 when introduc ...

javascriptpythond3.jscharts

Despite having unique ids, two file input forms are displayed in the same div in the image preview

Running into a minor issue once again. It may not be the most eloquent query, but I'm genuinely stuck and in need of some assistance. I am attempting to showcase image previews of selected files in a file input form. I have a jQuery script that reads ...

javascriptjqueryhtml

How to include images in a PDF using jspdf without encountering issues with Adobe Reader?

For a project I'm working on, I've integrated jspdf to convert some charts into a PDF. The framework I'm using is angularjs 1.5.6, and the charts are created with chart.js. The HTML snippet for the charts looks like this: <div name="char ...

javascriptangularjsjspdf

Chrome automatically scrolling back to the beginning of the page following a remote form submission

Rails Version: 5.2.2 Chrome Version: 78.0.3904.87 While testing my website on Chrome today, I encountered an issue where the page automatically scrolls to the top whenever an AJAX request is made. This problem only occurs in Chrome and not in other brows ...

javascriptruby-on-railsajaxgoogle-chrome

Using back end proxy for content delivery

I am facing a challenge with my iOS app that requires proxying through a private server (HTTP / HTTPS proxy). Every time I attempt to address this issue on the client-side, new problems arise. How can I use the back end to effectively solve this problem? ...

javascriptserverproxybackend

Issue with $watch function causing $scope variable to remain undefined, even though it is being explicitly

I've been encountering an issue while trying to insert data into my Firebase database using a user's uid. It seems to be coming out as undefined for some reason. Here's a closer look at the code snippet causing the problem: The primary cont ...

javascriptangularjsserviceangularfirewatch

Facing delays in receiving responses for inner loop in node.js

Having an issue with retrieving data from the inner loop, as there is a delay in getting it. In my code, I am fetching the user list along with their ancestors from the SQL table. The ancestors are needed to verify their root values in the hierarchy/tree ...

javascriptarraysnode.jsloops

Determine if an element is being hovered over using jQuery

How do I determine if the cursor is hovering over an element using jQuery or JS? I attempted to use $('#id').is(':hover'), but it doesn't seem to be functioning as expected. It's worth mentioning that I am calling this line ...

javascriptjquery

Retrieve the value from a classic ASP page using an if statement and pass it to

Currently, I am attempting to assign a JavaScript value through ASP. foo('RequestMode', '<%=Request.Querystring("Mode")%>') My goal is to achieve something along the lines of: foo('RequestMode', '<%=if (Reques ...

javascriptasp-classic

Refreshing a DIV in Rails by reloading from model using a JavaScript function

Recently, I created a page displaying the number of Widgets a customer has. Below is the view written in Haml: #available = "Available widgets: #{@customer.widgets.unused.count()}" (The "unused" scope in the model displays available widgets). When a C ...

javascriptruby-on-railsruby-on-rails-3unobtrusive-javascript

The error message received was: "npm encountered an error with code ENOENT while trying to

About a week ago, I globally installed a local package using the command npm i -g path. Everything was working fine until today when I tried to use npm i -g path again and encountered the following error: npm ERR! code ENOENT npm ERR! syscall rename npm ER ...

javascriptnode.jsnpm

Trouble with Ruby on Rails jQuery interactions when using the tokenInput gem

Currently, I am developing a rails app and attempting to incorporate this gem for a text field https://github.com/exAspArk/rails-jquery-tokeninput Despite having the gem correctly installed and included in my _form.html.erb file, I keep encountering the ...

javascriptjqueryruby-on-railsruby