title: Datatables : how to add chart div in child row -
body: <p>how to add chart div in datatables child row ? </p>
  
  <p>my code no work </p>
  
  <p>I'm not programmer :( </p>
  
  <p>demo code</p>
  
  <blockquote>
    <p>https:// codepen.io/intprotest/pen/QXPmBr</p>
  </blockquote>
  
  <p><a href="https://i.stack.imgur.com/blRLN.jpg" rel="nofollow noreferrer">image</a></p>
  
  <p>Thanks ! </p>
  
  <p>code </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(document).ready(function (){
      var table = $('#example').DataTable({
          responsive: true        
      });
  });
   
    
  Highcharts.chart('chart1', {
    
      data: {
          googleSpreadsheetKey: '1KKJgBPhFQzNzvgGHz7ygwuTJl5mXlxh1GTxOYxfyVqg'
      }
    
  
  }); 
  
  &lt;!-- begin snippet: js hide: false console: true babel: false --&gt;</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code> 
   
      &lt;tr&gt;
          &lt;th&gt;Name&lt;/th&gt;
          &lt;th&gt;Position&lt;/th&gt;
          &lt;th &gt;geo &lt;/th&gt;
          &lt;th&gt; ge&lt;/th&gt;
         
          &lt;th class="none"&gt;... &lt;/th&gt;
      &lt;/tr&gt;
  
      &lt;tr&gt;
          &lt;td&gt;HighCharts Code &lt;/td&gt;
          &lt;td&gt;Junior Technical Author&lt;/td&gt;
          &lt;td&gt; 1&lt;/td&gt;
          &lt;td&gt;2 &lt;/td&gt;
          &lt;td&gt;  
     &lt;div id="chart1" style="width: 300px; height: 140px;"&gt;&lt;/div&gt;
       
        &lt;/td&gt;
      &lt;/tr&gt;
     
     </code></pre>
  </div>
  </div>
   </p>