title: Dynamically create chartjs charts in a sidebar
body: <p>I am loading a toggled sidebar's content when a category is selected from a list on the main page. In this sidebar, I am using ajax to retrive the sub-categories for that category and display them.</p>
  <p>For each sub-category, I need to create a chartjs line chart and display it in the sidebar. The number of sub-categories can vary, so sometimes the code it returns many be:</p>
  <pre><code>&lt;h1&gt; Sub-Category 01&lt;/h1&gt;
  &lt;div&gt;&lt;canvas id=&quot;line-chart01&quot;&gt;&lt;/canvas&gt;&lt;/div&gt;
  </code></pre>
  <p>Then sometimes, it might generate two or three.</p>
  <pre><code>&lt;h1&gt; Sub-Category 01&lt;/h1&gt;
  &lt;div&gt;&lt;canvas id=&quot;line-chart01&quot;&gt;&lt;/canvas&gt;&lt;/div&gt;
  
  &lt;h1&gt; Sub-Category 02&lt;/h1&gt;
  &lt;div&gt;&lt;canvas id=&quot;line-chart02&quot;&gt;&lt;/canvas&gt;&lt;/div&gt;
  </code></pre>
  <p>The  code to generate the chartjs objects would need to be similar to this, but I am stuck as to how to generate this on the main page as I only know how many charts to generate after the category has been selected:</p>
  <pre><code>new Chart(document.getElementById(&quot;line-chart01&quot;), {
  type: 'line',
  data: {
  labels: ['Jan','Feb','Mar', 'April'],
  datasets: [{ 
      data: [86,114,106,106],
      label: &quot;Values&quot;,
      borderColor: &quot;#3e95cd&quot;,
      fill: false
    }
  ]
  },
  options: {}
  });
  </code></pre>
  <p>The function which opens the sidebar and loads the content is:</p>
  <pre><code>function openSidebar(catID){
      
      var dataString = 'catID='+catID;
      $.ajax({
      type: &quot;POST&quot;,
      url: &quot;load.php&quot;,
  
      data: dataString,
      cache: false,
      success: function(html) {
           document.getElementById(&quot;sidebarContent&quot;).innerHTML = html;
      }
      });
              
  }
  </code></pre>
  <p>Can anyone suggest how to go about this? I have found threads loading new data and updating a chart which has been generated on the page already, but nothing related to what I'm trying to do here. Thanks.</p>