Skip to content

Commit 5afd70b

Browse files
DishankTiwariDishankTiwari
committed
php mysql updated
1 parent 420c887 commit 5afd70b

1 file changed

Lines changed: 114 additions & 115 deletions

File tree

‎using-with-server-side-languages/tutorials/php-mysql-charts.md‎

Lines changed: 114 additions & 115 deletions
Original file line numberDiff line numberDiff line change
@@ -6,8 +6,8 @@ heading: Create Interactive Charts using PHP and MySQL Database
66

77
There are two ways of obtaining data for the chart:
88

9-
1. __Statically__ - by defining the data during the creation of the chart
10-
2. __Dynamically__ - by retrieving data from another source
9+
1. **Statically** - by defining the data during the creation of the chart
10+
2. **Dynamically** - by retrieving data from another source
1111

1212
`Static binding` of data is not much useful and it does not accommodate updates to the underlying data whereas in case of `dynamic binding`, the data shown by the chart is always fresh.
1313

@@ -17,10 +17,10 @@ But how do we go about dynamic binding of data? Before we explain that, let us u
1717

1818
In this article we are going to show you how to write server side code in PHP to retrieve the data from MySQL database and bind the data obtained to the chart. We are going to divide this article in two four parts:
1919

20-
* Installing prerequisite software
21-
* Creating database and initializing with seed data in MySQL
22-
* Implementing PHP based server program
23-
* Integrating chart with the data from server
20+
- Installing prerequisite software
21+
- Creating database and initializing with seed data in MySQL
22+
- Implementing PHP based server program
23+
- Integrating chart with the data from server
2424

