In order to create a simple two-column layout, we connect the index.php
page to the Bootstrap framework and build the layout based on provided documentation:
index.php
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-6">
</div>
<div class="col-6">
</div>
</div>
</div>
</body>
</html>
We now move onto creating and embedding the following module files:
data.php
: Similarly as the previous sql.php
for connecting to an external source and preparing the datasetsvg.php
: Simple SVG implementation of data visualizationgraph.php
: Library-driven Canvas implementationindex.php
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
</head>
<body>
<? include "data.php"; ?>
<div class="container">
<div class="row">
<div class="col-6">
<? include "svg.php"; ?>
</div>
<div class="col-6">
<? include "graph.php"; ?>
</div>
</div>
</div>
</body>
</html>
The page now features a side-by-side view of both approaches: vanilla SVG and plugin-based Canvas.
We will rely on Dark Spy API's offering to load and manipulate Toronto's weather information for our needs. While one can simply sign up for a free account to use the data, we can also share the following URL: https://api.darksky.net/forecast/fc14992ed7b63ebd6fcf1b740f6398a9/43.6532,-79.3832
The presented JSON data seems quite complex, but things will make better sense once it is loading into PHP and converted into a compliant array object.
data.php
<?
$data = file_get_contents("https://api.darksky.net/forecast/fc14992ed7b63ebd6fcf1b740f6398a9/43.6532,-79.3832");
$array = json_decode($data);
echo "<pre>";
var_dump($array);
echo "</pre>";
?>
file_get_contents()
is responsible for downloading the remote URL as a string, and json_decode()
turns the very same string into a format usable by PHP. <pre>
and var_dump()
display the contents of the converted object with line break (for legibility).
After some inspection, we can confirm that day-by-day forecast information is available under $array->daily->data
, and will create a dedicated variable called forecast
to populate the two module files. We can also disable var_dump()
upon confirming this.
data.php
<?
$data = file_get_contents("https://api.darksky.net/forecast/fc14992ed7b63ebd6fcf1b740f6398a9/43.6532,-79.3832");
$array = json_decode($data);
$forecast = $array->daily->data;
?>