Based on this demo: https://jsfiddle.net/api/post/library/pure/
I'm trying to create a gantt chart.
This is the code I'm using:
google.load("visualization", "1.1", {packages:["gantt"]});
google.setOnLoadCallback(drawGantt());
function drawGantt() {
var $ganttData = new google.visualization.DataTable();
$ganttData.addColumn('string', 'Task ID');
$ganttData.addColumn('string', 'Task Name');
$ganttData.addColumn('string','Resource')
$ganttData.addColumn('date', 'Start Date');
$ganttData.addColumn('date', 'End Date');
$ganttData.addColumn('number', 'Duration');
$ganttData.addColumn('number', 'Percent Complete');
$ganttData.addColumn('string', 'Dependencies');
$array.push(['0000050000000000110010002','ddd','MKT',new Date(2015,11 - 1,26),new Date(2015,11 - 1,30),daysToMilliseconds(daydiff(new Date(2015,11 - 1,26),new Date(2015,11 - 1,30))),25,null])
$array.push(['0000050000000000110010001','Actividad 1','MKT',new Date(2015,11 - 1,10),new Date(2015,11 - 1,11),daysToMilliseconds(daydiff(new Date(2015,11 - 1,10),new Date(2015,11 - 1,11))),4,null]);
$ganttData.addRows($array);
var $ganttOptions = { height: 300, gantt: { trackHeight: 30 } };
var $ganttChart = new google.visualization.GanttChart(document.getElementById('div-Actividades'));
$ganttChart.draw($ganttData, $ganttOptions);
}
As a result, I have this non-understanding error:
This image is from Mozilla Firefox
The provided example does not work for me in any browser due to the following issues:
google.setOnLoadCallback
function expects function callback, you need to replace google.setOnLoadCallback(drawGantt());
with google.setOnLoadCallback(drawGantt);
$array
is not initialized,eg var $array = [];
null
to Duration
column, it will be calculated automatically based on Start Date
and Start Date
valuesModified example
google.load("visualization", "1.1", { packages: ["gantt"] }); google.setOnLoadCallback(drawGantt); function drawGantt() { var dataTable = new google.visualization.DataTable(); dataTable.addColumn('string', 'Task ID'); dataTable.addColumn('string', 'Task Name'); dataTable.addColumn('string','Resource') dataTable.addColumn('date', 'Start Date'); dataTable.addColumn('date', 'End Date'); dataTable.addColumn('number', 'Duration'); dataTable.addColumn('number', 'Percent Complete'); dataTable.addColumn('string', 'Dependencies'); data = []; data.push(['0000050000000000110010002','ddd','MKT',new Date(2015,11 - 1,26),new Date(2015,11 - 1,30),null,25,null]) data.push(['0000050000000000110010001','Actividad 1','MKT',new Date(2015,11 - 1,10),new Date(2015,11 - 1,11),null,4,null]); dataTable.addRows(data); var ganttOptions = { height: 300, gantt: { trackHeight: 30 } }; var ganttChart = new google.visualization.GanttChart(document.getElementById('div-Actividades')); ganttChart.draw(dataTable, ganttOptions); }
<script type="text/javascript" src="https://www.google.com/jsapi"></script> <div id="div-Actividades"></div>
The specified example works properly in Google Chrome (v46), Mozilla Firefox (v41.0) and IE 9+
Probably something in the javascript engine with firefox that is different from IE/Chrome, maybe the format of new Date(2015,11 - 1,11)
?
Look at this answer to another question .
Here is some more interesting reading about formatting dates.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.