Soy nuevo en generar un gráfico usando el mecanismo ajax y chartjs. Parece que logré generar el gráfico pero están trazados incorrectamente. Por favor, ilumíneme sobre cómo podría mejorar. Realmente lo agradecería Gracias
El siguiente es mi código en javascript para trazar el gráfico
var ctx = document.getElementById('myChart').getContext('2d'); $.ajax({ url:"/dashboard", type:"POST", data: {}, error: function() { alert("Error"); }, success: function(data, status, xhr) { debugger // declare all variables to draw chart var chartDim = {}; var chartDim = data.chartDim; var xLabels = data.labels; var vLabels = []; var vData = []; let newValues =[] // get from database to push to draw the chart for (const [key, values] of Object.entries(chartDim)) { vLabels.push(key); let newValues = values.map(myFunction); debugger; vData.push(newValues); } debugger var myChart = new Chart(ctx, { data: { labels: xLabels, datasets: [] }, options: { responsive: false } }); // draw to chart debugger for (i= 0; i < vLabels.length; i++ ) { myChart.data.datasets.push({ label: vLabels[i], type: "bar", // borderColor: '#'+(0x1ff0000+Math.random()*0xffffff).toString(16).substr(1,6), borderColor: '#'+(0x1100000+Math.random()*0xffffff).toString(16).substr(1,6), backgroundColor: "rgba(249, 238, 236, 0.74)", data: vData[i], spanGaps: true }); myChart.update(); } }})Esto sucede porque mientras crea su gráfico, empuja cada punto de datos como un nuevo conjunto de datos. En su lugar, solo necesita usar un solo conjunto de datos y pasarle la matriz de datos de esta manera:
var myChart = new Chart(ctx, { type: 'bar', data: { labels: xLabels, datasets: [{ borderColor: '#' + (0x1100000 + Math.random() * 0xffffff).toString(16).substr(1, 6), backgroundColor: "rgba(249, 238, 236, 0.74)", data: vData, spanGaps: true }] }, options: { responsive: false } });