1-DAV-202 Data Management 2023/24
Previously 2-INF-185 Data Source Integration
Difference between revisions of "Ljavascript"
Jump to navigation
Jump to search
| Line 2: | Line 2: | ||
[[HWjavascript]] | [[HWjavascript]] | ||
<!-- /NOTEX --> | <!-- /NOTEX --> | ||
| − | |||
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. | 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. | ||
| Line 13: | Line 12: | ||
'''Tips:''' | '''Tips:''' | ||
| − | * Each graph contains also HTML+JS code example. That is a good | + | * Each graph contains also HTML+JS code example. That is a good starting point. You can just put it inside the flask template a see what it does. |
| − | * You can write your data into JavaScript data structures ( | + | * You can write your data into JavaScript data structures (<tt>var data</tt> 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. | + | * Debugging tip: When looking for errors, limit the amount of data you send through the 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. | ||
'''Merging multiple examples together:''' | '''Merging multiple examples together:''' | ||
| − | * You need to include | + | * You need to include <tt><script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script></tt> just once. This is similar to <tt>import</tt> in Python. |
| − | * You can either | + | * You can either load individual packages separately by commands of the form: <tt>google.charts.load("current", {packages:["calendar"]});</tt> or you can list all packages in one array of the <tt>load</tt> method. |
| − | * After loading of library is done, | + | * After loading of library is done, you can call function named <tt>drawChart</tt> as follows: <tt>google.charts.setOnLoadCallback(drawChart);</tt>. You can either draw multiples charts in one function, or call multiple functions (you need to set multiple callbacks). Be careful to not name multiple functions with same name. |
| − | * Each chart needs its own element with different ID. | + | * Each chart needs its own HTML element with different ID. It looks something like this: <tt><nowiki><div id="chart_div" style="width: 900px; height: 500px;"></nowiki></tt>. The id <tt>chart_div</tt> is then referenced here: <tt>new google.visualization.Histogram(document.getElementById('chart_div'));</tt> |
| − | * Follow instructions here: [https://developers.google.com/chart/interactive/docs/basic_multiple_charts?hl=en] | + | * Follow the instructions here: [https://developers.google.com/chart/interactive/docs/basic_multiple_charts?hl=en] |
Revision as of 21:31, 25 January 2024
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 starting point. 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 the amount of data you send through the 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 load individual packages separately by commands of the form: google.charts.load("current", {packages:["calendar"]}); or you can list all packages in one array of the load method.
- After loading of library is done, you can call function named drawChart as follows: google.charts.setOnLoadCallback(drawChart);. You can either draw multiples charts in one function, or call multiple functions (you need to set multiple callbacks). Be careful to not name multiple functions with same name.
- Each chart needs its own HTML element with different ID. It looks something like this: <div id="chart_div" style="width: 900px; height: 500px;">. The id chart_div is then referenced here: new google.visualization.Histogram(document.getElementById('chart_div'));
- Follow the instructions here: [1]
