canvasjs column chart - have 'x' value in json object and I don't know where it came from
Question
I'm trying my hand out at using canvasjs.
I have the following test code:
9 $con = pg_connect("host=localhost port=5432 dbname=testdb user=postgres") or die ("Could not connect to server\n");
10 $query ="SELECT id as label, SUM(charge) as y
11 FROM bill
12 WHERE id is not null and cust_id=1 and charge > 0.05
13 GROUP BY id
14 ORDER BY SUM(charge) DESC
15 LIMIT 2";
16 $result = pg_query($con, $query) or die ("Cannot execute query: $query\n");
17 if (!$result) {
18 echo "An error occurred.\n";
19 exit;
20 }
21 $users = pg_fetch_all($result);
22 ?>
23 <!DOCTYPE HTML>
24 <html>
25 <head>
26 <script src="assets/js/jquery-2.2.3.min.js"></script>
27 <script src="assets/js/canvasjs.min.js"></script>
28 <script type="text/javascript">
29
30 window.onload = function () {
31 var users = '<?php echo json_encode($users); ?>';
32 users = JSON.parse(users);
33 console.log(Object.keys(users).length);
34
35 console.log(users);
36 var chart = new CanvasJS.Chart("chartContainer", {
37 title:{
38 text: "Who's killing the Bill?"
39 },
40 data: [
41 {
42 // Change type to "doughnut", "line", "splineArea", etc.
43 type: "column",
44 dataPoints: users
45 }
46 ]
47 });
48 chart.render();
49 }
As you can see, I'm only selecting two fields: label and y. But somehow, when I look at the console.log output, I see the following data: (one record shown only)
Object
label:"204751"
x:0
y:"63.6404"
I don't know where the x value is coming from. But I think that's why my chart doesn't appear. Well, i do get the labels appearing along the x axis but no y axis, and no pretty bars. :(
Where have i gone astray?
EDIT 1
I think I know what's going on but I don't know how to fix it. This is a sample of my php data before I json_encode it:
Array ( [0] => Array ( [label] => 204751 [y] => 63.6404 ) [1] => Array ( [label] => 133236 [y] => 57.0851 ) )
After I call json_encode, it looks like this: [{"label":"204751","y":"63.6404"},{"label":"133236","y":"57.0851"}]
But after I call JSON.parse, that's when it bakes in the x value... and it looks like it corresponds with the index of the main php array.
If I change JSON.parse to $.parseJSON() then the x value is not included, but the chart still doesn't display.
EDIT 2
The help troubleshoot, I've hardcoded the data in javasript. I've made the data points look like the json data that I'm dealing with. The code is here: http://pastebin.com/HBj5iArn Can anyone tell me what I'm doing wrong?
EDIT 3
I think I need to:
- use JSON.parse
- convert all "y" values in the object to int somehow.
1 answers
solution1
0 2016-04-28 19:54:55
I got it working by looping through the json object and explicitly casting all "y" values to float:
window.onload = function () {
var users = '<?php echo json_encode($users); ?>';
users = JSON.parse(users);
for(var i = 0; i < users.length; i++) {
var obj = users[i];
obj.y = parseFloat(obj.y);
}
console.log(users);
var chart = new CanvasJS.Chart("chartContainer", {
title:{
text: "Top 20"
},
axisX: {
title: "Users",
},
axisY: {
title: "Dollars",
},
data: [
{
type: "column",
dataPoints: users
}
]
});
// chart.options.data=users;
chart.render();
}
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.