Map area data statistics using php-ajax loading data

Source: Internet
Author: User

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.

Results:

HTML

Like the previous article on this site that used raphael. js to draw a map of China, first load the raphael. js library file and the chinamapPath. js path file in the head section.

The Code is as follows: Copy code

<Script type = "text/javascript" src = "jquery. js"> </script>
<Script type = "text/javascript" src = "raphael. js"> </script>
<Script type = "text/javascript" src = "chinamapPath. js"> </script>

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

<Div id = "map"> </div>

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.

The Code is as follows: Copy code

$ Host = "localhost"; // host
$ Db_user = "root"; // database username
$ Db_pass = ""; // Password
$ Db_name = "demo"; // Database Name
 
$ Link = mysql_connect ($ host, $ db_user, $ db_pass); // connect to the database
Mysql_select_db ($ db_name, $ link );
Mysql_query ("SET names UTF8 ");
 
$ SQL = "select active from mapdata order by id asc"; // query
$ Query = mysql_query ($ SQL );
 
While ($ row = mysql_fetch_array ($ query )){
$ Arr [] = $ row ['active'];
}
Echo json_encode ($ arr); // JSON format
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.

The Code is as follows: Copy code

$ (Function (){
$. Get ("json. php", function (json ){
...
});
});

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 how to use raphael. js to draw a map of China in the previous article on this site. The difference lies in filling the corresponding color for each province. Please refer to the compiled code:

The Code is as follows: Copy code
$ (Function (){
$. Get ("json. php", function (json) {// get data
Var data = string2Array (json); // convert the Array

Var flag;
Var arr = new Array (); // defines the new Array, corresponding to the level
For (var I = 0; I <data. length; I ++ ){
Var d = data [I];
If (d <100 ){
Flag = 0;
} Else if (d> = 100 & d <500 ){
Flag = 1;
} Else if (d> = 500 & d <2000 ){
Flag = 2;
} Else if (d> = 2000 & d <5000 ){
Flag = 3;
} Else if (d> = 5000 & d <10000 ){
Flag = 4;
} Else {
Flag = 5;
}
Arr. push (flag );
}
// Define the color
Var colors = ["# d7eef8", "#97d6f5", "#3 fbeef", "#00a2e9", "# 0084be", "#005c86"];

// Call the Map Drawing Method
Varr = Raphael ("map", 600,500 );
PaintMap (R );

Var textAttr = {
"Fill": "#000 ",
"Font-size": "12px ",
"Cursor": "pointer"
};

Var I = 0;
For (var state in china ){
China [state] ['path']. color = Raphael. getColor (0.9 );
(Function (st, state ){

// Obtain the central coordinates of the current image
Var xx = st. getBBox (). x + (st. getBBox (). width/2 );
Var yy = st. getBBox (). y + (st. getBBox (). height/2 );

// Modify the text offset coordinates of some maps
Switch (china [state] ['name']) {
Case "Jiangsu ":
Xx + = 5;
Yy-= 10;
Break;
Case "Hebei ":
Xx-= 10;
Yy + = 20;
Break;
Case "Tianjin ":
Xx + = 10;
Yy + = 10;
Break;
Case "Shanghai ":
Xx + = 10;
Break;
Case "Guangdong ":
Yy-= 10;
Break;
Case "Macao ":
Yy + = 10;
Break;
Case "Hong Kong ":
Xx + = 20;
Yy + = 5;
Break;
Case "Gansu ":
Xx-= 40;
Yy-= 30;
Break;
Case "Shaanxi ":
Xx + = 5;
Yy + = 10;
Break;
Case "Inner Mongolia ":
Xx-= 15;
Yy + = 65;
Break;
Default:
}
// Write text
China [state] ['text'] = R. text (xx, yy, china [state] ['name']). attr (textAttr );

Var fillcolor = colors [arr [I]; // obtain the corresponding color.

St. attr ({fill: fillcolor}); // fill in the background color

St [0]. onmouseover = function (){
St. animate ({fill: "# fdd", stroke: "# eee" },500 );
China [state] ['text']. toFront ();
R. safari ();
};
St [0]. onmouseout = function (){
St. animate ({fill: fillcolor, stroke: "# eee" },500 );
China [state] ['text']. toFront ();
R. safari ();
};

}) (China [state] ['path'], state );
I ++;
}
});
});

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.

The Code is as follows: Copy code

Function string2Array (string ){
Eval ("var result =" + decodeURI (string ));
Return result;
}

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.


Instance: http://file.bKjia. c0m/upload/2013/12/chinamap-data.zip

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.