Bug in hours scale with my set of data ... no way to use this marvelous plugin !

Vaucouleur Nicolas

unread,

Mar 13, 2013, 12:56:07 PM3/13/13

to jquer...@googlegroups.com

Hi all,

I encontred a big bug in hours scale, i haved use the last version of plugin (i think) found here : https://github.com/mbielanczuk/jQuery.Gantt/

I tryed to use Gantt with Ajax Json data source... when i load my JSON by AJAX : no trouble but if zoom to put scale in hours, all my task come to the left of the GANTT and dont appear in good time.

To show you in put the JSON result here :

[{"name":"L01","desc":"0000000042","values":[{"id":"0000000042","from":"/Date(1363097640000)/","to":"/Date(1363261800000)/","desc":"OF 0000000042 - Article :8012986Debut :12/03/2013 15:14 - Fin :14/03/2013 12:50DESCRIPTION :AIRWICK 1/2 BOX METAL x 300 BOUGIES PROMOAffaire :2013 09Production :2/150MO :9Changement Format :00:00Dates :1363097640000 - 1363261800000","label":"0000000042","customClass":"ganttBlue"}]},{"name":"L01","desc":"0000000023","values":[{"id":"0000000023","from":"/Date(1363167840000)/","to":"/Date(1363337640000)/","desc":"OF 0000000023 - Article :8012991Debut :13/03/2013 10:44 - Fin :15/03/2013 09:54DESCRIPTION :AIRWICK 1/4 BOX BARQ BOUGIES MULTICOLOR PROMOAffaire :2012 33Production :26/340MO :9Changement Format :00:00Dates :1363167840000 - 1363337640000","label":"0000000023","customClass":"ganttBlue"}]},{"name":"L01","desc":"0000000028","values":[{"id":"0000000028","from":"/Date(1363285440000)/","to":"/Date(1363342500000)/","desc":"OF 0000000028 - Article :8012982Debut :14/03/2013 19:24 - Fin :15/03/2013 11:15DESCRIPTION :AIRWICK 1/4 BOX METAL x 142 BOUGIES PROMOAffaire :2012 35Production :0/144MO :10Changement Format :00:00Dates :1363285440000 - 1363342500000","label":"0000000028","customClass":"ganttBlue"}]},{"name":"L02","desc":"0000000032","values":[{"id":"0000000032","from":"/Date(1363097640000)/","to":"/Date(1363196160000)/","desc":"OF 0000000032 - Article :266142Debut :12/03/2013 15:14 - Fin :13/03/2013 18:36DESCRIPTION :CAISSE PALMOLIVE PEAUX SENSIBLAffaire :2012 42Production :104/240MO :Changement Format :00:00Dates :1363097640000 - 1363196160000","label":"0000000032","customClass":"ganttBlue"}]},{"name":"L02","desc":"0000000035","values":[{"id":"0000000035","from":"/Date(1363104840000)/","to":"/Date(1363197480000)/","desc":"OF 0000000035 - Article :266142Debut :12/03/2013 17:14 - Fin :13/03/2013 18:58DESCRIPTION :CAISSE PALMOLIVE PEAUX SENSIBLAffaire :2012 44Production :60/240MO :Changement Format :00:00Dates :1363104840000 - 1363197480000","label":"0000000035","customClass":"ganttBlue"}]},{"name":"L02","desc":"0000000033","values":[{"id":"0000000033","from":"/Date(1363112040000)/","to":"/Date(1363324380000)/","desc":"OF 0000000033 - Article :266142Debut :12/03/2013 19:14 - Fin :15/03/2013 06:13DESCRIPTION :CAISSE PALMOLIVE PEAUX SENSIBLAffaire :2013 11Production :330/2400MO :Changement Format :00:00Dates :1363112040000 - 1363324380000","label":"0000000033","customClass":"ganttBlue"}]},{"name":"L02","desc":"0000000034","values":[{"id":"0000000034","from":"/Date(1363252440000)/","to":"/Date(1363259640000)/","desc":"OF 0000000034 - Article :266142Debut :14/03/2013 10:14 - Fin :14/03/2013 12:14DESCRIPTION :CAISSE PALMOLIVE PEAUX SENSIBLAffaire :2012 43Production :0/240MO :Changement Format :00:00Dates :1363252440000 - 1363259640000","label":"0000000034","customClass":"ganttBlue"}]}]

So when i load my AJAX it looks good :

But if il zoom in to pass in hours scale all my task come to be stuck to the left :

I dont understand what happend ...

You could try my exemple with this stuff (i retrieve AJAX stuff) you have to update stylesheet, jquery and jqueryGantt directory to your own path :

<!doctype html>
<html lang="en-au">
<head>
<link rel="stylesheet" href="../../../../COMMUN/tools/jQuery.Gantt-master/css/style.css" />
</head>
<body>
<div class="gantt" id="Gantt"></div>
</body>
<script src="../../../../COMMUN/tools/jquery-1.9.0.min.js"></script>
<script src="../../../../COMMUN/tools/jQuery.Gantt-master/js/jquery.fn.gantt.js"></script>
<script>
//alert(new Date(1323302400000));
//alert(new Date(2011, 0, 13, 11, 40, 35));

