Foros del Web » Programando para Internet » Javascript »

Graficas Chart, actualizar gráficas

Estas en el tema de Graficas Chart, actualizar gráficas en el foro de Javascript en Foros del Web. Hola que tal, tengo el siguiente problema cuando grafico unos parámetros todo sale bien la primera vez pero si muestro la grafico de otros parámetros ...
  #1 (permalink)  
Antiguo 08/01/2020, 17:41
Avatar de emilio_viguri  
Fecha de Ingreso: junio-2011
Ubicación: Mexico
Mensajes: 113
Antigüedad: 8 años, 9 meses
Puntos: 3
Pregunta Graficas Chart, actualizar gráficas

Hola que tal, tengo el siguiente problema cuando grafico unos parámetros todo sale bien la primera vez pero si muestro la grafico de otros parámetros la grafica se muestra pero al pasar el ratón sobre las graficas esta muestran los parámetros de la otras graficas entonces llega un momento que ya no se que parámetros estoy visualizando...

Como se actualiza o borran los parámetros para que se muestren si tener que actualizar la pagina de nuevo...

encontré esto pero no me funciono no muestra las graficas Liga
Código Javascript:
Ver original
  1. var ctx = document.getElementById('canvas').getContext('2d');
  2. if (window.grafica) {
  3.     window.grafica.clear();
  4.     window.grafica.destroy();
  5. }
  6. window.grafica = new Chart(ctx, {/* Opciones aquí */});

Mi código de graficas es este, si lo doy clic la primera ves sin problemas pero con forme le das clic existe el problema ...
Código Javascript:
Ver original
  1. <script>
  2. function ingresoMes(r){
  3.   var Y = new Date();
  4.   //Grafica cirular de Ingresos & Egresos
  5. var ChartMesCirculo = document.getElementById('myChartMes').getContext('2d');
  6. var myChartMesCirculo = new Chart(ChartMesCirculo, {
  7.     type: 'doughnut',
  8.     data: {
  9.       datasets: [{
  10.       data: r,
  11.       backgroundColor: [ window.chartColors.grisA, window.chartColors.verdeA, window.chartColors.verde ],
  12.       label: 'Dataset 0'
  13.       }],
  14.       labels: [ Y.getFullYear()-2, Y.getFullYear()-1, Y.getFullYear() ]
  15.     },
  16.     options: {
  17.       responsive: true,
  18.     legend: {
  19.       position: 'top'
  20.     },
  21.     title: {
  22.       display: true,
  23.       text: 'Ingresos en Mes <?=date('m');?> '
  24.     },
  25.     animation: {
  26.       animateScale: true,
  27.       animateRotate: true
  28.     }
  29.     }
  30. });
  31. }
  32. </script>
  33.  
  34. <script>
  35. function ingresoAno(res){
  36.   var Y = new Date();
  37.   //Grafica cirular de Ingresos & Egresos
  38. var ChartAnoCirculo = document.getElementById('myChartAno').getContext('2d');
  39. var myChartAnoCirculo = new Chart(ChartAnoCirculo, {
  40.     type: 'doughnut',
  41.     data: {
  42.       datasets: [{
  43.       data:  res,
  44.       backgroundColor: [ window.chartColors.grisA, window.chartColors.verdeA, window.chartColors.verde ],
  45.       label: 'Dataset 0'
  46.       }],
  47.       labels: [ Y.getFullYear()-2, Y.getFullYear()-1, Y.getFullYear() ]
  48.     },
  49.     options: {
  50.       responsive: true,
  51.     legend: {
  52.       position: 'top'
  53.     },
  54.     title: {
  55.       display: true,
  56.       text: 'Facturas de ingresos por año'
  57.     },
  58.     animation: {
  59.       animateScale: true,
  60.       animateRotate: true
  61.     }
  62.     }
  63. });
  64. }
  65. </script>
  66.  
  67. <script>
  68. function MesXpagar(nom,datnom){
  69.   //Grafica de barras de meses por pagar
  70.   var ChartMesxPagar = document.getElementById('myChartMesxPagar').getContext('2d');
  71.   var myChartMesxPagar = new Chart(ChartMesxPagar, {
  72.     type: 'bar',
  73.     data: {
  74.       labels: nom,
  75.       datasets: [
  76.         {
  77.           label: 'Ingresos X pagar',
  78.           backgroundColor: window.chartColors.verdeA,
  79.           stack: 'Stack 0',
  80.           data: datnom
  81.         }
  82.       ]
  83.     },
  84.     options: {
  85.       title: {
  86.         display: true,
  87.         text: 'Facturas de Ingresos Por Pagar '
  88.       },
  89.       tooltips: {
  90.         mode: 'index',
  91.         intersect: false
  92.       },
  93.       responsive: true,
  94.       scales: {
  95.         xAxes: [{
  96.           stacked: true
  97.         }],
  98.         yAxes: [{
  99.           stacked: true
  100.         }]
  101.       }
  102.     }
  103. });
  104. }
  105. </script>
  106.  
  107. <script>
  108. function PorAnos(uno, dos, tre){
  109. var Y = new Date();
  110. var ChartPorAnos = document.getElementById('myChartPorAnos').getContext('2d');
  111. var myChartPorAnos = new Chart(ChartPorAnos, {
  112.   type: 'bar',
  113.   data: {
  114.     labels: ['Enero','Febrero','Marzo','Abril','Mayo','Junio','Julio','Agosto','Septiembre','Octubre','Noviembre','Diciembre'],
  115.     datasets: [
  116.       {
  117.         label: Y.getFullYear()-2,
  118.         backgroundColor: window.chartColors.gris,
  119.         borderColor: window.chartColors.grisA,
  120.         borderWidth: 1,
  121.         data: uno },
  122.       {
  123.         label: Y.getFullYear()-1,
  124.         backgroundColor: window.chartColors.verdeA,
  125.         borderColor: window.chartColors.verde,
  126.         borderWidth: 3,
  127.         data: dos },
  128.       {
  129.         label: Y.getFullYear(),
  130.         backgroundColor: window.chartColors.verde,
  131.         borderColor: window.chartColors.verdeA,
  132.     borderWidth: 1,
  133.         data: tre
  134.        }
  135.      ]},
  136.    options: {
  137.      responsive: true,
  138.      legend: {
  139.        position: 'top'
  140.    },
  141.    title: {
  142.      display: true,
  143.      text: 'Ingresos & Egresos del año <?=date('Y');?>'
  144.    }
  145.    }
  146. });
  147. }
  148. </script>
__________________
Ing. Emilio Viguri de NEXCEN Visitamos en lo que podamos ayudarte.



La zona horaria es GMT -6. Ahora son las 19:22.