Gantt Chart in dashboard

PHPMaker General Discussion (PHPMaker)
1

Hey,In the previous version I used a gantt table in a dashboard.
I then decided to recreate this in 2020.I use the code below as described in the manual, but the gantt table does not appear. Am I missing something?// Place the following code in Startup Scriptgoogle.charts.load(‘current’, {‘packages’:[‘gantt’]});
google.charts.setOnLoadCallback(function() {

// Add <div> for chart
$(".ew-center").append('<div id="chart_div"></div>');
// Create data table
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');

data.addRows(<?php echo ExecuteJson("SELECT id_afwezigheden, naam, opmerking,startdatum, einddatumplus1, aantal_dagen, gevorderd ,vervolg FROM afwezigheden_huidige ", ["header" => FALSE, "array" => TRUE, "convertdate" => TRUE]); ?>);

	var options = {
	height: 750 // Change height
};
var chart = new google.visualization.Gantt(document.getElementById('chart_div'));
chart.draw(data, options);

});

2

From the help file:
Make sure you add h ttps://www.gstatic.com/charts/loader.js under Tools → Scripts & Stylesheets → Scripts (Global) first.

3

Thanks.I 've already added h ttps://www.gstatic.com/charts/loader.js under Tools → Scripts & Stylesheets → Scripts (Global)Also in debug mode I see no indication of a gantt graph.

4

in the demo project there is also:
data.addRows(<?php echo ExecuteJson("SELECT TaskID, TaskName, ResourceID, Start, End, Duration, PercentComplete, Dependencies FROM tasks", ["header" => FALSE, "array" => TRUE, "convertdate" => TRUE, "datatypes" => [3 => "date", 4 => "date", 5 => "number", 6 => "number"]]); ?>);what is the purpose of those data types?when I add this I get an error and blank field

5

solvedjust add"datatypes" => [0 => “string”,1 => “string”,2 => “string”,3 => “date”, 4 => “date”, 5 => “number”, 6 => “number”,7 => “string”]]); ?>);

6

Hey,
when I want to display the report with the gantt card in a dashboard, only the table without gantt appears. How can I solve this?Thank you

7

Google Gantt Chart is JavaScript. You may press F12 in your browser and go to the Console panel to check for JavaScript errors.

8

No errors, no warnings,
just: [Violation] Added synchronous DOM mutation listener to a ‘DOMNodeInserted’ event. Consider using MutationObserver to make the page more responsive.but also no google ganttThanks for all the help

9

tom wrote:
// Place the following code in Startup ScriptMake sure if you put in in Startup Script. If you put it in the Dashboard template directly, you need to enclose the code inloadjs.ready(“load”, function() {
// your code
});

tom wrote:
// Add

for chart
$(“.ew-center”).append(‘
’);In dashboard report there is no div.ew-center, make sure you append add your chart div in an existing HTML element in your dashboard template, or you can put the
in the dashboard template directly.

10

Thanks Arbei,This works!

11

tom wrote:

solved

just add

“datatypes” => [0 => “string”,1 => “string”,2
=> “string”,3 => “date”, 4 => “date”, 5 =>
“number”, 6 => “number”,7 => “string”]]); ?>);


Please Tom where did you add this code?