diff --git a/.vscode/settings.json b/.vscode/settings.json
index d93df87..b6bb7f8 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -11,14 +11,18 @@
         "aplicación",
         "archivo",
         "audiencias",
+        "autocolors",
         "avanzados",
         "bootcamps",
         "botón",
         "bottm",
         "Bottm",
         "cada",
+        "cambiar",
         "Cantidad",
         "capacidad",
+        "chartjs",
+        "choroplet",
         "choropleth",
         "científicos",
         "cliente",
diff --git a/delete.js b/delete.js
index ec35e48..3b9a31d 100644
--- a/delete.js
+++ b/delete.js
@@ -73,4 +73,221 @@ function handleFileUpload(event) {
                 }
             }
         });
-    }
\ No newline at end of file
+    }
+
+/*intento fallido*/
+export default function updatedCharts() {
+  //df_clean json file
+  async function fetchDfData(){
+    const url = 'json/df_clean.json';
+    const response = await fetch(url);
+    const dfData = await response.json();
+    return dfData;
+  };
+
+  fetchDfData().then(dfData => {
+    const continentData = dfData.map(continent => continent.continent);
+    const quantityData = dfData.map(quantity => quantity.quantity);
+
+    ctxGraphRightPlot.data.labels = continent;
+    ctxGraphRightPlot.data.dataset.data = quantity;
+    ctxGraphRightPlot.update();
+  });
+
+  //rfm_table json file
+  async function fetchRfmData(){
+    const url = 'json/rfm_table.json';
+    const response = await fetch(url);
+    const rfmData = await response.json();
+    return rfmData;
+  };
+
+  fetchRfmData().then(rfmData => {
+    const continent = rfmData.map(function (index) {
+      return index.continent;
+    });
+  });
+
+  //segmentation_df json file
+  async function fetchSegmentData(){
+    const url = 'json/segmentation_df.json';
+    const response = await fetch(url);
+    const segmentData = await response.json();
+    return segmentData;
+  };
+
+  let clusterTagName = fetchSegmentData().then(segmentData => {
+    const clusterTag = segmentData.map(function (index) {
+      return index.cluster_meaning;
+    });
+  });
+
+}
+
+//*******************INTENTO FALLIDO 2 */
+/*import { doughnutConfig, barConfig, scatterConfig, polarAreaConfig, radarConfig } from "../js/configsPlots.js";
+
+ //rfm_table json file
+fetch('json/rfm_table.json')
+.then(function(response){
+  if(response.ok == true){
+    return response.json();
+  }
+})
+.then(function(data) {
+  updatedCharts(ctxMidgraphLeft, data, barConfig);
+});
+
+//segmentation_df json file
+fetch('json/segmentation_df.json')
+.then(function(response){
+  if(response.ok == true){
+    return response.json();
+  }
+})
+.then(function(data) {
+  updatedCharts(ctxMidgraphCenter, data, radarConfig);
+}); */
+
+//Mapamundi
+/* fetch('https://unpkg.com/world-atlas/countries-50m.json').then((r) => r.json()).then((data) => {
+  const countries = ChartGeo.topojson.feature(data, data.objects.countries).features;
+
+const chart = new Chart(ctxBottmLeft.getContext("2d"), {
+type: 'choropleth',
+data: {
+  labels: countries.map((d) => d.properties.name),
+  datasets: [{
+    label: 'Countries',
+    data: countries.map((d) => ({feature: d, value: Math.random()})),
+  }]
+},
+options: {
+  showOutline: true,
+  showGraticule: true,
+  plugins: {
+    legend: {
+      display: false
+    },
+  },
+  scales: {
+    projection: {
+      axis: 'x',
+      projection: 'equalEarth'
+    }
+  }
+}
+});
+}); */
+
+document.querySelector('#loadDataButton').addEventListener('click', loadDataDf);
+document.querySelector('#loadDataButton').addEventListener('click', loadDataDf);
+document.querySelector('#loadDataButton').addEventListener('click', loadDataDf);
+
+const ctxGraphCenter = document.querySelector("#canvas__graph-center");
+const ctxGraphRight = document.querySelector("#canvas__graph-right");
+const ctxMidgraphLeft = document.querySelector("#canvas__midgraph-left");
+const ctxMidgraphCenter = document.querySelector("#canvas__midgraph-center");
+const ctxBottmLeft = document.querySelector("#canvas__bottm-left");
+const ctxBottmCenter = document.querySelector("#canvas__bottm-center");
+
+//df_clean json file
+function loadDataDf() {
+  fetch('json/df_clean.json')
+  .then(function(response){
+    if(response.ok == true){
+      return response.json();
+    }
+  })
+  .then(data => viewChart(data))
+  .catch((error) => console.error("Error al cargar datos:", error));
+}
+
+//rfm_table json file
+function loadDataRFM() {
+  fetch('json/rfm_table.json')
+  .then(function(response){
+    if(response.ok == true){
+      return response.json();
+    }
+  })
+  .then(data => viewChart(data))
+  .catch((error) => console.error("Error al cargar datos:", error));
+}
+
+//Gráfico 1 Promedio de ventas
+const ctxGraphCenterPlot = new Chart(ctxGraphCenter, doughnutConfig);
+
+//Gráfico 2 Gasto total anual (USD)
+
+function viewChart(dataJson) {
+  new Chart(ctxGraphRight, {
+    type: 'bar',
+    data: {
+      labels: dataJson.map(row => row.continent),
+      datasets: [{
+        label: 'Continente',
+        data: dataJson.map(row => row.total),
+        backgroundColor: [
+      '#EF6A32',
+      '#FFF6E9',
+      '#36A2EB',
+      '#017351',
+      '#FBBF45',
+      '#B1AFFF',
+      '#A12A5E',
+      '#03C383',
+      '#26294A',
+      '#AAD962',
+      '#FF1A68',
+      '#01545A',
+      '#ED0345',
+      '#710162',
+      '#110141'
+
+    ],
+    borderColor: [
+      '#EF6A32',
+      '#FFF6E9',
+      '#36A2EB',
+      '#017351',
+      '#FBBF45',
+      '#B1AFFF',
+      '#A12A5E',
+      '#03C383',
+      '#26294A',
+      '#AAD962',
+      '#FF1A68',
+      '#01545A',
+      '#ED0345',
+      '#710162',
+      '#110141'
+    ],
+    borderWidth: 1
+      }]
+    },
+    options: {
+      responsive: true,
+      plugins: {
+        legend: {
+          position: 'top',
+        }},
+      scales: {
+        y: {
+          beginAtZero: true
+        }
+      }
+    }
+  });
+}
+//Gráfico 3 Cantidad total de usuarios
+const ctxMidgraphLeftPlot = new Chart(ctxMidgraphLeft, scatterConfig);
+
+//Gráfico 4 Segmentos por región
+const ctxMidgraphCenterPlot = new Chart(ctxMidgraphCenter, polarAreaConfig);
+
+//Gráfico 5 Ventas por continente (USD)*** cambiar a choroplet
+const ctxBottmLeftPlot = new Chart(ctxBottmLeft, radarConfig);
+
+//Gráfico 6 Segmentos por continente
+const ctxBottmCenterPlot = new Chart(ctxBottmCenter, polarAreaConfig);
diff --git a/index.html b/index.html
index 0b70d3f..be01b32 100644
--- a/index.html
+++ b/index.html
@@ -95,56 +95,6 @@ <h2 class="title">
       </footer>
     </div>
 
