Dynamically filling Google Gantt with JSON data from database-CodePudding

I am using Gantt Charts from Google Developers and I am attempting to generate the chart using data from Database instead of hardcoded data.

The chart structure is: Task ID, Task Name, End Date, Duration, Percent Complete, Dependency in order to display data. (example-

CodePudding user response：

Your code will not wait for the $.getJSON to fiinish executing. Before you get data from the server the chart.draw(data, options); will be executed with null values.

Do jquery ajax call and on success execute the following chart rendering codes like this:

<script type="text/javascript">
    google.charts.load('current', { 'packages': ['gantt'] });
    google.charts.setOnLoadCallback(drawChart);

    function drawChart() {
        var data = new google.visualization.DataTable();
        data.addColumn('string', 'Task ID');
        data.addColumn('string', 'Task Name');
        data.addColumn('string', 'Resource')
        data.addColumn('date', 'Start Date');
        data.addColumn('date', 'End Date');
        data.addColumn('number', 'Duration');
        data.addColumn('number', 'Percent Complete');
        data.addColumn('string', 'Dependencies');   


        $.ajax({
            method: "GET",
            url: "/GetChartData"
        })
        .done(function( data ) {
        
            var options = {
                height: 400,
                gantt: {
                  trackHeight: 30
                }
              };

            var chart = new google.visualization.Gantt(document.getElementById('chart_div'));
            chart.draw(data, options);
    
        });   
    }
</script>