The following set of codes are used to generate a chart using fusionchart javascript library! This is the php script
<?php
//address of the server where db is installed
$servername = "localhost";
//username to connect to the db
//the default value is root
$username = "chart";
//password to connect to the db
//this is the value you would have specified during installation of WAMP stack
$password = "L12345d";
//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);
?>
This is the json script
$(function() {
$.ajax({
url: 'http://localhost/GP/Charts/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();
}
});
});
The follwoing code gives the html code
<!DOCTYPE html>
<html>
<head>
<title>Fusion Charts 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>
</body>
</html>
According to the tutorial i followed it should generate the chart when the html code is executed! But when its executed no chart apperas but only a text stating "FusionCharts will render here" appears how can i correct the code inorder to generate the chart? i followed this tutorial exaclty http://www.fusioncharts.com/dev/using-with-server-side-languages/tutorials/php-mysql-charts.html
require('http://localhost/GP/Charts/chart_data.php'')
should be
require('http://localhost/GP/Charts/chart_data.php')
i think u should keep all the script files inside the head tag so that they load before the dom(div) loads..give it a try
I guess you have not installed the jquery properly. Click here to download jquery and copy that under the above created js folder.