1. Home
  2. Forum
  3. jQuery
  4. Simple Save / Load of current Gant Chart

Simple Save / Load of current Gant Chart


Im trying to build a simple save/load routine to GANTT chart,  so I thought I would save the state using this I found elsewhere on the forum :- (data source is a hard coded array)

function clickme() { 
            var ganttObj = $("#Ganttcontainer").data("ejGantt"); 
            //To get the Updated Json Records 
            var data = ganttObj.model.dataSource; 
            //To alert the Updated JSON data 
            alert(JSON.stringify(ganttObj.model.dataSource)); 
        }


[{"taskID":1,"taskName":"XXXXXX","startDate":"2014-02-03T08:00:00.000Z","endDate":"2014-03-12T17:00:00.000Z","subtasks":[{"taskID":2,"taskName":"Plan budget","startDate":"2014-02-03T08:00:00.000Z","endDate":"2014-03-07T17:00:00.000Z","duration":33,"progress":"100","serialNumber":2},{"taskID":3,"taskName":"Allocate resources","startDate":"2014-03-08T08:00:00.000Z","endDate":"2014-03-12T17:00:00.000Z","duration":5,"progress":"100","predecessor":"2FS","serialNumber":3},{"taskID":4,"taskName":"Planning complete","startDate":"2014-02-07T08:00:00.000Z","endDate":"2014-02-07T08:00:00.000Z","duration":0,"serialNumber":4}],"duration":38,"serialNumber":1,"progress":100},{"taskID":5,"taskName":"Design","startDate":"2014-02-10T08:00:00.000Z","endDate":"2014-02-14T17:00:00.000Z","subtasks":[{"taskID":6,"taskName":"Software Specification","startDate":"2014-02-10T08:00:00.000Z","endDate":"2014-02-12T17:00:00.000Z","duration":3,"progress":"60","serialNumber":6},{"taskID":7,"taskName":"Get approval from customer","startDate":"2014-02-13T08:00:00.000Z","endDate":"2014-02-14T17:00:00.000Z","duration":2,"progress":"100","predecessor":"6FS","serialNumber":7}],"duration":5,"serialNumber":5,"progress":80}]

Which works perfectly,  so I save "ganttObj.model.dataSource" to a mysql database.  I alter the datamanager to retrieve this data from the mysql (via php)

  var data = ej.DataManager({
                url: "http://xxxxxx/gantt/mysql.php?action=getdata",
            });

Which works the first time, but then when the clickme() function is now run, the model.datasource now contains datamanager data instead of the chart data?

{"dataSource":{"url":"http://xxxx/gantt/mysql.php?action=getdata","json":[],"jsonp":"callback","dataType":"json","offline":false},"adaptor":{"options":{"from":"table","requestType":"get","sortBy":"$orderby","select":"$select","skip":"$skip","group":"group","take":"$top","search":"search","count":"$inlinecount","where":"$filter","aggregates":"aggregates","antiForgery":"antiForgery","accept":"application/json;odata=light;q=1,application/json;odata=verbose;q=0.5","multipartAccept":"multipart/mixed","expand":"$expand","batch":"$batch","changeSet":"--changeset_","batchPre":"batch_","contentId":"Content-Id: ","batchContent":"Content-Type: multipart/mixed; boundary=","changeSetContent":"Content-Type: application/http
Content-Transfer-Encoding: binary ","batchChangeSetContentType":"Content-Type: application/json; charset=utf-8 "},"pvt":{}}}

Is there a way to grab the chart data from a chart that uses the ej.DataManager ?



3 Replies
JD Jayakumar Duraisamy Syncfusion Team March 1, 2018 09:52 AM UTC

Hi Stuart, 
We have analyzed your reported query that ej.DataManager return JSON data if we pass local JSON array. While fetching data from URL, then the data manager will be returned as an object like ajax, until we execute the DataManager instance with ej.Query() using the executeQuery method. Since it is a callback function, it will return the data once URL request get succeeds to done event. 
Please refer the following code snippet, 
function getGanttData() { 
            var dataManager = ej.DataManager({ 
                url: "http://localhost:8085/Gantt/getdata.php/?action=getData", 
            }); 
            var query = new ej.Query(); 
            var exe = dataManager.executeQuery(query).done(function (e) { 
                alert(JSON.stringify(e.result)); 
            }).fail(function(e){                     
            });             
        } 

function getData(){  

//connection to the database 
$dbhandle = mysql_connect("localhost", "root", "");   
$selected = mysql_select_db("datasource",$dbhandle);    
//execute the SQL query and return records 
$result = mysql_query("SELECT taskID, taskName,startDate, endDate,duration,Progress,parentID,Resource,projNo FROM gantt"); 
//fetch tha data from the database  
$emparray=array(); 
while ($row = mysql_fetch_assoc($result)) {   
   if($row['parentID']== ""){ 
   $row['parentID']= null; 
   }     
   if($row['Resource'] != ""){ 
   $string = $row['Resource']; 
   $array = array_map('convertInt', explode(',', $string));    
   $row['Resource']=$array; 
   } 
   else if($row['Resource'] == "") 
        $row['Resource'] = null; 
   $emparray[]=$row; 
}   
echo json_encode($emparray); 
} 
Regards, 
Jayakumar D 


SC Stuart Collier March 2, 2018 02:12 PM UTC


HI,

So how do we get the data from getGanttData() into the grantt chart?

I tried

   $("#Ganttcontainer").ejGantt({
                dataSource: getGanttData(),
                treeColumnIndex: 1,

which runs the function but doesnt populate the chart ?  (the alert in the function produces the task list as expected... just doesnt transfer to the chart)



PE Punniyamoorthi Elangovan Syncfusion Team March 5, 2018 12:43 PM UTC

Hi Stuart,  
Gantt supports datamanager for rendering the data, and we can directly set the datamanager object as the data source. Please find the code snippet below. 

<script type="text/javascript"> 
$(function () { 
       var dataManager = ej.DataManager({ 
             }); 
 
       $("#gantt").ejGantt({ 
          dataSource: dataManager, 
 
       }); 
   }); 
</script> 

We have prepared sample for your reference. please find the sample link below 
Please let us know, if you require further assistance on this.   
Regards, 
Punniyamoorthi 


Loader.
Up arrow icon