I have been working on a project that involves creating a Gantt chart using Highchart in Klipfolio. I have successfully designed the gantt chart using Klipfolio's Html component, but I am facing challenges with integrating the data properly.
Custom Klipfolio HTML Template
<div id="container"></div>
<div id="title_text" style="display:none;">
{{each data}}
${$value.title}
{{/each}}
</div>
This snippet retrieves the necessary data for me to include in the chart script.
Javascript Snippet - data
var title = $("#title_text");
This piece of code injects the data into the categories.
Incomplete Highchart Script
$('#container').highcharts({
chart: {
type: 'xrange'
},
title: {
text: 'Highcharts X-range study'
},
xAxis: {
type: 'datetime'
},
yAxis: {
title: '',
categories: [$(title).text()],
min: 0,
max: 2
},
However, all the data is combined into one category, which is not the desired outcome.
Category 1 []
Category 2 []
Category 3 [data 1, data 2, data 3]
I am looking for a solution to pull the data and display it in separate categories:
Category 1 [data 1]
Category 2 [data 2]
Category 3 [data 3]