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 originalvar ctx = document.getElementById('canvas').getContext('2d');
if (window.grafica) {
window.grafica.clear();
window.grafica.destroy();
}
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<script>
function ingresoMes(r){
var Y = new Date();
//Grafica cirular de Ingresos & Egresos
var ChartMesCirculo = document.getElementById('myChartMes').getContext('2d');
var myChartMesCirculo = new Chart(ChartMesCirculo, {
type: 'doughnut',
data: {
datasets: [{
data: r,
backgroundColor: [ window.chartColors.grisA, window.chartColors.verdeA, window.chartColors.verde ],
label: 'Dataset 0'
}],
labels: [ Y.getFullYear()-2, Y.getFullYear()-1, Y.getFullYear() ]
},
options: {
responsive: true,
legend: {
position: 'top'
},
title: {
display: true,
text: 'Ingresos en Mes <?=date('m');?> '
},
animation: {
animateScale: true,
animateRotate: true
}
}
});
}
</script>
<script>
function ingresoAno(res){
var Y = new Date();
//Grafica cirular de Ingresos & Egresos
var ChartAnoCirculo = document.getElementById('myChartAno').getContext('2d');
var myChartAnoCirculo = new Chart(ChartAnoCirculo, {
type: 'doughnut',
data: {
datasets: [{
data: res,
backgroundColor: [ window.chartColors.grisA, window.chartColors.verdeA, window.chartColors.verde ],
label: 'Dataset 0'
}],
labels: [ Y.getFullYear()-2, Y.getFullYear()-1, Y.getFullYear() ]
},
options: {
responsive: true,
legend: {
position: 'top'
},
title: {
display: true,
text: 'Facturas de ingresos por año'
},
animation: {
animateScale: true,
animateRotate: true
}
}
});
}
</script>
<script>
function MesXpagar(nom,datnom){
//Grafica de barras de meses por pagar
var ChartMesxPagar = document.getElementById('myChartMesxPagar').getContext('2d');
var myChartMesxPagar = new Chart(ChartMesxPagar, {
type: 'bar',
data: {
labels: nom,
datasets: [
{
label: 'Ingresos X pagar',
backgroundColor: window.chartColors.verdeA,
stack: 'Stack 0',
data: datnom
}
]
},
options: {
title: {
display: true,
text: 'Facturas de Ingresos Por Pagar '
},
tooltips: {
mode: 'index',
intersect: false
},
responsive: true,
scales: {
xAxes: [{
stacked: true
}],
yAxes: [{
stacked: true
}]
}
}
});
}
</script>
<script>
function PorAnos(uno, dos, tre){
var Y = new Date();
var ChartPorAnos = document.getElementById('myChartPorAnos').getContext('2d');
var myChartPorAnos = new Chart(ChartPorAnos, {
type: 'bar',
data: {
labels: ['Enero','Febrero','Marzo','Abril','Mayo','Junio','Julio','Agosto','Septiembre','Octubre','Noviembre','Diciembre'],
datasets: [
{
label: Y.getFullYear()-2,
backgroundColor: window.chartColors.gris,
borderColor: window.chartColors.grisA,
borderWidth: 1,
data: uno },
{
label: Y.getFullYear()-1,
backgroundColor: window.chartColors.verdeA,
borderColor: window.chartColors.verde,
borderWidth: 3,
data: dos },
{
label: Y.getFullYear(),
backgroundColor: window.chartColors.verde,
borderColor: window.chartColors.verdeA,
borderWidth: 1,
data: tre
}
]},
options: {
responsive: true,
legend: {
position: 'top'
},
title: {
display: true,
text: 'Ingresos & Egresos del año <?=date('Y');?>'
}
}
});
}
</script>