I am generating a JSON "text" using php and want to include that in a javascript in the same file. I think I am having problem understanding how java deals with JSON as text vs as an Object.
Note: I am going to change mysql to mysqli soon, just want to get this thing working first. Here's my script:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Knox QA tickets status</title>
</head>
<body>
<script src="am/amcharts/amcharts.js" type="text/javascript"></script>
<script src="am/amcharts/serial.js" type="text/javascript"></script>
<?php
//$subm = "8";
// This is being loaded from a selection html script
$subm = $_POST["submoduleID"];
if(!isset($_POST["submoduleID"]) )
{
// set it to the default container if it's not set.
$subm = "8";
}
// Connect to MySQL
$link = mysql_connect( 'localhost', 'root', 'secret' );
if ( !$link ) {
die( 'Could not connect: ' . mysql_error() );
}
// Select the data base
$db = mysql_select_db( 'xqa_status', $link );
if ( !$db ) {
die ( 'Error selecting database \'test\' : ' . mysql_error() );
}
// Fetch the data
$query = ("select date, tested, passed from test_status where xqa_id=" . $subm . " order by test_status_id limit 10");
$result = mysql_query( $query );
// Make a josn formatted output
$rows = array();
while ( $r = mysql_fetch_assoc($result)) {
$rows[] = $r;
}
$chartData_json = json_encode($rows);
print $chartData_json;
mysql_close($link);
?>
<!-- Custom Function
<script>
AmCharts.loadJSON = function(file) {
// create the request
if (window.XMLHttpRequest) {
// IE7+, Firefox, Chrome, Opera, Safari
var request = new XMLHttpRequest();
} else {
// code for IE6, IE5
var request = new ActiveXObject('Microsoft.XMLHTTP');
}
request.open('GET', file, false);
request.send();
// parse adn return the output
return eval(request.responseText);
};
</script> -->
<!-- chart container -->
<div id="chartdiv" style="width: 600px; height: 300px;"></div>
<!-- the chart code -->
<script>
var chart;
var chartData1 = "<?php echo $chartData_json; ?>";
var myObject = JSON.parse(chartData1, reviver);
// create chart
AmCharts.ready(function() {
// load the data
// SERIAL CHART
chart = new AmCharts.AmSerialChart();
chart.pathToImages = "am/amcharts/images/";
chart.dataProvider = myObject;
chart.categoryField = "date";
chart.dataDateFormat = "YYYY-MM-DD";
// GRAPHS
var graph1 = new AmCharts.AmGraph();
graph1.type = "smoothedLine";
graph1.title = "Tested";
graph1.valueField = "tested";
graph1.bullet = "round";
graph1.bulletSize = 5;
graph1.bulletBorderColor = "#FFFFFF";
graph1.bulletBorderThickness = 2;
graph1.lineThickness = 2;
graph1.lineAlpha = 0.5;
chart.addGraph(graph1);
var graph2 = new AmCharts.AmGraph();
graph2.type = "smoothedLine";
graph2.title = "Passed";
graph2.valueField = "passed";
graph2.bullet = "round";
graph2.bulletSize = 5;
graph2.bulletBorderColor = "#FFFFFF";
graph2.bulletBorderThickness = 2;
graph2.lineThickness = 2;
graph2.lineAlpha = 0.5;
chart.addGraph(graph2);
// CATEGORY AXIS
chart.categoryAxis.parseDates = true;
chart.categoryAxis.autoGridCount = false;
chart.categoryAxis.gridCout = chartData.length;
chart.categoryAxis.gridPosition = "start";
chart.categoryAxis.labelRotation = 90;
// LEGEND
var legend = new AmCharts.AmLegend();
chart.addLegend(legend);
// CURSOR
var chartCursor = new AmCharts.ChartCursor();
chartCursor.cursorAlpha = 0;
chartCursor.cursorPosition = "mouse";
chartCursor.categoryBalloonDateFormat = "YYYY-MM-DD";
chart.addChartCursor(chartCursor);
// SCROLLBAR
var chartScrollbar = new AmCharts.ChartScrollbar();
chart.addChartScrollbar(chartScrollbar);
// 3D
// chart.angle = 30;
// chart.depth3D = 15;
// WRITE
chart.write("chartdiv");
});
</script>
</body>
</html>
A sample of the json output is this:
[{"date":"2014-01-09","tested":"12","passed":"32"},{"date":"2014-01-10","tested":"12","passed":"34"},{"date":"2014-01-11","tested":"22","passed":"34"},{"date":"2014-01-12","tested":"22","passed":"34"},{"date":"2014-01-13","tested":"40","passed":"34"},{"date":"2014-01-14","tested":"40","passed":"34"},{"date":"2014-01-15","tested":"40","passed":"34"}]
-
1not very clear.. what is your exact problem?meda– meda2014年01月27日 21:11:01 +00:00Commented Jan 27, 2014 at 21:11
-
mixing javascript and php in one file, oh mytenub– tenub2014年01月27日 21:16:06 +00:00Commented Jan 27, 2014 at 21:16
-
1Thanks Patrick, That did fix my problem, Javascript failed to understand the JSON as an object because it was inside "double quotes".user3239109– user32391092014年01月27日 21:19:07 +00:00Commented Jan 27, 2014 at 21:19
1 Answer 1
You need to assign the output of your PHP into a Javascript variable:
<script>
var json_data=<?php
...
?>;
// Do stuff with json_data
</script>
Then json_data will be an array or objects in Javascript (it's not JSON anymore since the JSON will be parsed as an array literal, not a string). That is most likely what you want, since then you can work with the array, like json_data[0].data.
answered Jan 27, 2014 at 21:11
Paul
142k28 gold badges285 silver badges272 bronze badges
Sign up to request clarification or add additional context in comments.
4 Comments
mat
don't forget to add quotes around your json. better write something like: var json_data="<?php print $sJSON; ?>";
Patrick Evans
@mat, no that would cause errors as json contains quotes in itself, so when javascript loads it it would see sometihng like
"{"somevar":"somevalue"}" and error out. The way Paulpro has it, the json string will be treated as an object literal.user3239109
But I do have the variable here: var chartData1 = "<?php echo $chartData_json; ?>"; The double quotes actually was the problem.
Benjamin Eckstein
just use json_encode and json_decode to print json ... it works like a charm with arrays and handles escaping quotes etc...
Explore related questions
See similar questions with these tags.
default