Hello,
I'm struggling with the tutorial based on php and database. I'm using xampp as web hosting server. The link of the tutorial is as follows:
http://www.fusioncharts.com/tutorials/php-mysql-charts/
There are four steps in the tutorial. As far as I have understood, the first three steps ask to create a file name "char_data.php". I have saved the file with the code from tutorial. The complete code is as follows:
<?php>
<html>
<head>
<body>
<title>My first chart using FusionCharts Suite XT</title>
<script type="text/javascript" src="fusioncharts/fusioncharts.js"></script>
<script type="text/javascript" src="fusioncharts/themes/fusioncharts.theme.zune.js"></script>
USE test;
C REATE TABLE top_odi_wicket_takers(player varchar(255),wickets integer,
PRIMARY KEY (player)
);
INSERT INTO top_odi_wicket_takers(player, wickets) VALUES('MA Starc', 34);
INSERT INTO top_odi_wicket_takers(player, wickets) VALUES('ST Finn', 27);
INSERT INTO top_odi_wicket_takers(player, wickets) VALUES('Imran Tahir', 25);
INSERT INTO top_odi_wicket_takers(player, wickets) VALUES('M Morkel', 21);
INSERT INTO top_odi_wicket_takers(player, wickets) VALUES('TA Boult', 36);
INSERT INTO top_odi_wicket_takers(player, wickets) VALUES('TG Southee', 28);
INSERT INTO top_odi_wicket_takers(player, wickets) VALUES('CJ Anderson', 25);
INSERT INTO top_odi_wicket_takers(player, wickets) VALUES('Wahab Riaz', 25);
INSERT INTO top_odi_wicket_takers(player, wickets) VALUES('JH Davey', 21);
INSERT INTO top_odi_wicket_takers(player, wickets) VALUES('UT Yadav', 22);
SELECT * FROM top_odi_wicket_takers;
+-------------+---------+
| player | wickets |
+-------------+---------+
| CJ Anderson | 25 |
| Imran Tahir | 25 |
| JH Davey | 21 |
| M Morkel | 21 |
| MA Starc | 34 |
| ST Finn | 27 |
| TA Boult | 36 |
| TG Southee | 28 |
| UT Yadav | 22 |
| Wahab Riaz | 25 |
+-------------+---------+
10 rows in set (0.00 sec)
With this we have the required data i
//address of the server where db is installed
$servername = "localhost";
//username to connect to the db
//the default value is root
$username = "root";
//password to connect to the db
//this is the value you would have specified during installation of WAMP stack
$password = "";
//name of the db under which the table is created
$dbName = "test";
//establishing the connection to the db.
$conn = new mysqli($servername, $username, $password, $dbName);
//checking if there were any error during the last connection attempt
if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}
//the SQL query to be executed
$query = "SELECT * FROM top_odi_wicket_takers";
//storing the result of the executed query
$result = $conn->query($query);
//initialize the array to store the processed data
$jsonArray = array();
//check if there is any data returned by the SQL Query
if ($result->num_rows > 0) {
//Converting the results into an associative array
while($row = $result->fetch_assoc()) {
$jsonArrayItem = array();
$jsonArrayItem['label'] = $row['player'];
$jsonArrayItem['value'] = $row['wickets'];
//append the above created object into the main array.
array_push($jsonArray, $jsonArrayItem);
}
}
//Closing the connection to DB
$conn->close();
//set the response content type as JSON
header('Content-type: application/json');
//output the return value of json encode using the echo function.
echo json_encode($jsonArray);
//Closing the connection to DB
$conn->close();
//set the response content type as JSON
header('Content-type: application/json');
//output the return value of json encode using the echo function.
echo json_encode($jsonArray);
var apiChart = new FusionCharts({
type: 'column2d',
renderAt: 'api-chart-container',
width: '550',
height: '350',
dataFormat: 'json',
dataSource: {
"chart": chartProperties,
"data": chartData
}
});
$(function(){
$("#background-btn").click(function(){
modifyBackground();
});
$("#canvas-btn").click(function(){
modifyCanvas();
});
$("#dataplot-btn").click(function(){
modifyDataplot();
});
apiChart.render();
});
function modifyBackground(){
//to be implemented
}
function modifyCanvas(){
//to be implemented
}
function modifyDataplot(){
//to be implemented
}
<div id="chartContainer">FusionCharts XT will load here!</div>
</body>
</head>
</html>
</?php>
As i try to run the file "chart_data.php" in local host and I get the following page showing up:
The fourth step ask to create another file under name "char_sample.html". The code is as follows:
<html>
<head>
<body>
<title>My first chart using FusionCharts Suite XT</title>
<script type="text/javascript" src="fusioncharts/js/fusioncharts.js"></script>
<script type="text/javascript" src="fusioncharts/js/themes/fusioncharts.theme.fint.js"></script>
<!DOCTYPE html>
<title>FusionCharts Column 2D Sample</title>
</head>
<body>
<div id="chart-container">FusionCharts will render here</div>
<script src="js/jquery-2.1.4.js"></script>
<script src="js/fusioncharts.js"></script>
<script src="js/fusioncharts.charts.js"></script>
<script src="js/themes/fusioncharts.theme.zune.js"></script>
<script src="js/app.js"></script>
$(function(){
$.ajax({
url: 'http://localhost/chart_data.php'
type: 'GET',
success : function(data) {
chartData = data;
var chartProperties = {
"caption": "Top 10 wicket takes ODI Cricket in 2015",
"xAxisName": "Player",
"yAxisName": "Wickets Taken",
"rotatevalues": "1",
"theme": "zune"
};
apiChart = new FusionCharts({
type: 'column2d',
renderAt: 'chart-container',
width: '550',
height: '350',
dataFormat: 'json',
dataSource: {
"chart": chartProperties,
"data": chartData
}
});
apiChart.render();
}
});
});
<div id="chartContainer">FusionCharts XT will load here!</div>
</body>
</head>
</html>
Running the file in the localhost gives this result:
I don't see any chart by running both these files in the localhost. Whereas, I'm supposed to end up having chart. Any help would be great.
