Recommended Posts

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: 

 

post-68858-0-29926100-1458766331_thumb.png

 

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({
    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:
 
post-68858-0-58270400-1458766860_thumb.png
 
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. 

Share this post


Link to post
Share on other sites

Hi

 

You have placed whole code as HTML markup. You can have to specify PHP and HTML code separately and to render the charts with PHP you will require FusionCharts PHP wrapper which can be downloaded using this link: http://www.fusioncharts.com/php-charts/

 

Also, you have to execute SQL queries at phpmyadmin SQL interface to prepare database/data for chart and connect to that database using PHP DB connection. 

 

You can also refer to this tutorial with downloadable sample code: http://www.kdnuggets.com/2016/03/dynamic-data-visualization-php-mysql.html

Share this post


Link to post
Share on other sites

Hi

 

You have placed whole code as HTML markup. You can have to specify PHP and HTML code separately and to render the charts with PHP you will require FusionCharts PHP wrapper which can be downloaded using this link: http://www.fusioncharts.com/php-charts/

 

Also, you have to execute SQL queries at phpmyadmin SQL interface to prepare database/data for chart and connect to that database using PHP DB connection. 

 

You can also refer to this tutorial with downloadable sample code: http://www.kdnuggets.com/2016/03/dynamic-data-visualization-php-mysql.html

Thanks for your reply!

 

I have downloaded php wrapper. what is next, i should with it?

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now