1-DAV-202 Data Management 2023/24
Previously 2-INF-185 Data Source Integration

Materials · Introduction · Rules · Contact
· Grades from marked homeworks are on the server in file /grades/userid.txt
· Dates of project submission and oral exams:
Early: submit project May 24 9:00am, oral exams May 27 1:00pm (limit 5 students).
Otherwise submit project June 11, 9:00am, oral exams June 18 and 21 (estimated 9:00am-1:00pm, schedule will be published before exam).
Sign up for one the exam days in AIS before June 11.
Remedial exams will take place in the last week of the exam period. Beware, there will not be much time to prepare a better project. Projects should be submitted as homeworks to /submit/project.
· Cloud homework is due on May 20 9:00am.


Difference between revisions of "Ljavascript"

From MAD
Jump to navigation Jump to search
Line 15: Line 15:
 
* Each graph contains also HTML+JS code example. That is a good startpoint. You can just put it inside the flask template a see what it does.
 
* Each graph contains also HTML+JS code example. That is a good startpoint. You can just put it inside the flask template a see what it does.
 
* You can write your data into JavaScript data structures (`var data` from examples) in a Flask template. You might need a jinja for loop (https://jinja.palletsprojects.com/en/2.11.x/templates/#for). Or you can produce string in Python, which you will put into a HTML. You might need to turnoff autoescaping (https://stackoverflow.com/questions/3206344/passing-html-to-template-using-flask-jinja2). It is a (very) bad practice, but sufficient for this lecture. (A better way is to load data in JSON format through API).
 
* You can write your data into JavaScript data structures (`var data` from examples) in a Flask template. You might need a jinja for loop (https://jinja.palletsprojects.com/en/2.11.x/templates/#for). Or you can produce string in Python, which you will put into a HTML. You might need to turnoff autoescaping (https://stackoverflow.com/questions/3206344/passing-html-to-template-using-flask-jinja2). It is a (very) bad practice, but sufficient for this lecture. (A better way is to load data in JSON format through API).
 +
* Debugging tip: When looking for errors, limit amount of data you send through template, so you can easily read the resulting JS code.
 
* Consult the [[Lflask|previous lecture]] on running and accessing Flask applications.
 
* Consult the [[Lflask|previous lecture]] on running and accessing Flask applications.
  

Revision as of 15:58, 27 March 2023

HWjavascript


In this lecture we will extend the website from the previous lecture with interactive visualizations written in JavaScript. We will not cover details of the JavaScript programming language, only use visualization contained in the Google Charts library.

Your goal is to take examples from the documentation and tweak them for your purposes.

A short explanation how things fit together:

  • Your Python server (in Flask) produces a HTML page with some content.
  • You can embed some Javascript code inside the HTML. This code will be run in browser.

Tips:

  • Each graph contains also HTML+JS code example. That is a good startpoint. You can just put it inside the flask template a see what it does.
  • You can write your data into JavaScript data structures (`var data` from examples) in a Flask template. You might need a jinja for loop (https://jinja.palletsprojects.com/en/2.11.x/templates/#for). Or you can produce string in Python, which you will put into a HTML. You might need to turnoff autoescaping (https://stackoverflow.com/questions/3206344/passing-html-to-template-using-flask-jinja2). It is a (very) bad practice, but sufficient for this lecture. (A better way is to load data in JSON format through API).
  • Debugging tip: When looking for errors, limit amount of data you send through template, so you can easily read the resulting JS code.
  • Consult the previous lecture on running and accessing Flask applications.

Merging multiple examples together:

  • You need to include `<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>` just once. This is similar to `import` in python.
  • You can either call `google.charts.load("current", {packages:["calendar"]});` separatelly for each package or list all packages in one line in one array.
  • After loading of library is done, this calls you function named `drawChart` `google.charts.setOnLoadCallback(drawChart);`. You can either draw multiples charts in one fuction, or call multiple function (you need to set multiple callbacks). Be careful to not name functions with same name.
  • Each chart needs its own element with different ID. That's this thing: <div id="chart_div" style="width: 900px; height: 500px;">. Refferenced here: `new google.visualization.Histogram(document.getElementById('chart_div'));`
  • Follow instructions here: [1]