I am trying to build a vis.js based timeline group order chart in a web page and giving it a database connectivity. I am able to display the chart in a web page and give it database connectivity. However, I am not sure how to pass the data in vis.dataset().

below is my code:

Connection.php

<?php 
$sname = "localhost";
$uname = "postgres";
$pass = "123456";
$db_name = "apple";

// Connection with database
try
{

    $conn = new PDO("pgsql:host=$sname;dbname=$db_name", $uname, $pass);
    $conn->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
    //echo "connected";

    // Checking the database connection by Querying the table
    $dbconn = $conn->query("SELECT * FROM \"pgdataset\" ORDER by id ASC");

    while($result = $dbconn->fetch(PDO::FETCH_ASSOC))
    {
        $finalresult = json_encode($result);
        echo "$finalresult";
    }


}
catch(PDOException $e)
{
    echo "connection failed:". $e->getMessage();
}

<div id="visualization"></div>

<script type="text/javascript">
  
var groups = new vis.DataSet($finalresult);
  
// create a dataset with items
var items = new vis.DataSet([
  {
    id: 1,
    group: 1,
    start: new Date(2014, 3, 17, 14, 4, 0),
    end: new Date(2014, 3, 17, 15, 15, 0),
  },
  {
    id: 2,
    group: 1,
    start: new Date(2014, 3, 17, 05, 40, 0),
    end: new Date(2014, 3, 17, 06, 04, 0),
  },
  {
    id: 3,
    group: 2,
    start: new Date(2014, 3, 17, 11, 02, 0),
    end: new Date(2014, 3, 17, 12, 10, 0),
  },
]);

// create visualization
var container = document.getElementById("visualization");
var options = {
  groupOrder: function (a, b) {
    return a.value - b.value;
  },
  
};

var timeline = new vis.Timeline(container);
timeline.setOptions(options);
timeline.setGroups(groups);
timeline.setItems(items);

    }


});
</script>