Rickshaw : data for multiple series not working - php

Question

I'm trying to create some charts using Rickshaw, importing the data with ajax generated in php.
If I use static datas, the chart displays;
If I copy/paste the data generated in the php (from a console/log()), the chart displays;
If I try to put the datas into a variable, and use that var in the js, it just doesnt' work. :(
This is my console log of what I get from the .php :
(As I said, if I copy paste that block of code into the .js substituting the "dataOutEvo" var, the graph displays as it should. So, I don't think the data is the problem.
[
{
name: "ligne",
data: [{x:0,y:35},{x:1,y:34},{x:2,y:36},{x:3,y:35},{x:4,y:40},{x:5,y:35},{x:6,y:37},{x:7,y:40},{x:8,y:45},{x:9,y:46},{x:10,y:55},{x:11,y:63},{x:12,y:61},{x:13,y:45},{x:14,y:48},{x:15,y:49},{x:16,y:45},{x:17,y:44},{x:18,y:52},{x:19,y:43},{x:20,y:37},{x:21,y:36},{x:22,y:37},{x:23,y:34}],
color: palette.color()
},
{
name: "ligne",
data: [{x:0,y:10},{x:1,y:15},{x:2,y:13},{x:3,y:15},{x:4,y:14},{x:5,y:16},{x:6,y:17},{x:7,y:25},{x:8,y:23},{x:9,y:24},{x:10,y:25},{x:11,y:28},{x:12,y:27},{x:13,y:21},{x:14,y:23},{x:15,y:19},{x:16,y:18},{x:17,y:16},{x:18,y:15},{x:19,y:14},{x:20,y:15},{x:21,y:16},{x:22,y:15},{x:23,y:16}],
color: palette.color()
},
{
name: "ligne",
data: [{x:0,y:45},{x:1,y:49},{x:2,y:49},{x:3,y:50},{x:4,y:54},{x:5,y:51},{x:6,y:54},{x:7,y:65},{x:8,y:68},{x:9,y:70},{x:10,y:80},{x:11,y:91},{x:12,y:88},{x:13,y:66},{x:14,y:71},{x:15,y:68},{x:16,y:63},{x:17,y:60},{x:18,y:67},{x:19,y:57},{x:20,y:52},{x:21,y:52},{x:22,y:52},{x:23,y:50}],
color: palette.color()
},
{
name: "ligne",
data: [{x:0,y:10},{x:1,y:15},{x:2,y:12},{x:3,y:5},{x:4,y:9},{x:5,y:15},{x:6,y:45},{x:7,y:125},{x:8,y:345},{x:9,y:256},{x:10,y:312},{x:11,y:345},{x:12,y:299},{x:13,y:165},{x:14,y:354},{x:15,y:368},{x:16,y:254},{x:17,y:213},{x:18,y:312},{x:19,y:165},{x:20,y:54},{x:21,y:32},{x:22,y:10},{x:23,y:5}],
color: palette.color()
},
{
name: "ligne",
data: [{x:0,y:2},{x:1,y:3},{x:2,y:2},{x:3,y:1},{x:4,y:1},{x:5,y:2},{x:6,y:3},{x:7,y:15},{x:8,y:45},{x:9,y:27},{x:10,y:40},{x:11,y:42},{x:12,y:35},{x:13,y:18},{x:14,y:42},{x:15,y:40},{x:16,y:30},{x:17,y:25},{x:18,y:40},{x:19,y:20},{x:20,y:6},{x:21,y:4},{x:22,y:2},{x:23,y:1}],
color: palette.color()
}
]
And this is the js where something goes wrong :
$(document).ready(function(){
$.ajax({
url: 'dataOutEvo.php', //le fichier qui va nous fournir la réponse
success: function(data) {
var dataOutEvo = data;
console.log(dataOutEvo);
var palette = new Rickshaw.Color.Palette( { scheme: 'spectrum2001' } );
var graph = new Rickshaw.Graph({
element: document.querySelector("#chart"),
width: 960,
height: 260,
renderer: 'line',
series: dataOutEvo
});
graph.render();
}
});
});
Could anyone tell me what goes wrong ? Thank you :) Mathieu
I'm asking myself now if I shouldn't go another way, using this:
$fp = fopen('dataoutevo.json', 'w');
fwrite($fp, json_encode($js));
fclose($fp);
And this :
var palette = new Rickshaw.Color.Palette();
new Rickshaw.Graph.Ajax( {
element: document.getElementById("chart"),
width: 800,
height: 500,
renderer: 'line',
dataURL: 'dataoutevo.json',
onData: function(d) {
Rickshaw.Series.zeroFill(d);
return d;
},
onComplete: function(transport) {
var graph = transport.graph;
var detail = new Rickshaw.Graph.HoverDetail({ graph: graph });
}
} );
But it's is still not working … Does anyone can help me and tell me what I'm doing wrong ?

Answer 1

Using your first implementation should work fine. I think your problem is when you call:
success: function(data) {
The data variable returned from PHP is actually a string (You can check this using the Javascript function) -
console.log(typeof(data));
On your PHP code you should be returning an (Associative) Array and make sure you're using the json_encode() function -
echo json_encode($output);
And on your JS side cast your returned data using the JSON.parse method -
var json_data = JSON.parse(data);
Hope that helps!

Answer 2

In your first implementation, add a dataType to the ajax call.
This should work fine:
$(document).ready(function(){
$.ajax({
url: 'dataOutEvo.php', //le fichier qui va nous fournir la réponse
dataType: 'json',
success: function(data) {
var dataOutEvo = data;
console.log(dataOutEvo);
var palette = new Rickshaw.Color.Palette( { scheme: 'spectrum2001' } );
var graph = new Rickshaw.Graph({
element: document.querySelector("#chart"),
width: 960,
height: 260,
renderer: 'line',
series: dataOutEvo
});
graph.render();
}
});
});
Notice the dataType: 'json' in the $.ajax call.
According to the JQuery documentation, adding the json dataType,
Evaluates the response as JSON and returns a JavaScript object. The
JSON data is parsed in a strict manner; any malformed JSON is rejected
and a parse error is thrown