-    <!-- <template id="board-template">
-      <div class="canvas canvas__items">
-        <h2 class="canvas__filter1 canvas__item">Filtro a</h2>
-        <h2 class="canvas__filter2 canvas__item">Filtro b</h2>
-        <h2 class="canvas__filter3 canvas__item">Filtro c</h2>
-
-        <section class="canvas__graph-left canvas__item">
-            <h2 class="title">
-              Dato
-            </h2>
-        </section>
-        <section class="canvas__graph-center canvas__item">
-            <h2 class="title">
-                Gráfica 1
-            </h2>
-        </section>
-        <section class="canvas__graph-right canvas__item">
-            <h2 class="title">
-                Gráfica 2
-            </h2>
-        </section>
-
-        <section class="canvas__midgraph-left canvas__item">
-            <h2 class="title">
-                Gráfica 3
-            </h2>
-        </section>
-        <section class="canvas__midgraph-center canvas__item">
-            <h2 class="title">
-                Gráfica 4
-            </h2>
-        </section>
-
-        <section class="canvas__text canvas__item">
-            <h2>Texto conclusiones</h2>
-        </section>
-
-        <section class="canvas__bar-left canvas__item">
-            <h2 class="title">
-                Gráfica 5
-            </h2>
-        </section>
-        <section class="canvas__bar-center canvas__item">
-            <h2 class="title">
-                Gráfica 6
-            </h2>
-        </section>
-      </div>
-    </template> -->
-
     <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
     <script type="module" src="pages/index.js"></script>
 </body>
diff --git a/js/configsPlots.js b/js/configsPlots.js
index b42abb6..eee263a 100644
--- a/js/configsPlots.js
+++ b/js/configsPlots.js
@@ -1,35 +1,3 @@
-const data = {
-  labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
-  datasets: [{
-    label: 'df_clean data',
-    data: [18, 12, 6, 9, 12, 3, 9],
-    backgroundColor: [
-      'rgba(255, 26, 104, 0.2)'
-    ],
-    borderColor: [
-      'rgba(255, 26, 104, 1)'
-    ],
-    borderWidth: 1
-  }]
-};
-
-const doughnutConfig = {
-  type: 'doughnut',
-  data,
-  options: {
-    responsive: true,
-    plugins: {
-      legend: {
-        position: 'top',
-      }},
-    scales: {
-      y: {
-        beginAtZero: true
-      }
-    }
-  }
-};
-
 const barConfig = {
   type: 'bar',
   data,
diff --git a/pages/index.js b/pages/index.js
index eeb4ab0..003825a 100644
--- a/pages/index.js
+++ b/pages/index.js
@@ -1,87 +1,3 @@
-import { doughnutConfig, barConfig, scatterConfig, polarAreaConfig, radarConfig } from "../js/configsPlots.js";
-
-function updateCharts() {
-  document.querySelector('#loadDataButton').addEventListener('click', fetchDfData);
-  document.querySelector('#loadDataButton').addEventListener('click', fetchRfmData);
-  document.querySelector('#loadDataButton').addEventListener('click', fetchSegmentData);
-
-  //df_clean json file
-  async function fetchDfData(){
-    const url = 'json/df_clean.json';
-    const response = await fetch(url);
-    const dfData = await response.json();
-    return dfData;
-  };
-
-  fetchDfData().then(dfData => {
-    const continent = dfData.map(function (index) {
-      return index.continent;
-    });
-  });
-
-  //rfm_table json file
-  async function fetchRfmData(){
-    const url = 'json/rfm_table.json';
-    const response = await fetch(url);
-    const rfmData = await response.json();
-    return rfmData;
-  };
-
-  fetchRfmData().then(rfmData => {
-    const continent = rfmData.map(function (index) {
-      return index.continent;
-    });
-  });
-
-  //segmentation_df json file
-  async function fetchSegmentData(){
-    const url = 'json/segmentation_df.json';
-    const response = await fetch(url);
-    const segmentData = await response.json();
-    return segmentData;
-  };
-
-  let clusterTagName = fetchSegmentData().then(segmentData => {
-    const clusterTag = segmentData.map(function (index) {
-      return index.cluster_meaning;
-    });
-  });
-
-  ctxGraphRightPlot.data.labels = continent;
-  ctxGraphRightPlot.update();
-}
-
-//Mapamundi
-/* fetch('https://unpkg.com/world-atlas/countries-50m.json').then((r) => r.json()).then((data) => {
-  const countries = ChartGeo.topojson.feature(data, data.objects.countries).features;
-
-const chart = new Chart(ctxBottmLeft.getContext("2d"), {
-type: 'choropleth',
-data: {
-  labels: countries.map((d) => d.properties.name),
-  datasets: [{
-    label: 'Countries',
-    data: countries.map((d) => ({feature: d, value: Math.random()})),
-  }]
-},
-options: {
-  showOutline: true,
-  showGraticule: true,
-  plugins: {
-    legend: {
-      display: false
-    },
-  },
-  scales: {
-    projection: {
-      axis: 'x',
-      projection: 'equalEarth'
-    }
-  }
-}
-});
-}); */
-
 const ctxGraphCenter = document.querySelector("#canvas__graph-center");
 const ctxGraphRight = document.querySelector("#canvas__graph-right");
 const ctxMidgraphLeft = document.querySelector("#canvas__midgraph-left");
@@ -89,21 +5,112 @@ const ctxMidgraphCenter = document.querySelector("#canvas__midgraph-center");
 const ctxBottmLeft = document.querySelector("#canvas__bottm-left");
 const ctxBottmCenter = document.querySelector("#canvas__bottm-center");
 
+document.querySelector('#loadDataButton').addEventListener('click', loadDataDf);
+//document.querySelector('#loadDataButton').addEventListener('click', loadDataDf);
+//document.querySelector('#loadDataButton').addEventListener('click', loadDataDf);
+
+//df_clean json file
+function loadDataDf() {
+  fetch('json/df_clean.json')
+  .then(function(response){
+    if(response.ok == true){
+      return response.json();
+    }
+  })
+  .then((dataInfo) => {
+    const continentInfo = Object.keys(dataInfo.continent);
+    const totalInfo = dataInfo.map(row => row.total);
+    const doughnutConfig = {
+      type: 'doughnut',
+      data: {
+        labels: continentInfo,
+        datasets: [{
+          label: 'Continente',
+          data: totalInfo,
+          backgroundColor: [
+        '#EF6A32',
+        '#FFF6E9',
+        '#36A2EB',
+        '#017351',
+        '#FBBF45',
+        '#B1AFFF',
+        '#A12A5E',
+        '#03C383',
+        '#26294A',
+        '#AAD962',
+        '#FF1A68',
+        '#01545A',
+        '#ED0345',
+        '#710162',
+        '#110141'
+
+      ],
+      borderColor: [
+        '#EF6A32',
+        '#FFF6E9',
+        '#36A2EB',
+        '#017351',
+        '#FBBF45',
+        '#B1AFFF',
+        '#A12A5E',
+        '#03C383',
+        '#26294A',
+        '#AAD962',
+        '#FF1A68',
+        '#01545A',
+        '#ED0345',
+        '#710162',
+        '#110141'
+      ],
+      borderWidth: 1
+        }]
+      },
+      options: {
+        responsive: true,
+        plugins: {
+          legend: {
+            position: 'top',
+          }},
+        scales: {
+          y: {
+            beginAtZero: true
+          }
+        }
+      }
+    };
+
+    const promVentas = new Chart(ctxGraphCenter, doughnutConfig);
+    return promVentas;
+  }
+)
+  .catch((error) => console.error("Error al cargar datos:", error));
+}
+
+//rfm_table json file
+/* function loadDataRFM() {
+  fetch('json/rfm_table.json')
+  .then(function(response){
+    if(response.ok == true){
+      return response.json();
+    }
+  })
+  .then(data => viewChart(data))
+  .catch((error) => console.error("Error al cargar datos:", error));
+} */
+
+//Gráfico 1 Promedio de ventas por continente
 
-//Gráfico 1 Promedio de ventas
-const ctxGraphCenterPlot = new Chart(ctxGraphCenter, doughnutConfig);
 
 //Gráfico 2 Gasto total anual (USD)
-const ctxGraphRightPlot = new Chart(ctxGraphRight, barConfig);
+
 
 //Gráfico 3 Cantidad total de usuarios
-const ctxMidgraphLeftPlot = new Chart(ctxMidgraphLeft, scatterConfig);
+
 
 //Gráfico 4 Segmentos por región
-const ctxMidgraphCenterPlot = new Chart(ctxMidgraphCenter, polarAreaConfig);
+
 
 //Gráfico 5 Ventas por continente (USD)*** cambiar a choroplet
-const ctxBottmLeftPlot = new Chart(ctxBottmLeft, radarConfig);
+
 
 //Gráfico 6 Segmentos por continente
-const ctxBottmCenterPlot = new Chart(ctxBottmCenter, polarAreaConfig);