diff --git a/ejercicios/JS/teoria_8/canales.html b/ejercicios/JS/teoria_8/canales.html
new file mode 100644
index 0000000..dcd64b8
--- /dev/null
+++ b/ejercicios/JS/teoria_8/canales.html
@@ -0,0 +1,16 @@
+
+
+
+
+
+
+ Ejercicio de Gráficas
+
+
+
+
+
+
+
+
+
diff --git a/ejercicios/JS/teoria_8/canales.js b/ejercicios/JS/teoria_8/canales.js
new file mode 100644
index 0000000..ad40b2e
--- /dev/null
+++ b/ejercicios/JS/teoria_8/canales.js
@@ -0,0 +1,51 @@
+async function getPeliculas() {
+ let jsonResultado = await fetch("https://swapi.dev/api/films/").then(
+ (respuesta) => respuesta.json()
+ );
+ let listaPeliculas = jsonResultado.results;
+
+ let listaTitulos = listaPeliculas.map((film) => {
+ return film.title;
+ });
+ let listaAnos = listaPeliculas.map((film) => {
+ return parseInt(film.release_date.split("-")[0]);
+ });
+ return { titulos: listaTitulos, anos: listaAnos };
+}
+
+getPeliculas().then((respuesta) => {
+ console.log(respuesta);
+ const ctx = document.getElementById("myChart");
+
+ const myChart = new Chart(ctx, {
+ type: "line",
+ data: {
+ labels:respuesta.titulos,
+ datasets: [
+ {
+ label: "Año de Lanzamiento",
+ data: respuesta.anos,
+ backgroundColor: [
+ "rgba(255, 99, 132, 1)",
+ "rgba(255, 99, 132, 1)",
+ "rgba(255, 99, 132, 1)",
+ "rgba(255, 99, 132, 1)",
+ "rgba(255, 99, 132, 1)",
+ "rgba(255, 99, 132, 1)",
+ ],
+ borderColor: [
+ "rgba(255, 99, 132, 1)",
+ "rgba(255, 99, 132, 1)",
+ "rgba(255, 99, 132, 1)",
+ "rgba(255, 99, 132, 1)",
+ "rgba(255, 99, 132, 1)",
+ "rgba(255, 99, 132, 1)",
+ ],
+ borderWidth: 1,
+ },
+ ],
+ },
+ options: {
+ },
+ });
+});