Estoy cargando el contenido de una barra lateral alternada cuando se selecciona una categoría de una lista en la página principal. En esta barra lateral, estoy usando ajax para recuperar las subcategorías de esa categoría y mostrarlas.

Para cada subcategoría, necesito crear un gráfico de líneas chartjs y mostrarlo en la barra lateral. El número de subcategorías puede variar, por lo que a veces el código que devuelve puede ser:

 <h1> Sub-Category 01</h1> <div><canvas id="line-chart01"></canvas></div>

Entonces, a veces, podría generar dos o tres.

 <h1> Sub-Category 01</h1> <div><canvas id="line-chart01"></canvas></div> <h1> Sub-Category 02</h1> <div><canvas id="line-chart02"></canvas></div>

El código para generar los objetos chartjs debería ser similar a este, pero no sé cómo generar esto en la página principal, ya que solo sé cuántos gráficos generar después de seleccionar la categoría:

 new Chart(document.getElementById("line-chart01"), { type: 'line', data: { labels: ['Jan','Feb','Mar', 'April'], datasets: [{ data: [86,114,106,106], label: "Values", borderColor: "#3e95cd", fill: false } ] }, options: {} });

La función que abre la barra lateral y carga el contenido es:

 function openSidebar(catID){ var dataString = 'catID='+catID; $.ajax({ type: "POST", url: "load.php", data: dataString, cache: false, success: function(html) { document.getElementById("sidebarContent").innerHTML = html; } }); }

¿Alguien puede sugerir cómo hacer esto? He encontrado subprocesos cargando nuevos datos y actualizando un gráfico que ya se ha generado en la página, pero nada relacionado con lo que estoy tratando de hacer aquí. Gracias.