Alfie

GANTT fed by PHP+MYSQL: No data to display

Recommended Posts

Hi all FusionCharts folks,

I'm trying to populate GANTT chart by database (PHP+MySQL).
I was able to implement my own script based on the general method based on the conceptual sequence:

1) Execute queries on database
2) If results is not empty...
3)...proceed with "array_push" to concatenate data to be displayed by the chart.

The code below implements the above sequence:

 // Execute the query, or else return the error message.
        $result_CATEGORIES = mysqli_query($dbhandle, $strQuery_CATEGORIES);
       
       //prepare categories  
        $arrData["categories"] = array();
        $category = array();
        // Push the data into the category array
        while($row = mysqli_fetch_array($result_CATEGORIES)) 
        {                       
            array_push($category, array("label"=>$row["abbr_mese"], "start"=>$row["frm_inizio_mese"], "end"=>$row["frm_fine_mese"]));  
        }
        echo "<pre>";
            echo "ARRAY CATEGORIES CONTENTS"."<p>";
        echo  print_r ($category);
        echo "</pre>";    
       
        array_push($arrData["categories"], array("category"=>$category));
       

After repeated excecution of the above code for all the data-section required by the GANTT chart the final assembled JSONencoded string  is the following:

 

{"chart":{"renderAt:":"chart-1","dateformat":"mm\/dd\/yyyy","caption":"Commesse Associate al Collaboratore","subCaption":"Assistenza al Planning","theme":"fusion"},"categories":[{"category":[{"label":"GEN","start":"01\/01\/2019","end":"01\/31\/2019"},{"label":"FEB","start":"02\/01\/2019","end":"02\/28\/2019"},{"label":"MAR","start":"03\/01\/2019","end":"03\/31\/2019"},{"label":"APR","start":"04\/01\/2019","end":"04\/30\/2019"},{"label":"MAG","start":"05\/01\/2019","end":"05\/31\/2019"},{"label":"GIU","start":"06\/01\/2019","end":"06\/30\/2019"},{"label":"LUG","start":"07\/01\/2019","end":"07\/31\/2019"},{"label":"AGO","start":"08\/01\/2019","end":"08\/31\/2019"},{"label":"SET","start":"09\/01\/2019","end":"09\/30\/2019"},{"label":"OTT","start":"10\/01\/2019","end":"10\/31\/2019"},{"label":"NOV","start":"11\/01\/2019","end":"11\/30\/2019"},{"label":"DIC","start":"12\/01\/2019","end":"12\/31\/2019"}]}],"processes":[{"process":[{"headerText":"SIL"},{"headerText":"BIOM"},{"headerText":"BIOM"}]}],"tasks":[{"task":[{"start":"01\/15\/2019","end":"01\/28\/2019"},{"start":"02\/07\/2019","end":"03\/21\/2019"},{"start":"02\/20\/2019","end":"05\/11\/2019"}]}]}

I checked against it and it is (at least as per its syntax) perfectly valid JSON

Here it is the same JSON string nicely formatted:

{
    "chart": {
        "renderAt:": "chart-1",
        "dateformat": "mm\/dd\/yyyy",
        "caption": "Commesse Associate al Collaboratore",
        "subCaption": "Assistenza al Planning",
        "theme": "fusion"
    },
    "categories": [{
        "category": [{
            "label": "GEN",
            "start": "01\/01\/2019",
            "end": "01\/31\/2019"
        }, {
            "label": "FEB",
            "start": "02\/01\/2019",
            "end": "02\/28\/2019"
        }, {
            "label": "MAR",
            "start": "03\/01\/2019",
            "end": "03\/31\/2019"
        }, {
            "label": "APR",
            "start": "04\/01\/2019",
            "end": "04\/30\/2019"
        }, {
            "label": "MAG",
            "start": "05\/01\/2019",
            "end": "05\/31\/2019"
        }, {
            "label": "GIU",
            "start": "06\/01\/2019",
            "end": "06\/30\/2019"
        }, {
            "label": "LUG",
            "start": "07\/01\/2019",
            "end": "07\/31\/2019"
        }, {
            "label": "AGO",
            "start": "08\/01\/2019",
            "end": "08\/31\/2019"
        }, {
            "label": "SET",
            "start": "09\/01\/2019",
            "end": "09\/30\/2019"
        }, {
            "label": "OTT",
            "start": "10\/01\/2019",
            "end": "10\/31\/2019"
        }, {
            "label": "NOV",
            "start": "11\/01\/2019",
            "end": "11\/30\/2019"
        }, {
            "label": "DIC",
            "start": "12\/01\/2019",
            "end": "12\/31\/2019"
        }]
    }],
    "processes": [{
        "process": [{
            "headerText": "SIL"
        }, {
            "headerText": "BIOM"
        }, {
            "headerText": "BIOM"
        }]
    }],
    "tasks": [{
        "task": [{
            "start": "01\/15\/2019",
            "end": "01\/28\/2019"
        }, {
            "start": "02\/07\/2019",
            "end": "03\/21\/2019"
        }, {
            "start": "02\/20\/2019",
            "end": "05\/11\/2019"
        }]
    }]
}

Nonetheless,  fed by the above JSON encoded string, the rendering of the chart keeps returning the message "No Data To Display".


I did my investigations and discovered that stripping away from the JSONencoded string the first   "["   and the last   "]" from the sections "processes" and "tasks" the chart renders as a breeze with proper data and labels in place.
It looks like the chart doesn't want these sections (which of course follows the main one "categories") marked as an array.

May be the problem is not in the terms I have just stated but I'm looking for a solution.

Thank you in advance, I greatly appreciate FC,  any help is more than wellcome!



 

Share this post


Link to post
Share on other sites

Hi,

 

The JSON dataSource that you have generated need few modifications, as the dataSource is not as per the prescribed format of FusionCharts. Please find the below modifications :

1. "tasks" is an object, not an array as in your dataSource.

2. "processes" is an object, not an array as in your dataSource.

3. The "process" objects within "processes" must have "id" attributes defined uniquely for all the process objects.

4. The defined process object IDs need to be used in the individual task objects to map those tasks to the process(rows) using "processID" attribute within the task objects.

 

Please check the sample fiddle for the modified dataSource to render the Gantt chart : http://jsfiddle.net/oqm54nga/2/

 

Thanks,

Akash.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now