farooq14 Report post Posted March 23, 2016 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. Share this post Link to post Share on other sites
Gagan Sikri Report post Posted March 28, 2016 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
farooq14 Report post Posted March 28, 2016 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
Gagan Sikri Report post Posted April 1, 2016 Hi You have to include FusionCharts PHP Wrapper in your PHP page and then follow the steps as explained in the tutorial: http://www.kdnuggets.com/2016/03/dynamic-data-visualization-php-mysql.html You can also refer to downloadable sample available in this tutorial. Share this post Link to post Share on other sites
