PHP + Mysql + jQuery for area data statistics on map of China

Use raphael. in the js map of China article, I will show you how to use raphael. js draws a map of China. Today I want to introduce how to load data into the map in practical applications. This article uses PHPMysqljQuery in combination with examples to achieve data statistics on the number of copies in each province on map in China. This example calculates the number of active users of a product in each province.

Use raphael. in the js map of China article, I will show you how to use raphael. js draws a map of China. Today I want to introduce how to load data into the map in practical applications. This article uses PHPMysqljQuery in combination with examples to achieve data statistics on the number of copies in each province on map in China. This example calculates the number of active users of a product in each province.

Use raphael. in the js map of China article, I will show you how to use raphael. js draws a map of China. Today I want to introduce how to load data into the map in practical applications. Combined with examples, this article uses PHP + Mysql + jQuery to achieve the data statistics of each province on map in China.

In this example, the number of active users of a product in each province is counted. The data comes from the mysql database and is divided into different levels based on the number of active users in each province, the activity of each province is displayed with different background colors, meeting the actual application requirements.

HTML

Like the previous article "drawing a map of China using raphael. js" on this site, first load the raphael. js library file and the chinamapPath. js path file in the head section.

Html code

1. Type = "text/javascript" src = "jquery. js" >
2. Type = "text/javascript" src = "raphael. js" >
3. Type = "text/javascript" src = "chinamapPath. js" >

Then place p # map in the position where the map needs to be placed in the body.

Html code

1. Id = "map" >

PHP

We have prepared a mysql table named mapdata, which stores active user data of products in various provinces. We use PHP to read data from the mysql table, output the data in json format, and name the php file json. PHP.

[Php]View plaincopy

1. $ Host = "localhost"; // host
2. $ Db_user = "root"; // database username
3. $ Db_pass = ""; // Password
4. $ Db_name = "demo"; // Database Name
6. $ Link = mysql_connect ($ host, $ db_user, $ db_pass); // connect to the database
7. Mysql_select_db ($ db_name, $ link );
8. Mysql_query ("SET names UTF8 ");
10. $ SQL = "select active from mapdata order by id asc"; // query
11. $ Query = mysql_query ($ SQL );
13. While ($ row = mysql_fetch_array ($ query )){
14. $ Arr [] = $ row ['active'];
15. }
16. Echo json_encode ($ arr); // JSON format
17. Mysql_close ($ link); // close the connection

It is worth noting that we need to sort the provinces in the mapdata table in the same order as the provinces in the chinamapPath. js file so that the data read can correspond to the provinces in the map.

JQuery

First, we use jquery's get () method to obtain json data.

Js Code

1. $ (Function (){
2. $. Get ("json. php", function (json ){
3. ...
4. });
5. });

After obtaining the json data, we first need to convert the json data into an array. Then we traverse the entire array and make a classification based on the number of active users in each province in the json data, here I will divide the level into six levels: 0-5. The larger the number of active users, the deeper the background color. This will display the data level of different provinces at a glance on the map. This is basically the same as the previous article "using raphael. js to draw a map of China" on this site. The difference is that you can fill the corresponding color in different provinces. Please refer to the compiled code:

Js Code

1. $ (Function (){
2. $. Get ("json. php", function (json) {// get data
3. Var data = string2Array (json); // convert the Array
5. Var flag;
6. Var arr = new Array (); // defines the new Array, corresponding to the level
7. For (var I = 0; I
8. Var d = data [I];
9. If (d <100 ){
10. Flag = 0;
11. } Else if (d> = 100 & d <500 ){
12. Flag = 1;
13. } Else if (d> = 500 & d <2000 ){
14. Flag = 2;
15. } Else if (d> = 2000 & d <5000 ){
16. Flag = 3;
17. } Else if (d> = 5000 & d <10000 ){
18. Flag = 4;
19. } Else {
20. Flag = 5;
21. }
22. Arr. push (flag );
23. }
24. // Define the color
25. Var colors = ["# d7eef8", "#97d6f5", "#3 fbeef", "#00a2e9", "# 0084be", "#005c86"];
27. // Call the Map Drawing Method
28. Varr = Raphael ("map", 600,500 );
29. PaintMap (R );
31. Var textAttr = {
32. "Fill": "#000 ",
33. "Font-size": "12px ",
34. "Cursor": "pointer"
35. };
37. Var I = 0;
38. For (var state in china ){
39. China [state] ['path']. color = Raphael. getColor (0.9 );
40. (Function (st, state ){
42. // Obtain the central coordinates of the current image
43. Var xx = st. getBBox (). x + (st. getBBox (). width/2 );
44. Var yy = st. getBBox (). y + (st. getBBox (). height/2 );
46. // Modify the text offset coordinates of some maps
47. Switch (china [state] ['name']) {
48. Case "Jiangsu ":
49. Xx + = 5;
50. Yy-= 10;
51. Break;
52. Case "Hebei ":
53. Xx-= 10;
54. Yy + = 20;
55. Break;
56. Case "Tianjin ":
57. Xx + = 10;
58. Yy + = 10;
59. Break;
60. Case "Shanghai ":
61. Xx + = 10;
62. Break;
63. Case "Guangdong ":
64. Yy-= 10;
65. Break;
66. Case "Macao ":
67. Yy + = 10;
68. Break;
69. Case "Hong Kong ":
70. Xx + = 20;
71. Yy + = 5;
72. Break;
73. Case "Gansu ":
74. Xx-= 40;
75. Yy-= 30;
76. Break;
77. Case "Shaanxi ":
78. Xx + = 5;
79. Yy + = 10;
80. Break;
81. Case "Inner Mongolia ":
82. Xx-= 15;
83. Yy + = 65;
84. Break;
85. Default:
86. }
87. // Write text
88. China [state] ['text'] = R. text (xx, yy, china [state] ['name']). attr (textAttr );
90. Var fillcolor = colors [arr [I]; // obtain the corresponding color.
92. St. attr ({fill: fillcolor}); // fill in the background color
94. St [0]. onmouseover = function (){
95. St. animate ({fill: "# fdd", stroke: "# eee" },500 );
96. China [state] ['text']. toFront ();
97. R. safari ();
98. };
99. St [0]. onmouseout = function (){
100. St. animate ({fill: fillcolor, stroke: "# eee" },500 );
101. China [state] ['text']. toFront ();
102. R. safari ();
103. };
105. }) (China [state] ['path'], state );
106. I ++;
107. }
108. });
109. });

In the above Code, use var fillcolor = colors [arr [I]; To obtain the color value of the corresponding level, and then use st. attr ({fill: fillcolor}); fill the color in the corresponding province block. In addition, the string2Array () function converts a string to an array.

Js Code

1. Function string2Array (string ){
2. Eval ("var result =" + decodeURI (string ));
3. Return result;
4. }

In this way, we can see a map of China with different backgrounds in different provinces. Different colors can be used to differentiate the number of active users in different provinces to achieve the expected goal.