Ch13. Charts

In this chapter we learn how to make queries to extract relevant information from our databases, and we learn how to pass that information from the server to the browser. By using Chart.js, we disclose the information from our databases in two types of charts.


YouTube (Section 1)
YouTube (Section 2)
YouTube (Section 3)
GitHub
JSON dumps

In this section, we learn how to transform the information from a Python dictionary into a JSON list. This will be useful to move information from the server to the browser.

JSON parse

In this section, we learn how to transform the information from the browser into a JavaScript object. We also learn how to access to that information from the browser console.

JSON, Flask, and Chart.js

In this section, we make queries to access to the databases in our app, and we learn how to disclose that information by using different charts.

Weekly challenge

Each group must introduce some queries in its code to extract relevant information from their databases and disclose that information by using different charts.

JSON dumps

Some useful links

The links to the YouTube video, and the GitHub account for this section are below:

YouTube (Section 1) GitHub

All the information in this section has been taken from the next links:

Link 1 Link 2 Link 3

In this chapter, we make a query to extract information from our database, and we pass that information to the server to be disclosed in a graph. To pass information between the server and the browser, we need to place that information in a JSON format.

JSON is an acronym that stands for JavaScript Object Notation. Despite its name, JSON is a language agnostic format that is most used to transmit data between systems, and on occasion, store data. Programs written in Python, as well as many other programming languages, can ingest JSON formatted data, and can serialize data in memory into the JSON format.

Python supports JSON through a built-in package called json. To use this feature, import the json package into the Python script or module in which you wish to serialize or deserialize your data. JSON utilizes comma delimited key value pairs contained in double quotes and separated by colons. The body of a JSON file can be delimited in curly braces { } or square braces [] (also known as “brackets” in some locales). The JSON format appears to be like the dictionary in Python, but the specifics of the JSON format have significant differences, so use care when working with both formats.

When we make a query to our database, we obtain a Python dictionary. In this section, we use the function json.dumps() to convert a subset of Python objects into a json string. Not all objects are convertible, and you may need to create a dictionary of data you wish to expose before serializing to JSON. We illustrate the use of json.dumps() with different examples:

Example 1:

Passing the Python dictionary to json.dumps() function will return a string.


import json
Dictionary ={(1, 2, 3):'Welcome', 2:'to',
            3:'Geeks', 4:'for',
            5:'Geeks'} 
# Our dictionary contains tuple
# as key, so it is automatically
# skipped If we have not set
# skipkeys = True then the code
# throws the error
json_string = json.dumps(Dictionary,
                            skipkeys = True) 
print('Equivalent json string of dictionary:',
        json_string)
Example 2:

By setting the skipkeys to True(default: False) we automatically skip the keys that are not of basic type.


import json    
# Creating a dictionary
Dictionary ={1:'Welcome', 2:'to',
            3:'Geeks', 4:'for',
            5:'Geeks'}  
# Converts input dictionary into
# string and stores it in json_string
json_string = json.dumps(Dictionary)
print('Equivalent json string of input dictionary:',
        json_string)
print("        ") 
# Checking type of object
# returned by json.dumps
print(type(json_string))
Example 3:

If allow_nan is False (default: True), then it will be a ValueError to serialize out of range float values (nan, inf, -inf) in strict compliance of the JSON specification. If allow_nan is True, their JavaScript equivalents (NaN, Infinity, -Infinity) will be used.


import json
# We are adding nan values
# (out of range float values)
# in dictionary
Dictionary ={(1, 2, 3):'Welcome', 2:'to',
            3:'Geeks', 4:'for',
            5:'Geeks', 6:float('nan')} 
# If we hadn't set allow_nan to
# true we would have got
# ValueError: Out of range float
# values are not JSON compliant
json_string = json.dumps(Dictionary,
                         skipkeys = True,
                         allow_nan = True) 
print('Equivalent json string of dictionary:',
      json_string)
Example 4:

If indent is a non-negative integer or string, then JSON array elements and object members will be pretty-printed with that indent level. An indent level of 0, negative, or “” will only insert newlines. None (the default) selects the most compact representation. Using a positive integer indent indents that many spaces per level. If indent is a string (such as “\t”), that string is used to indent each level.


import json
Dictionary ={(1, 2, 3):'Welcome', 2:'to',
            3:'Geeks', 4:'for',
            5:'Geeks', 6:float('nan')} 
# Indentation can be used
# for pretty-printing
json_string = json.dumps(Dictionary,
                            skipkeys = True,
                            allow_nan = True,
                            indent = 6) 
print('Equivalent json string of dictionary:',
        json_string)

JSON Parse

Some useful links

The links to the YouTube video, and the GitHub account for this section are below:

YouTube (Section 2) GitHub

All the information in this section has been taken from the next links:

Link 1 Link 2 Link 3

