Verified Commit 32fbaa8f authored by Bastien Durel's avatar Bastien Durel
Browse files

make graph customizable

parent a42308fc
......@@ -12,7 +12,16 @@ $dsn = "pgsql:host=$host;port=$port;dbname=$db";
$conn = new PDO($dsn, $user, $password,
array(PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION));
$sql = "select * from covid_agg order by jour";
$col = 'rea';
switch ($_GET['col']) {
case 'hosp':
case 'dc':
case 'rea':
$col = $_GET['col'];
break;
}
$sql = "select *, $col val from covid_agg order by jour";
$rs = $conn->prepare($sql);
$rs->execute();
......
......@@ -74,10 +74,7 @@
.range([height, 0]);
const line = d3.line()
.x(d => x(d.date))
.y(d => y(d.rea));
const line2 = d3.line()
.x(d => x(d.date))
.y(d => y(d.hosp));
.y(d => y(d.val));
const svg = d3.select("#chart").append("svg")
.attr("id", "svg")
.attr("width", width + margin.left + margin.right)
......@@ -86,23 +83,24 @@
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
var map = {};
d3.json("data.php").then(function(data) {
var url = "data.php";
var label = "Patients en réanimation";
d3.json(url).then(function(data) {
data.forEach(function(d) {
d.date = parseTime(d.jour);
d.hosp = +d.hosp;
d.rea = +d.rea;
d.dc = +d.dc;
d.val = +d.val;
map[d.date] = d;
});
x.domain(d3.extent(data, d => parseTime(d.jour)));
y.domain([0, d3.max(data, d => d.rea)]);
y.domain([0, d3.max(data, d => d.val)]);
svg.append("g")
.attr("transform", "translate(0," + height + ")")
.call(d3.axisBottom(x));
svg.append("g")
.attr("class", "xAxis")
.call(d3.axisLeft(y))
.append("text")
.attr("fill", "#000")
......@@ -110,7 +108,7 @@
.attr("y", 6)
.attr("dy", "0.71em")
.style("text-anchor", "end")
.text("Pts");
.text(label + " ");
svg.selectAll("y axis").data(y.ticks(10)).enter()
.append("line")
......@@ -124,12 +122,34 @@
.datum(data)
.attr("class", "line")
.attr("d", line);
svg.append("path")
.datum(data)
.attr("class", "line line2")
.attr("d", line2);
});
function reload(_url) {
if (_url) url = _url;
let delay = 1000;
d3.json(url).then(function(data) {
data.forEach(function(d) {
d.date = parseTime(d.jour);
d.val = +d.val;
map[d.date] = d;
});
x.domain(d3.extent(data, d => parseTime(d.jour)));
y.domain([0, d3.max(data, d => d.val)]);
svg.selectAll(".xAxis").transition()
.duration(delay)
.call(d3.axisLeft(y));
let u = svg.selectAll("path")
.datum(data);
u.enter()
.append("path")
.attr("class", "line invisible")
.merge(u)
.transition()
.duration(delay)
.attr("d", line)
;
});
}
var div = d3.select("body").append("div")
.attr("class", "tooltip")
......@@ -182,5 +202,10 @@
}
});
</script>
<div class="bar">
<button onclick="reload('data.php?col=rea')">Réanimation</button>
<button onclick="reload('data.php?col=hosp')">Hospitalisations</button>
<button onclick="reload('data.php?col=dc')">Décès</button>
</div>
</body>
</html>
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment