1

Tengo una duda, tengo una grafica principal en el cual muestro algunos valores.

Mi pregunta o mi duda es, en dicha grafica al momento de seleccionar algún valor quiero que se me cargue otra grafica referenciada al valor al cual le di clic.

¿Es esto posible o no se puede?

Saludos.

var barChartData = {
  labels: ["Enero", "Febrero", "Marzo", "Abril", "Mayo", "Junio", "Julio"],

  datasets: [{

      fillColor: "#6b9dfa",
      strokeColor: "#ffffff",
      highlightFill: "#1864f2",
      highlightStroke: "#ffffff",
      data: [90, 30, 10, 80, 15, 5, 15]

    },
    {

      fillColor: "#e9e225",
      strokeColor: "#ffffff",
      highlightFill: "#ee7f49",
      highlightStroke: "#ffffff",
      data: [40, 50, 70, 40, 85, 55, 15]

    }

  ]

}
var ctx3 = document.getElementById("chart-rea3").getContext("2d");
window.myPie = new Chart(ctx3).Bar(barChartData, {
  responsive: true
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.1/Chart.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<canvas id="chart-rea3" class="pie"></canvas>

Ejemplo, si doy clic en "Marzo", en otra grafica se carguen datos de la semana del mes seleccionado:

var barChartData = {
  labels: ["1er semana", "2da semana", "3er semana", "4ta semana"],

  datasets: [{

      fillColor: "#6b9dfa",
      strokeColor: "#ffffff",
      highlightFill: "#1864f2",
      highlightStroke: "#ffffff",
      data: [90, 30, 10, 80]

    },
    {

      fillColor: "#e9e225",
      strokeColor: "#ffffff",
      highlightFill: "#ee7f49",
      highlightStroke: "#ffffff",
      data: [40, 50, 70, 40]

    }

  ]

}
var ctx3 = document.getElementById("chart-rea4").getContext("2d");
window.myPie = new Chart(ctx3).Bar(barChartData, {
  responsive: true
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.1/Chart.min.js"></script>
<canvas id="chart-rea4" class="pie"></canvas>

Eso es lo que estoy buscando hacer con las graficas cargadas desde SQL y desde el backend con ASP.NET C#.

2
  • Si, es posible, ¿Qué haz intentado hacer?... adjunta el código que tienes hecho. el 1 ago. a las 14:46
  • 1
    Ya adjunte el código de ejemplo sobre lo que quiero lograr. el 1 ago. a las 15:25

1 respuesta 1

0

Vayamos por partes

1.- La versión que estas usando es demasiado vieja, tienes que actualizarte

2.- Una manera es tener todos los datos a mano en una estructura similar a esta:

const DATOS =[
   {mes: "Enero",   semanas : [90,23,34,23]},
   {mes: "Febrero", semanas : [20,22,32,44]},
   {mes: "Marzo" ,  semanas : [50,53,34,21]},
   {mes: "Abril",   semanas : [60,77,44,88]},
];

Otra opción es ir a buscar los datos con ajax

3.- Luego asignamos el evento onClick en las opciones del chart principal, y obtenemos el índice clickeado, de esta manera

onClick: function(event, elements, chart){
  if(elements[0]){
     graficar(elements[0].index);
  }
}

4.- El evento onClick llamará a una función que mostrará el segundo gráfico

5.- Importante es destruirlo previamente (por si ha sido generado anteriormente), con la función destroy()

Demo:

Hacer scroll, el segundo chart se encuentra abajo

const colors = [
      'rgba(255, 99, 132, 0.2)',
      'rgba(255, 159, 64, 0.2)',
      'rgba(75, 192, 192, 0.2)',
      'rgba(54, 162, 235, 0.2)',
      'rgba(153, 102, 255, 0.2)',
      'rgba(201, 203, 207, 0.2)'
    ];
const DATOS =[
   {mes: "Enero",   semanas : [90,23,34,23]},
   {mes: "Febrero", semanas : [20,22,32,44]},
   {mes: "Marzo" ,  semanas : [50,53,34,21]},
   {mes: "Abril",   semanas : [60,77,44,88]},
];

  const ctx = document.getElementById('Chart1');

  new Chart(ctx, {
    type: 'bar',
    data: {
      labels:  DATOS.map(a=>a.mes),
      datasets: [{
        label: 'Meses',
        data: DATOS.map(d=>d.semanas.reduce((a,i)=>a+i)),
        backgroundColor: colors,
      }]
    },
    options: {
      onClick: function(event, elements, chart){
        if(elements[0]){
          graficar(elements[0].index);
        }
      }
    }
  });

let chart2;
function graficar(index){
  const ctx = document.getElementById('Chart2');
  const datos2 = DATOS[index];
  
  const labels = Array.from({length: datos2.semanas.length}, (v, i) => "Semana " + i);
  
  if(chart2) chart2.destroy();
  
  chart2 = new Chart(ctx, {
    type: 'bar',
    data: {
      labels:  labels,
      datasets: [{
        label: datos2.mes,
        data: datos2.semanas,
        backgroundColor: colors[index],
      }]
    }
  });
}
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/chart.umd.min.js"></script>
<canvas id="Chart1" class="pie"></canvas>
<canvas id="Chart2" class="pie"></canvas>

1
  • Muchisimas gracias, tendré en cuenta el actualizarme. el 2 ago. a las 20:15

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.