[英]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. 我正在尝试使用CanvasJS和PHP创建范围图,以从数据库中加载数据。
I've created the php and it returns the values from the DB. 我创建了php,它从数据库返回了值。 Here is the php: 这是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"},...,...] [{“ 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). 问题是x和y值(=字符串值)中的引号。 CanvasJS only takes numbers to create a graph. CanvasJS仅使用数字来创建图形。 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"},...,...] [{“ 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). 我确定必须有一种方法来适应我的php,以便x和y以数字而不是字符串的形式传递,但是我真的是php的新手(有史以来第一次),并且找不到解决方案,尤其是对于第二部分(y)。
Can anyone tell me which adaptions to make to the php and/or html file? 谁能告诉我要对php和/或html文件进行哪些修改?
Thx, 谢谢,
这可能应该为您工作:
json_encode($arr, JSON_NUMERIC_CHECK);
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); 我的回答可能为时已晚,但像Alex回答的那样,您应该使用echo json_encode($ data_points,JSON_NUMERIC_CHECK);
The numeric check is an option. 数字检查是一个选项。 See http://php.net/manual/en/json.constants.php 参见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. 范围面积图具有X和2 Y值。 The 2 Y values are needed to plot the range. 需要2个Y值来绘制范围。 If you simply go to the testgraf.php file in your browser, your JSON result should be: [{x: somevalue, y:[low_value, high_value]}] 如果仅在浏览器中转到testgraf.php文件,则JSON结果应为:[{x:somevalue,y:[low_value,high_value]}]
You might have to change your sql statement to get another y value. 您可能必须更改sql语句才能获得另一个y值。 You can do what you want with that. 您可以执行此操作。 Anyway, this is what you should do for your php code: 无论如何,这是您应该为您的php代码执行的操作:
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. 如果您的2个Y值不变,则可能看不到显示的图形线。 Would a line graph be more appropriate? 折线图会更合适吗?
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. 问题是我需要为数据点数组中的Y值创建一个数组。 In this array I could store the 2 values I needed for the graph. 在此数组中,我可以存储图形所需的2个值。
After this was done I needed to transform al the numeric values to float_val so that the quotes around the values disappeared. 完成此操作后,我需要将所有数值转换为float_val,以使数值周围的引号消失。
Thx for the help everyone :) 谢谢大家的帮助:)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.