Php+mysql+jquery implementation of China map area data statistics (raphael.js)

Used Baidu statistics or CNZZ statistics of children's shoes should know, backstage there is a map statistics, different visits to the provinces show the color is not the same, today I will lead you to develop a case like this. In an article on "Using Raphael.js to map China", I gave you a description of how to use Raphael.js to draw a map of China, today I would like to introduce to you in practical application, how to load data into the map. In this paper, we use php+mysql+jquery to realize the statistic effect of data in China map provinces.

In this example, statistics on the number of active users in each province of a product background, data from the MySQL database, according to the number of active users in each province, divided into different levels, and different background color to show the level of activity in the provinces, in line with the actual application needs.

Html

And the site of the previous article, "Using Raphael.js map of China," the first load in the head of the Raphael.js library files and chinamappath.js path information files.

<Scripttype= "Text/javascript"src= "Jquery.js"></Script> <Scripttype= "Text/javascript"src= "Raphael.js"></Script> <Scripttype= "Text/javascript"src= "Chinamappath.js"></Script>

Then place the div#map in the body where you need to place the map.

<id= "Map"></div>

Php

We prepare a MySQL table named MapData, which stores active user data for the product in each province. We use PHP to read the data from the MySQL table and output the read data in JSON format and name the PHP file json.php.

$host= "localhost";//Host$db _user= "Root";//Database user name$db _pass="";//Password$db _name= "Demo";//Database name $link=mysql_connect($host,$db _user,$db _pass);//connecting to a databasemysql_select_db($db _name,$link); mysql_query("SET names UTF8"); $sql= "Select active from MapData ORDER by ID ASC";//Enquiry$query=mysql_query($sql);  while($row=Mysql_fetch_array($query)){     $arr[] =$row[' Active ']; } EchoJson_encode ($arr);//JSON formatMysql_close($link);//Close Connection

It is important to note that the order of the provinces in the MapData table is the same 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 get the JSON data.

$ (function() {     $.get ("json.php",function(JSON) {         ...     });});

After we get to the JSON data, we first convert the JSON data to an array, and then we iterate over the entire arrays, based on the number of active users in each province of the JSON data, we make a hierarchical distinction, where I divide the hierarchy into 0-5 six levels, the larger the number of active users, the deeper the background color, This will show on the map at a glance to see the level of data in different provinces. When drawing the map and the site of the previous article "Using Raphael.js Map of China," the introduction of the basic, the difference is to give each of the different provinces to fill the corresponding color, see the compiled code:

$(function() {$.get ("Json.php",function(JSON) {//Get Data    vardata = String2array (JSON);//Converting Arrays         varFlag; vararr =NewArray ();//define a new array, corresponding level     for(vari=0;i<data.length;i++){         varD =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 Color    varcolors = ["#d7eef8", "#97d6f5", "#3fbeef", "#00a2e9", "#0084be", "#005c86"]; //calling the Draw map method    varR = Raphael ("Map", 600, 500);          Paintmap (R); varTextattr = {         "Fill": "#000",         "Font-size": "12px",         "Cursor": "Pointer"     }; varI=0;  for(varStateinchChina ) {china[state][' path '].color = Raphael.getcolor (0.9); (function(St, state) {//gets the center coordinate of the current drawing            varxx = St.getbbox (). x + (St.getbbox (). WIDTH/2); varyy = St.getbbox (). Y + (St.getbbox (). HEIGHT/2); //Modify part of the map text offset coordinates            Switch(china[state][' name ']) {                  CaseJiangsu: xx+ = 5; YY-= 10;  Break;  CaseHebei: xx-= 10; YY+ = 20;  Break;  CaseTianjin: xx+ = 10; YY+ = 10;  Break;  CaseShanghai: xx+ = 10;  Break;  CaseGuangdong: yy-= 10;  Break;  CaseMacau: yy+ = 10;  Break;  CaseHong Kong: xx+ = 20; YY+ = 5;  Break;  CaseGansu: xx-= 40; YY-= 30;  Break;  CaseShaanxi: xx+ = 5; YY+ = 10;  Break;  CaseInner Mongolia: xx-= 15; YY+ = 65;  Break; default:             }             //Write Textchina[state][' text ' = R.text (xx, yy, china[state][' name ')]). attr (TEXTATTR); varFillColor = Colors[arr[i]];//get the corresponding colorst.attr ({fill:fillcolor});//Fill Background Colorst[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]], get the color value of the corresponding level, and then through St.attr ({fill:fillcolor}), fill the color into the corresponding province block. In addition, the String2array () function converts a string into an array.

function String2array (String) {      eval ("var result =" + decodeURI (string));       return result;  

In this way, we can see a different province of different background color map of China, according to different colors can distinguish between the number of active users between provinces to achieve the desired target.

Php+mysql+jquery implementation of China map area data statistics (raphael.js)