$(function() {
"use strict";
$('#Gantt').gantt({
source: [{"name":"L01","desc":"0000000042","values":[{"id":"0000000042","from":"/Date(1363097640000)/","to":"/Date(1363261800000)/","desc":"OF 0000000042 - Article :8012986Debut :12/03/2013 15:14 - Fin :14/03/2013 12:50DESCRIPTION :AIRWICK 1/2 BOX METAL x 300 BOUGIES PROMOAffaire :2013 09Production :2/150MO :9Changement Format :00:00Dates :1363097640000 - 1363261800000","label":"0000000042","customClass":"ganttBlue"}]},{"name":"L01","desc":"0000000023","values":[{"id":"0000000023","from":"/Date(1363167840000)/","to":"/Date(1363337640000)/","desc":"OF 0000000023 - Article :8012991Debut :13/03/2013 10:44 - Fin :15/03/2013 09:54DESCRIPTION :AIRWICK 1/4 BOX BARQ BOUGIES MULTICOLOR PROMOAffaire :2012 33Production :26/340MO :9Changement Format :00:00Dates :1363167840000 - 1363337640000","label":"0000000023","customClass":"ganttBlue"}]},{"name":"L01","desc":"0000000028","values":[{"id":"0000000028","from":"/Date(1363285440000)/","to":"/Date(1363342500000)/","desc":"OF 0000000028 - Article :8012982Debut :14/03/2013 19:24 - Fin :15/03/2013 11:15DESCRIPTION :AIRWICK 1/4 BOX METAL x 142 BOUGIES PROMOAffaire :2012 35Production :0/144MO :10Changement Format :00:00Dates :1363285440000 - 1363342500000","label":"0000000028","customClass":"ganttBlue"}]},{"name":"L02","desc":"0000000032","values":[{"id":"0000000032","from":"/Date(1363097640000)/","to":"/Date(1363196160000)/","desc":"OF 0000000032 - Article :266142Debut :12/03/2013 15:14 - Fin :13/03/2013 18:36DESCRIPTION :CAISSE PALMOLIVE PEAUX SENSIBLAffaire :2012 42Production :104/240MO :Changement Format :00:00Dates :1363097640000 - 1363196160000","label":"0000000032","customClass":"ganttBlue"}]},{"name":"L02","desc":"0000000035","values":[{"id":"0000000035","from":"/Date(1363104840000)/","to":"/Date(1363197480000)/","desc":"OF 0000000035 - Article :266142Debut :12/03/2013 17:14 - Fin :13/03/2013 18:58DESCRIPTION :CAISSE PALMOLIVE PEAUX SENSIBLAffaire :2012 44Production :60/240MO :Changement Format :00:00Dates :1363104840000 - 1363197480000","label":"0000000035","customClass":"ganttBlue"}]},{"name":"L02","desc":"0000000033","values":[{"id":"0000000033","from":"/Date(1363112040000)/","to":"/Date(1363324380000)/","desc":"OF 0000000033 - Article :266142Debut :12/03/2013 19:14 - Fin :15/03/2013 06:13DESCRIPTION :CAISSE PALMOLIVE PEAUX SENSIBLAffaire :2013 11Production :330/2400MO :Changement Format :00:00Dates :1363112040000 - 1363324380000","label":"0000000033","customClass":"ganttBlue"}]},{"name":"L02","desc":"0000000034","values":[{"id":"0000000034","from":"/Date(1363252440000)/","to":"/Date(1363259640000)/","desc":"OF 0000000034 - Article :266142Debut :14/03/2013 10:14 - Fin :14/03/2013 12:14DESCRIPTION :CAISSE PALMOLIVE PEAUX SENSIBLAffaire :2012 43Production :0/240MO :Changement Format :00:00Dates :1363252440000 - 1363259640000","label":"0000000034","customClass":"ganttBlue"}]}],
navigate: "scroll",
scale: "days",
maxScale: "months",
minScale: "hours",
itemsPerPage: 10,
onItemClick: function(data) {
alert("Item clicked - show some details");
},
onAddClick: function(dt, rowId) {
alert("Empty space clicked - add an item!");
},
onRender: function() {
if (window.console && typeof console.log === "function") {
console.log("chart rendered");
}
}
});
});
</script>
</html>

Another really strange thing, if i add this object in my JSON :

{"id":"0000000024","name":"Sprint 0","desc":"Analysis","values":[{"from":"/Date(1322611200000)/","to":"/Date(1323302400000)/","label":"Test","customClass":"ganttRed"}]},

i will be allow to zoom correctly but zoom crash when i try to zoom more than 3 hours by slice...

Do i use right version of lib ? Something i do bad ? Could you help me ?...please !

Cezinha Anjos

unread,

May 1, 2013, 12:01:49 AM5/1/13

to jquer...@googlegroups.com

Hi Vaucouleur!

I'm with the same problem. Did you find any solution?

Thanks

Stian Kroknes

unread,

May 6, 2013, 6:00:54 AM5/6/13

to jquer...@googlegroups.com

Hi,

I found a solution.

Locate the function used for rendering the 'rightPanel' (L:408). The div pushed to 'horArr' has incorret id; it's not adjusted to the timeslot. Use 'rday.getTime()' as argument to function tools.genId(..). Swap L:508 with 'tools.genId(rday.getTime())'.

Ryan Shanahan

unread,

Jun 4, 2013, 7:02:10 PM6/4/13

to jquer...@googlegroups.com

Thanks Stian worked like a charm!

Bruno Ferreira

unread,

Dec 5, 2013, 1:13:40 PM12/5/13

to jquer...@googlegroups.com

It doesn't work for me :(

hp....@gmail.com

unread,

May 7, 2014, 1:30:45 AM5/7/14

to jquer...@googlegroups.com

Thanks Stian.... :) Your solution is working. Update this in github repository also.

Reply all

Reply to author

Forward