Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Département de l'Aube : scolarisation selon l'âge et le sexe en 2020
Ventes de produits de la société MMI - 2022 - en quantités
const myChart = new Chart(
document.getElementById('myChart'),
{
type: 'line',
data: {
labels: ['1', '2', '3', '4', '5'],
datasets: [{
label: 'A',
data: [100, 96, 84, 76, 69],
fill: true,
}]
},
options: {
scales: {
y: {
min: 0,
max: 100
}
}
}
}
);const myChart = new Chart(
document.getElementById('myChart'),
{
type: 'line',
data: {
labels: ['1', '2', '3', '4', '5'],
datasets: [{
label: 'A',
yAxisID: 'A',
data: [100, 96, 84, 76, 69],
fill: true,
}, {
label: 'B',
yAxisID: 'B',
backgroundColor: 'rgb(122, 99, 255)',
borderColor: 'rgba(102, 99, 255, 0.2)',
data: [1, 1, 0.5, 1, 0],
fill: false,
}]
},
options: {
scales: {
A: {
type: 'linear',
position: 'left',
},
B: {
type: 'linear',
position: 'right',
ticks: {
max: 1,
min: 0
}
}
}
}
}
);<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/chart.js" defer></script>
<script src="assets/js/demo3.js" defer></script>
</head>
<body>
<canvas id="graph"></canvas>
<div>
<input type="checkbox" id="check1" value="A" data-color="rgb(120,123,21)" data-label="A" data-value="[1, 3, 4, 6]">A
<input type="checkbox" id="check1" value="B" data-color="rgb(21,123,121)" data-label="B" data-value="[4, 2, 41, 12]">B
<input type="checkbox" id="check1" value="C" data-color="rgb(20,13,21)" data-label="C" data-value="[2, 0, 9, 6]">C
<input type="checkbox" id="check1" value="D" data-color="rgb(120,13,21)" data-label="D" data-value="[10, 3, 7, 1]">D
</div>
</body>
</html>const myChart = new Chart(
document.getElementById('graph'),
{
type: 'line',
data: {
labels: ['1', '2', '3', '4'],
datasets: []
},
}
);
document.querySelectorAll('input[type=checkbox]').forEach((e) => {
e.addEventListener('click', (el) => {
console.log('check')
if (el.target.checked) {
val = el.currentTarget.dataset.value.substring(1, el.currentTarget.dataset.value.length - 1).split(', ');
obj = {
label: el.currentTarget.dataset.label,
data: val,
fill: false,
backgroundColor: el.currentTarget.dataset.color,
borderColor: el.currentTarget.dataset.color,
}
myChart.data.datasets.push(obj);
myChart.update()
} else {
myChart.data.datasets = myChart.data.datasets.filter((e) => e.label !== el.currentTarget.dataset.label)
myChart.update()
}
})
})<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://d3js.org/d3.v7.min.js"></script>
<style>
.map-tooltip {
position: absolute;
text-align: center;
z-index: 1000;
color: black;
width: 275px;
height: 37px;
padding: 2px;
font: 12px sans-serif;
background: grey;
border: 0px;
border-radius: 8px;
pointer-events: none;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
const width = 550, height = 550;
const path = d3.geoPath();
const projection = d3.geoConicConformal()
.center([2.454071, 46.279229])
.scale(2600)
.translate([width / 2, height / 2]);
path.projection(projection);
const svg = d3.select('#map').append("svg")
.attr("id", "svg")
.attr("width", width)
.attr("height", height);
const deps = svg.append("g");
d3.json('assets/js/departments.json').then(function (geojson) {
deps.selectAll("path")
.data(geojson.features)
.enter()
.append("path")
.attr('class', 'department')
.attr("d", path)//récupère chaque path (chaque département), possible de changer la couleur de path avec un attribut sur le SVG
.on("mouseover", function (event, d) {
console.log(d)//d contient les informations du département survolé
div.transition()
.duration(200)
.style("opacity", .9);
div.html("Département : " + d.properties.NOM_DEPT + "<br/>"
+ "Région : " + d.properties.NOM_REGION)
.style("left", (event.pageX + 30) + "px")
.style("top", (event.pageY - 30) + "px")
})
.on("mouseout", function (event, d) {
div.style("opacity", 0);
div.html("")
.style("left", "-500px")
.style("top", "-500px");
});
});
let div = d3.select("body").append("div")
.attr("class", "map-tooltip")
.style("opacity", 0);
</script>
</body>
</html>// Some code
<div>
<canvas id="myChart"></canvas>
</div><script src="https://cdn.jsdelivr.net/npm/chart.js"></script><script>
const myChart = new Chart(
document.getElementById('myChart'),
{
type: 'line',
data: {
labels: [
'January',
'February',
'March',
'April',
'May',
'June',
],
datasets: [{
label: 'My First dataset',
backgroundColor: 'rgb(255, 99, 132)',
borderColor: 'rgb(255, 99, 132)',
data: [0, 10, 5, 2, 20, 30, 45],
}]
},
options: {}
}
);
</script>fetch('./data.json')
.then(response => response.json())
.then(dataJson => {
})
.catch(error => console.error('Erreur lors du chargement des données JSON:', error));<script src="assets/js/graphiques.js" defer type="module"></script>{
"mmi1": {
"h":73,
"f": 44
},
"mmi2": {
"crea": {
"h": 17,
"f": 13
},
"comm": {
"h": 11,
"f": 4
},
"devFi": {
"h": 18,
"f": 7
},
"devFc": {
"h": 74,
"f": 28
}
}
}fetch('./data.json')
.then(response => response.json())
.then(dataJson => {
const chartGenreComm = new Chart(
document.getElementById('chartGenreComm'),
{
type: 'pie',
data: {
labels: [
'Homme',
'Femme'
],
datasets: [{
label: 'Répartition des genres Parcours Communication',
backgroundColor: [
'rgb(255, 99, 132)',
'rgb(54, 162, 235)',
],
hoverOffset: 4,
data: [dataJson.mmi2.comm.h, dataJson.mmi2.comm.f],
}]
},
options: {
plugins: {
title: {
text: 'Répartition des genres Parcours Communication',
display: true
}
}
}
}
);
})
.catch(error => console.error('Erreur lors du chargement des données JSON:', error));const charte2 = new Chart(
document.getElementById('charte2'),
{
type: 'bar',
data: {
labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
datasets: [{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3],
borderWidth: 1
}]
},
options: {
scales: {
y: {
beginAtZero: true
}
}
}
}
);
//un clic sur le bouton avec l'id bouton doit ajouter un élément au charte2
document.getElementById('bouton').addEventListener('click', () => {
charte2.data.labels.push('New');
charte2.data.datasets[0].data.push(10);
charte2.update();
});
