Search the Community
Showing results for tags 'gettingstarted'.
Found 1 result
-
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.
