I have a gantt chart whose data I retrieved from the database using ajax, here is the code:
$.getJSON('src/json/schedule/data.php', function(data){
if(data.length >0){
var dta = [];
for(var i =0;i<data.length;i++)dta.push(data[i]);
Highcharts.ganttChart('schedule', {
title: {
text: ''
},
accessibility: {
point: {
descriptionFormatter: function (point) {
return Highcharts.format(
point.milestone ?
'{point.name}, milestone for {point.kontraktor} at {point.x:%Y-%m-%d}.' :
'{point.name}, assigned to {point.kontraktor} from {point.x:%Y-%m-%d} to {point.x2:%Y-%m-%d}.',
{ point }
);
}
}
},
yAxis: {
type: 'category',
grid: {
enabled: true,
borderColor: 'rgba(0,0,0,0.3)',
borderWidth: 1,
columns: [{
title: {
text: 'Project'
},
labels: {
format: '{point.name}'
}
},{
title: {
text: 'Durasi'
},
labels: {
formatter: function () {
var point = this.point,
days = (1000 * 60 * 60 * 24),
number = (point.x2 - point.x) / days;
return Math.round(number * 100) / 100;
}
}
}, {
labels: {
format: '{point.start:%e %b %Y}'
},
title: {
text: 'Start'
}
}, {
title: {
text: 'Finish'
},
offset: 30,
labels: {
format: '{point.end:%e %b %Y}'
}
}]
}
},
tooltip: {
xDateFormat: '%e %b %Y'
},
series: [{
name: 'Project 1',
data: dta
}],
exporting: {
sourceWidth: 1000
}
});
}
});
data.php
header("Content-type: application/json");
include 'config/database.php';
$db = new database();
$mysqli = $db->connect();
$i = 1;
$y = 0;
$sql = "SELECT* FROM data_paket";
$result = $mysqli->query($sql);
while ($row = $result->fetch_assoc()) {;
$data[$i]['code'] = $row['kode_project'];
$data[$i]['name'] = $row['nama_paket'];
$data[$i]['kontraktor'] = $row['kontraktor_spv'];
date_default_timezone_set('Asia/Jakarta');
$data[$i]['start'] = strtotime($row['start']) * 1000;
$data[$i]['end'] = strtotime($row['finish']) * 1000;
$data[$i]['y'] = $y;
$i++;
$y++;
}
$out = array_values($data);
echo json_encode($out);
from there I want to create a data filter using the select dropdown whose value is sent to data.php. like :
<select id="code">
<option value="PR001">PR001</option>
<option value="PR002">PR002</option>
</select>
is it possible, or is there some other way i can do to filter my data from database and display it in chart .