2525
To demonstrate this let us consider data of [top 10 wicket takers](http://stats.espncricinfo.com/ci/engine/records/bowling/most_wickets_career.html?class=2;id=2015;type=year) in One Day International (ODI) cricket in the year 2015.
2626

@@ -34,8 +34,7 @@ To get the code in this article working we would need to install the following:
3434
- Apache web server
3535
- PHP
3636

37-
This stack is popularly called as *AMP(Apache MySQL PHP) stack and when you include the platform on which this stack is running then it becomes either WAMP (Windows Apache MySql PHP) or LAMP (Linux Apache MySQL PHP). So there are lots of vendors who bundle this stack and make it available for download. For this article we are going to make use of the WAMP bundle provided by Bitnami and can be downloaded from [here](https://bitnami.com/stack/wamp).
38-
37+
This stack is popularly called as \*AMP(Apache MySQL PHP) stack and when you include the platform on which this stack is running then it becomes either WAMP (Windows Apache MySql PHP) or LAMP (Linux Apache MySQL PHP). So there are lots of vendors who bundle this stack and make it available for download. For this article we are going to make use of the WAMP bundle provided by Bitnami and can be downloaded from [here](https://bitnami.com/stack/wamp).
3938

4039
At the end of the installation of the WAMP bundle you will be prompted to launch the app as shown below:
4140

@@ -79,7 +78,6 @@ Now let us seed this table with some initial data taken from [here](http://stats
7978
INSERT INTO top_odi_wicket_takers(player, wickets) VALUES('UT Yadav', 22);
8079
```
8180

82-
8381
We can verify whether the data is inserted by running the SELECT SQL command as shown below:
8482

8583
```sql
@@ -109,14 +107,16 @@ PHP is one of the most widely used server side programming languages. (other suc
109107

110108
Let us first list out the steps involved in the program before we proceed with its implementation.
111109

112-
* Establish the connection with MySQL Database using the hostname, username, password and database name.
113-
* Execute the query to get the list of players from DB and store them in a variable.
114-
* Iterate over the result set to build an array of maps where each map consists of two keys namely: **label** and **value**. The label stores the name of the player and value contains the number of wickets
115-
* Encode the array of maps into JSON and then output the encoded JSON. (If JSON is something new for you, then we would recommend you to read about it [here](https://en.wikipedia.org/wiki/JSON).)
110+
- Establish the connection with MySQL Database using the hostname, username, password and database name.
111+
- Execute the query to get the list of players from DB and store them in a variable.
112+
- Iterate over the result set to build an array of maps where each map consists of two keys namely: **label** and **value**. The label stores the name of the player and value contains the number of wickets
113+
- Encode the array of maps into JSON and then output the encoded JSON. (If JSON is something new for you, then we would recommend you to read about it [here](https://en.wikipedia.org/wiki/JSON).)
116114

117115
The implementation of above steps is as follows:
118116

119-
* The default username to connect to MySQL instance running on your machine is **root** and **password** is the one you specified during the installation of your WAMP bundle. The interaction with the database from PHP is achieved using the mysqli extension. Below is the implementation to establish the connection:
117+
- The default username to connect to MySQL instance running on your machine is **root** and **password** is the one you specified during the installation of your WAMP bundle. The interaction with the database from PHP is achieved using the mysqli extension. Below is the default implementation to establish the connection:
118+
119+
> You can set custom `username` and `password` to connect to the database.
120120
121121
```php
122122
<?php
@@ -136,10 +136,10 @@ The implementation of above steps is as follows:
136136
if ($conn->connect_error) {
137137
die("Connection failed: " . $conn->connect_error);
138138
}
139-
?>
139+
?>
140140
```
141141

142-
* Once we have the connection established, we use connection object $conn to execute any SQL commands. We can now execute our SQL query as shown below:
142+
- Once we have the connection established, we use connection object \$conn to execute any SQL commands. We can now execute our SQL query as shown below:
143143

144144
```php
145145
<?php
@@ -150,7 +150,7 @@ The implementation of above steps is as follows:
150150
?>
151151
```
152152

153-
* We have to now process the $result obtained in the above step in the form which is understood by FusionCharts. FusionCharts uses the chart data in the form of a list of label-value pairs. If there are rows/data returned by the query, we convert that data into an associative array. An associative array is just like any other array but in place of indices it uses keys to store the value of the array element. Below is the implementation to process the data in $result object:
153+
- We have to now process the $result obtained in the above step in the form which is understood by FusionCharts. FusionCharts uses the chart data in the form of a list of label-value pairs. If there are rows/data returned by the query, we convert that data into an associative array. An associative array is just like any other array but in place of indices it uses keys to store the value of the array element. Below is the implementation to process the data in $result object:
154154

155155
```php
156156
<?php
@@ -170,17 +170,17 @@ The implementation of above steps is as follows:
170170
?>
171171
```
172172

173-
* Let us now encode the data processed in above step into JSON data as shown below:
173+
- Let us now encode the data processed in above step into JSON data as shown below:
174174

175175
```php
176176
<?php
177177
//Closing the connection to DB
178178
$conn->close();
179179
//set the response content type as JSON
180180
header('Content-type: application/json');
181-
//output the return value of json encode using the echo function.
181+
//output the return value of json encode using the echo function.
182182
echo json_encode($jsonArray);
183-
?>
183+
?>
184184
```
185185

186186
Let us integrate the code we have from all the steps above into a file named: chart_data.php and place this file at **BITNAMI_INSTALL_DIR\apache2\htdocs**, where BITNAMI_INSTALL_DIR is the path where your Bitnami WAMP package is installed.
@@ -228,51 +228,50 @@ The contents of the chart_data.php is as shown below:
228228
$conn->close();
229229
//set the response content type as JSON
230230
header('Content-type: application/json');
231-
//output the return value of json encode using the echo function.
231+
//output the return value of json encode using the echo function.
232232
echo json_encode($jsonArray);
233-
?>
233+
?>
234234
```
235235

236-
237236
```javascript
238-
var apiChart = new FusionCharts({
239-
type: 'column2d',
240-
renderAt: 'api-chart-container',
241-
width: '550',
242-
height: '350',
243-
dataFormat: 'json',
244-
dataSource: {
245-
"chart": chartProperties,
246-
"data": chartData
247-
}
248-
});
249-
$(function(){
250-
$("#background-btn").click(function(){
251-
modifyBackground();
252-
});
253-
254-
$("#canvas-btn").click(function(){
255-
modifyCanvas();
256-
});
257-
258-
$("#dataplot-btn").click(function(){
259-
modifyDataplot();
260-
});
261-
262-
apiChart.render();
263-
});
264-
265-
function modifyBackground(){
266-
//to be implemented
267-
}
268-
269-
function modifyCanvas(){
270-
//to be implemented
271-
}
272-
273-
function modifyDataplot(){
274-
//to be implemented
275-
}
237+
var apiChart = new FusionCharts({
238+
type: "column2d",
239+
renderAt: "api-chart-container",
240+
width: "550",
241+
height: "350",
242+
dataFormat: "json",
243+
dataSource: {
244+
chart: chartProperties,
245+
data: chartData
246+
}
247+
});
248+
$(function() {
249+
$("#background-btn").click(function() {
250+
modifyBackground();
251+
});
252+
253+
$("#canvas-btn").click(function() {
254+
modifyCanvas();
255+
});
256+
257+
$("#dataplot-btn").click(function() {
258+
modifyDataplot();
259+
});
260+
261+
apiChart.render();
262+
});
263+
264+
function modifyBackground() {
265+
//to be implemented
266+
}
267+
268+
function modifyCanvas() {
269+
//to be implemented
270+
}
271+
272+
function modifyDataplot() {
273+
//to be implemented
274+
}
276275
```
277276

278277
To run chart_data.php, open http://localhost/chart_data.php in your browser. You would see the below JSON output:
@@ -304,37 +303,37 @@ First let us download the required JavaScript libraries:
304303
Now let us create the HTML page chart_sample.html required to render the chart:
305304

306305
```html
307-
<!DOCTYPE html>
308-
<html>
309-
<head>
310-
<title>FusionCharts Column 2D Sample</title>
311-
</head>
312-
<body>
313-
<div id="chart-container">FusionCharts will render here</div>
314-
<script src="js/jquery-2.1.4.js"></script>
315-
<script src="js/fusioncharts.js"></script>
316-
<script src="js/fusioncharts.charts.js"></script>
317-
<script src="js/themes/fusioncharts.theme.zune.js"></script>
318-
<script src="js/app.js"></script>
319-
</body>
320-
</html>
306+
<!DOCTYPE html>
307+
<html>
308+
<head>
309+
<title>FusionCharts Column 2D Sample</title>
310+
</head>
311+
<body>
312+
<div id="chart-container">FusionCharts will render here</div>
313+
<script src="js/jquery-2.1.4.js"></script>
314+
<script src="js/fusioncharts.js"></script>
315+
<script src="js/fusioncharts.charts.js"></script>
316+
<script src="js/themes/fusioncharts.theme.zune.js"></script>
317+
<script src="js/app.js"></script>
318+
</body>
319+
</html>
321320
```
322321

323-
The code which interacts with the PHP server implemented above and renders the chart using our Javascript library would be implemented in app.js. The javascript implementation is as shown below:
322+
The code which interacts with the PHP server implemented above. This code renders the chart using a Javascript library implemented in the `app.js` file. Place the `app.js` file in the `js` folder. The javascript implementation is shown below:
324323

325-
1. Fetch the required data from the server via an Ajax call using jQuery:
324+
1. Fetch the required data from the server via an Ajax call using jQuery:
326325

327326
```javascript
328-
$.ajax({
329-
url: 'http://localhost/chart_data.php',
330-
type: 'GET',
331-
success : function(data) {
332-
chartData = data;
333-
}
334-
});
327+
$.ajax({
328+
url: "http://localhost/chart_data.php",
329+
type: "GET",
330+
success: function(data) {
331+
chartData = data;
332+
}
333+
});
335334
```
336335

337-
2. After retrieving the data from the server, initialise the FusionCharts object with the chart properties and chart data as shown below:
336+
2. After retrieving the data from the server, initialise the FusionCharts object with the chart properties and chart data as shown below:
338337

339338
```javascript
340339
var chartProperties = {
@@ -357,40 +356,40 @@ The code which interacts with the PHP server implemented above and renders the c
357356
});
358357
apiChart.render();
359358
}
360-
```
359+
```
361360

362361
### Final app.js will look as below:
363362

364363
```javascript
365-
$(function(){
366-
$.ajax({
367-
url: 'http://localhost/chart_data.php',
368-
type: 'GET',
369-
success : function(data) {
370-
chartData = data;
371-
var chartProperties = {
372-
"caption": "Top 10 wicket takes ODI Cricket in 2015",
373-
"xAxisName": "Player",
374-
"yAxisName": "Wickets Taken",
375-
"rotatevalues": "1",
376-
"theme": "zune"
377-
};
378-
apiChart = new FusionCharts({
379-
type: 'column2d',
380-
renderAt: 'chart-container',
381-
width: '550',
382-
height: '350',
383-
dataFormat: 'json',
384-
dataSource: {
385-
"chart": chartProperties,
386-
"data": chartData
387-
}
388-
});
389-
apiChart.render();
390-
}
391-
});
392-
});
393-
```
364+
$(function() {
365+
$.ajax({
366+
url: "http://localhost/chart_data.php",
367+
type: "GET",
368+
success: function(data) {
369+
chartData = data;
370+
var chartProperties = {
371+
caption: "Top 10 wicket takes ODI Cricket in 2015",
372+
xAxisName: "Player",
373+
yAxisName: "Wickets Taken",
374+
rotatevalues: "1",
375+
theme: "zune"
376+
};
377+
apiChart = new FusionCharts({
378+
type: "column2d",
379+
renderAt: "chart-container",
380+
width: "550",
381+
height: "350",
382+
dataFormat: "json",
383+
dataSource: {
384+
chart: chartProperties,
385+
data: chartData
386+
}
387+
});
388+
apiChart.render();
389+
}
390+
});
391+
});
392+
```
394393

395394
Now load the HTML in the browser using the URL: `http://localhost/chart_sample.html` and you will get the below chart:
396395

0 commit comments

Comments
 (0)