Filter highchart gantt base on dropdown select with ajax

Viewed 49

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 .

0 Answers
Related