Loading data with JSON for canvasJS RangeArea Chart

I'm trying to create a range area chart using CanvasJS and PHP to load the data from a database.

I've created the php and it returns the values from the DB. Here is the php:

<?php
header('Content-Type: application/json');
$con = mysqli_connect("127.0.0.1","root","pwd1","db");
// Check connection
if (mysqli_connect_errno($con))
{
    echo "Failed to connect to DataBase: " . mysqli_connect_error();
}else
{
     $data_points = array();
     $result = mysqli_query($con, "select (CalYear+1) as CalYear, concat('[',REPLACE(Year1PercWC,',','.'),',',REPLACE(Year1PercBC,',','.'),']') as ResultSet, concat('Sessies: ',calyear) as Help FROM table where cat='1' and (CalYear+1)<year(now())");
    while($row = mysqli_fetch_array($result))
    {        
        $point = array("x" => $row['CalYear'] , "y" => $row['ResultSet'],"name" => $row['Help']);
         array_push($data_points, $point);        
    }
    echo json_encode($data_points);
}
mysqli_close($con);

?>

With the results:

[{"x":"2007","y":"[35.94,35.94]","name":"Sessies: 2006"},{"x":"2008","y":"[27.67,27.67]","name":"Sessies: 2007"},...,...]

The problem are the quotes in the x and y values (=string values). CanvasJS only takes numbers to create a graph. So the output should be like:

[{"x":2007,"y":[35.94,35.94],"name":"Sessies 2006"},{"x":2008,"y":[27.67,27.67],"name":"Sessies 2007"},...,...]

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title></title>
    <script type="text/javascript" src="jquery-1.11.2.min.js"></script>   
    <script type="text/javascript" src="jquery.canvasjs.min.js"></script> 
    <script type="text/javascript">
         $(document).ready(function () {
            $.getJSON("TestGraf.php", function (result) {
                var chart = new CanvasJS.Chart("chartContainer", {
                    axisX: { 
                        intervalType: "number", 
                        title: "Year", 
                        interval: 1,
                        valueFormatString: "#"
                    }, 
                    data: [
                        {
                            type: "rangeArea",
                            dataPoints: result
[{"x":2007,"y":[35.94,35.94],"name":"Sessies 2006"},{"x":2008,"y":[27.67,27.67],"name":"Sessies 2007"}] -- This is working fine
                        }
                    ]
                });
                chart.render();
            }); 
        });
    </script>
</head>
<body>
    <div id="chartContainer" style="width: 800px; height: 380px;"></div>
</body>
</html>

I'm sure there must be a way to adapt my php so that x and y are passed through as numbers instead of strings, but i'm really new at php (first time ever) and can't find the solution,especially for the second part (y).

Can anyone tell me which adaptions to make to the php and/or html file?

Thx,

Solution

After some trial and error I found the following solution:

$result1 = mysqli_query($con, "select (CalYear+1) as CalYear, Year1PercWC, Year1PercBC, calyear as Help FROM table_2 where cat='1' and (CalYear+1)<year(now())");
    while($row = mysqli_fetch_array($result1))
    {        
        $point = array("x" => floatval($row['CalYear']),"y" => array(floatval($row['Year1PercWC']),floatval($row['Year1PercBC'])),"name" => floatval($row['Help']));
        array_push($data_points, $point);        
    }
echo json_encode($data_points);

The problem was I needed to create an array for my Y-values in the array for the datapoints. In this array I could store the 2 values I needed for the graph.

After this was done I needed to transform al the numeric values to float_val so that the quotes around the values disappeared.

Thx for the help everyone :)