title: Klipfolio data integration with Highchart Javascript
body: <p>I am working on creating a Klipfolio Gantt chart using Highchart. I am able to create the gantt chart using Klipfolio's Html component, but I am having trouble integrating the data. </p>
  
  <p><strong>Klipfolio HTML Template</strong></p>
  
  <pre><code>&lt;div id="container"&gt;&lt;/div&gt;
  
  &lt;div id="title_text" style="display:none;"&gt;
  {{each data}}
  ${$value.title}
  {{/each}}
  &lt;/div&gt;
  </code></pre>
  
  <p>This pulls the data I need and allows me to add it to the chart script.</p>
  
  <p><strong>Javascript Code - data</strong></p>
  
  <pre><code>var title = $("#title_text");
  </code></pre>
  
  <p>This code adds the data to the categories.</p>
  
  <p><strong>Partial Highchart Script</strong></p>
  
  <pre><code>   $('#container').highcharts({
          chart: {
              type: 'xrange'
          },
          title: {
              text: 'Highcharts X-range study'
          },
          xAxis: {
              type: 'datetime'
          },
          yAxis: {
              title: '',
              categories: [$(title).text()],
              min: 0,
              max: 2
          },
  </code></pre>
  
  <p>The results adds ALL the data as one category though.
  Example</p>
  
  <pre><code>Category 1 []
  Category 2 []
  Category 3 [data 1, data 2, data 3]
  </code></pre>
  
  <p>How do I pull the data and have it separate into individual categories?</p>
  
  <pre><code>Category 1 [data 1]
  Category 2 [data 2]
  Category 3 [data 3]
  </code></pre>