As we have studied in the previous section, a common use of JSON is to exchange data to/from a web server. When receiving data from a web server, the data is always a string. Parse the data with JSON.parse(), and the data becomes a JavaScript object. We are going to study the function JSON.parse() with a couple of examples:

Example 1. Dictionary

<!DOCTYPE html>
<html>
<body>
<h2>Creating an Object from a JSON String</h2>
<p id="demo"></p>
<script>
const txt = '{"name":"John", "age":30, "city":"New York"}'
const obj = JSON.parse(txt);
document.getElementById("demo").innerHTML = obj.name + ", " + obj.age;
console.log(obj.name)
console.log(obj.age)
</script>
</body>
</html>
Example 2. Array

<!DOCTYPE html>
<html>
<body>
<h2>Parsing a JSON Array.</h2>
<p>Data written as an JSON array will be parsed into a JavaScript array.</p>
<p id="demo"></p>
<script>
const text = '[ "Ford", "BMW", "Audi", "Fiat" ]';
const myArr = JSON.parse(text);
document.getElementById("demo").innerHTML = myArr[0];
console.log(myArr[0])
console.log(myArr[1])
</script> 
</body>
</html>

Section. JSON, Flask, and Chart.js

Some useful links

The links to the YouTube video, and the GitHub account for this section are below:

YouTube (Section 3) GitHub (Boilerplate) GitHub (Final)

All the information in this section has been taken from the next link:

Link

Deployment of our app in AWS

It is important to understand the difference between templates and JavaScript. Templates are rendered on the server, before the response is sent to the user's browser. JavaScript runs in the user's browser, after the template is rendered and sent. Therefore, it is impossible to use JavaScript to affect how the Jinja template is rendered, but it is possible to render data into the JavaScript that will run.

To provide data to JavaScript when rendering the template, use the tojson() filter in a <script> block. This will convert the data to a valid JavaScript object and ensure that any unsafe HTML characters are rendered safely. If you do not use the tojson filter, you will get a SyntaxError in the browser console.

The basic code in the routes and in the html files is:

data = generate_report()
return render_template("report.html", chart_data=data)
<script>
    const chart_data = {{ chart_data|tojson }}
    chartLib.makeChart(chart_data)
</script>

Query and information transfer between the server and the browser

When we make a query to our database, the information is stored in a Python dictionary. We make some data manipulation to prepare the data to be transferred from the server to the browser, and then to be plotted by using Chart.js.

We extract the information referred to emissions (the steps for the kilometers are identical). To work out the carbon emissions, we obtain the emissions by means of conveyance, and then, we obtain the emissions by time (in the last five days).

To work out the emission by means of conveyance, we proceed in three steps:

  1. We make a query and store the data in a Python dictionary.

  2. We create two Python lists. In the first list, we store the emissions. In the second list, we store the means of conveyance.

  3. We pass the list with the emissions to the browser by using json.dumps(data).

  4. Please, watch the YouTube video for this section and in the GitHub folder, go through the routes.py file in the carbon_app folder to see all the details of the code.
To work out the emissions by date, we proceed in three steps:

  1. We make a query and store the data in a Python dictionary.

  2. We create two Python lists. In the first list, we store the emissions. In the second list, we store the date.

  3. We pass the two lists with the emissions and the date to the browser by using json.dumps(data).

  4. Please, watch the YouTube video for this section and in the GitHub folder, go through the routes.py file in the carbon_app folder to see all the details of the code.

Information in the browser and Chart.js

Once that we have sent the data from the server to the browser by using jons.dumps(data), we must transform that data into json object by using: object== JSON.parse( {{ data | tojson }} ).

Once that we have the information converted into a valid JavaScript object, we can start to plot it by using Chart.js:

Chart.js
To use Chart.js, we proceed in three steps.
  1. In the layout.html file, we must introduce: <script src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0"></script>
    It is important to notice that I introduce the version 2.8.0. For the charts that I am introducing in this chapter that version is required. However, for other charts, you do not need that version.

  2. In the your_data.html file, we define the canvas for the chart: 
    
<section class="two_emissions_graphs">
    <div class="container">
        <div class="box">
            <canvas id="emissions_by_transport"></canvas>
        </div>
        <div class="box">
            <canvas id="over_time_emissions"></canvas> 
        </div>
    </div>
</section>
  3. In the your_data.html file, we define the script, we define a JavaScript object, and create a chart. 
    
{% block javascript %}
    <script>
    data...
    chart...
    </script>
{% endblock %}

Access to the information passed from the server by using the browser console

Once that we create a JavaScript object, we can access to it from the console in the browser terminal. We can type the next code (console.log(emission_transport_data)) and access to very useful information.

Weekly challenge

In this weekly challenge, each group must introduce some queries in its code to extract relevant information from their databases and disclose that information by using different charts.