Fetching mysql data thru .js file

Question

I'll get straight to the point. I need to know whether or not, I can force .js file to read a php syntax. If so, does anyone of you can educate me on this one? My project is all about parsing a data from the database that will eventually be displayed as a graph. With this I use the ff. code:

data.js

 var ganttData = [
    {
        id: 1, name: "Site Identification", series: [
            { name: "Planned", start: new Date(2018,03,01), end: new Date(2018,03,20) },
            { name: "Actual", start: new Date(2018,03,01), end: new Date(2018,03,15), color: "#ff0000" }
        ]
    }, 
    {
        id: 2, name: "Site Evaluation", series: [
            { name: "Planned", start: new Date(2018,04,20), end: new Date(2018,05,10) },
            { name: "Actual", start: new Date(2018,04,21), end: new Date(2018,05,05), color: "#00ff00" },
            //{ name: "Projected", start: new Date(2018,00,06), end: new Date(2018,00,17), color: "#e0e0e0" }
        ]
    }, 
    {
        id: 3, name: "Approval of MOA with Farmer...", series: [
            { name: "Planned", start: new Date(2018,05,11), end: new Date(2018,05,20) },
            { name: "Actual", start: new Date(2018,05,11), end: new Date(2018,05,21), color: "#ffff00" }
        ]
    }, 
    {
        id: 4, name: "Sourcing/Procurement of Planting Material", series: [
            { name: "Planned", start: new Date(2018,05,20), end: new Date(2018,07,18) },
            { name: "Actual", start: new Date(2018,05,20), end: new Date(2018,07,05), color: "#00ff00" }
        ]
    },
    {
        id: 5, name: "Land Preparation", series: [
            { name: "Planned", start: new Date(2018,07,18), end: new Date(2018,08,26) },
            { name: "Actual", start: new Date(2018,07,18), end: new Date(2018,08,30), color: "#ff0000" }
        ]
    }, 
    {
        id: 6, name: "Provision of Access...", series: [
            { name: "Planned", start: new Date(2018,08,26), end: new Date(2018,09,15) },
            { name: "Actual", start: new Date(2018,08,26), end: new Date(2018,09,15), color: "#00ff00" },
            //{ name: "Projected", start: new Date(2018,00,06), end: new Date(2018,00,20), color: "#e0e0e0" }
        ]
    }, 
    {
        id: 7, name: "Area Isolation...", series: [
            { name: "Planned", start: new Date(2018,09,15), end: new Date(2018,10,05) },
            { name: "Actual", start: new Date(2018,09,16), end: new Date(2018,10,04), color: "#00ff00" },
        ]
    }, 
    {
        id: 8, name: "Delivery of Seedlings", series: [
            { name: "Planned", start: new Date(2018,10,01), end: new Date(2018,10,19) },
            { name: "Actual", start: new Date(2018,10,01), end: new Date(2018,10,20), color: "#ff0000" }
        ]
    }, 
    {
        id: 9, name: "Inspection & Acceptance", series: [
            { name: "Planned", start: new Date(2018,10,01), end: new Date(2018,10,06) },
            { name: "Actual", start: new Date(2018,10,01), end: new Date(2018,10,06), color: "#00ff00" }
        ]
    }, 
    {
        id: 10, name: "Nursery Establishment", series: [
            { name: "Planned", start: new Date(2018,10,01), end: new Date(2018,10,20) },
            { name: "Actual", start: new Date(2018,10,01), end: new Date(2018,10,20), color: "#00ff00" }
        ]
    }, 
    {
        id: 8, name: "Transplanting of Seedlings", series: [
            { name: "Planned", start: new Date(2018,10,21), end: new Date(2018,10,26) },
            { name: "Actual", start: new Date(2018,10,21), end: new Date(2018,10,30), color: "#ff0000" }
        ]
    }, 
    {
        id: 8, name: "Application of Fertilizers", series: [
            { name: "Planned", start: new Date(2018,11,01), end: new Date(2018,11,06) },
            { name: "Actual", start: new Date(2018,11,01), end: new Date(2018,11,07), color: "#0000ff" }
        ]
    }
];

index.html

<script type="text/javascript" src="data.js"></script>
        <script type="text/javascript">
            $(function () {
                $("#ganttChart").ganttView({ 
                    data: ganttData,
                    slideWidth: 900,
                    behavior: {
                        onClick: function (data) { 
                            var msg = "You clicked on an event: { start: " + data.start.toString("M/d/yyyy") + ", end: " + data.end.toString("M/d/yyyy") + " }";
                            $("#eventMessage").text(msg);
                        },
                        onResize: function (data) { 
                            var msg = "You resized an event: { start: " + data.start.toString("M/d/yyyy") + ", end: " + data.end.toString("M/d/yyyy") + " }";
                            $("#eventMessage").text(msg);
                        },
                        onDrag: function (data) { 
                            var msg = "You dragged an event: { start: " + data.start.toString("M/d/yyyy") + ", end: " + data.end.toString("M/d/yyyy") + " }";
                            $("#eventMessage").text(msg);
                        }
                    }
                });

                // $("#ganttChart").ganttView("setSlideWidth", 600);
            });
        </script>

Using data.js I was able to display data forcefully because it was hardcoded. But what I need is to use mysql_fetch_array because I need to parse the data from a database and not something hardcoded.

Kindly help me on this one? Below is my database structure:
DB1

Hi, Welcome to SO! But this question is Too Broad for SO. We help each other fix code problems, **we do not write new code for you** — RiggsFolly, May 15 '18 at 09:57
To ask an On Topic question, please read [What topics can I ask about](http://stackoverflow.com/help/on-topic) and [What topics to avoid](https://stackoverflow.com/help/dont-ask) and [How to ask a good question](http://stackoverflow.com/help/how-to-ask) and [the perfect question](http://codeblog.jonskeet.uk/2010/08/29/writing-the-perfect-question/) and how to create a [Minimal, Complete and Verifiable Example](http://stackoverflow.com/help/mcve) and [take the tour](http://stackoverflow.com/tour) — RiggsFolly, May 15 '18 at 09:57
You can use javascript to execute a .php page and then grab the response if that's what you're after? https://stackoverflow.com/questions/9436534/ajax-tutorial-for-post-and-get . In your .php page you'll need [json_encode](http://php.net/manual/en/function.json-encode.php) so your javascript can read it correctly — IsThisJavascript, May 15 '18 at 09:57
Thanks @RiggsFolly but my concern isn't just how to pass `php` code to `javascript`. I'm trying to generate a `gantt chart` with `php` as the server and `javascript` as the interface. I have an existing code, as presented above. So no need to write a new one. Fortutely, I know how to code both especially in `php`. Just give me an idea how to play my codes to make `php` and `javascript` (`php` code inside `.js` file) work together on a single page that displays `gantt chart` Thanks. — IT_Girl, May 16 '18 at 03:30
You have to remember, PHP does not run in the browser, so putting PHP code in a JS file does not compute, but calling a PHP script to gather and format the data then pass it back to the browser(js) does. Hence, AJAX. You can write a PHP script to return that, as now, hard coded javascript array of objects and then in js you feed it into your gantt function — RiggsFolly, May 16 '18 at 08:22

score 0 · Answer 1 · answered May 15 '18 at 10:15

0

Make an AJAX request to a PHP Script.

Let the PHP do the DB call.

json_encode the array of results.

header('Content-Type: application/json');

Then echo the $json and exit.

answered May 15 '18 at 10:15

delboy1978uk

12,118
2
21
39

Fetching mysql data thru .js file

1 Answers1