Loading data with JSON for canvasJS RangeArea Chart
Question
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,
3 answers
solution1
0 2015-01-20 13:40:49
这可能应该为您工作：
json_encode($arr, JSON_NUMERIC_CHECK);
solution2
0 2015-02-21 02:17:38
It's probably a little too late for my answer but like Alex answered, you should use echo json_encode($data_points, JSON_NUMERIC_CHECK);
The numeric check is an option. See http://php.net/manual/en/json.constants.php
However, more understanding of how a range area chart works seems to be the problem. The range area chart has an X and 2 Y values. The 2 Y values are needed to plot the range. If you simply go to the testgraf.php file in your browser, your JSON result should be: [{x: somevalue, y:[low_value, high_value]}]
You might have to change your sql statement to get another y value. You can do what you want with that. Anyway, this is what you should do for your php code:
Change
$point = array("x" => $row['CalYear'] , "y" => $row['ResultSet'],"name" => $row['Help']);
to:
$point = array("x" => $row['CalYear'] , "y" => $row['ResultSet', 'some_value'],"name" => $row['Help']);
If your 2 Y values don't change, you may not see a graph line diplayed. Would a line graph be more appropriate?
solution3
0 ACCPTED 2015-02-26 10:57:12
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 :)
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.