c# - Showing SQL server data on map in asp.net -
i have projects demands implementing map interface. example have list of numerous patient in india show various disease. patient divided state wise. on execution disease should display map of india. state has highest number of patient in india should painted different color. map should paint top 5 states different color has highest number of patient.
i have come code snippet displays static map of india. need fill colors in show top 5 states contain highest number of patient.
the data stored in sql server 2008
<map id="latitude-and-longitude-map-of-india" name="latitude-and-longitude-map-of-india"> <area shape="poly" alt="jammu & kashmir" coords="184,143,177,138,171,139,171,134,156,127,153,101,163,95,164,89,159,87,160,82,151,78,150,74,142,74,144,67,151,60,162,59,160,55,166,58,172,53,176,54,177,55,183,53,193,65,204,72,206,77,215,80,215,84,226,82,236,76,241,76,243,72,246,76,254,76,259,80,257,97,252,98,251,100,248,101,249,107,246,110,241,109,239,112,241,116,240,119,240,123,246,125,251,136,240,140,237,139,237,136,230,138,229,134,226,137,219,129,213,133,205,127,198,127,191,132,192,135,188,141" href="jammu.aspx" title="jammu & kashmir" /> <area shape="poly" alt="himachal pradesh" coords="202,165,203,161,198,159,197,160,194,156,192,148,188,146,188,141,192,135,191,133,197,127,205,127,213,134,218,129,226,136,230,134,231,138,236,149,236,154,239,162,227,162,222,166,221,177,212,176,210,170,205,167" href="himachal pradesh.aspx" title="himachal pradesh" /> <area shape="poly" alt="punjab" coords="156,183,159,181,159,175,171,164,171,153,172,148,181,144,183,142,188,142,188,146,192,147,193,154,197,160,199,159,203,161,202,165,207,168,207,176,201,180,196,183,195,189,183,189,181,190,176,184,168,185" href="punjab.aspx" title="punjab" /> <area shape="poly" alt="haryana" coords="187,212,183,201,182,197,171,196,169,185,176,184,180,190,183,189,194,189,196,183,207,177,207,168,211,172,212,176,218,177,213,183,211,191,212,203,212,204,206,207,206,211,211,213,215,211,217,217,216,222,207,226,207,219,206,216,202,220,197,218,194,224,191,221,193,214" href="haryana.aspx" title="haryana" /> <area shape="poly" alt="delhi" coords="213,208,212,203,205,208,206,211,211,213,215,211" href="delhi.aspx" title="delhi" /> <area shape="poly" alt="uttrakhand" coords="253,166,248,167,244,159,241,157,238,162,228,162,221,166,221,177,223,180,221,183,220,189,225,190,227,189,231,185,234,193,238,194,237,198,249,205,257,205,260,198,261,194,262,187,270,181,271,178,259,174,258,170" href="uttrakhand.aspx" title="uttrakhand" /> <area shape="poly" alt="uttar pradesh" coords="228,241,220,240,215,243,215,240,220,238,217,237,218,232,211,225,217,221,217,215,214,210,211,204,211,190,214,180,220,176,223,180,221,183,220,189,225,190,228,188,231,185,234,193,238,194,237,198,249,205,257,205,263,209,267,208,279,216,286,222,290,222,299,225,302,229,310,231,313,228,319,229,328,244,320,246,325,249,322,251,323,254,331,259,322,262,312,270,312,275,315,280,313,283,312,290,309,294,302,292,302,288,302,280,296,280,293,278,288,276,287,273,281,272,278,272,276,275,271,274,270,273,263,273,261,267,253,272,246,270,243,272,239,269,237,267,232,269,238,281,240,284,238,288,233,286,230,286,228,278,228,275,231,272,230,268,234,265,237,263,238,258,243,250,239,245,235,243,229,242" href="uttar pradesh.aspx" title="uttar pradesh" /> <area shape="poly" alt="rajasthan" coords="112,278,104,264,105,260,98,258,96,255,96,252,98,244,90,242,87,239,87,234,96,224,101,217,107,219,108,223,111,224,116,222,124,221,132,211,133,206,142,201,144,200,150,189,150,185,155,183,169,185,171,195,171,196,182,197,187,212,193,214,191,221,194,224,197,218,202,220,206,216,207,220,207,226,211,224,211,225,218,232,217,237,220,238,215,240,215,243,221,240,227,241,225,243,208,254,202,259,200,262,203,268,211,268,214,267,214,273,205,274,206,279,210,280,208,284,205,284,206,291,201,288,195,288,188,295,183,294,185,291,188,291,187,284,189,283,188,279,179,280,180,274,179,273,175,277,173,277,171,282,172,285,171,287,173,287,173,297,167,302,170,306,164,308,152,299,148,295,149,290,144,288,146,284,144,281,141,284,126,278,111,278" href="rajasthan.aspx" title="rajasthan" /> <area shape="poly" alt="madhya pradesh" coords="160,328,160,323,159,323,160,318,164,315,165,311,164,308,170,306,167,302,173,297,173,288,171,287,172,284,171,282,173,277,175,277,179,273,180,274,179,280,182,280,188,279,189,283,187,284,188,291,185,291,183,294,187,295,188,295,195,288,201,288,206,291,205,284,208,284,210,280,206,279,205,274,214,273,214,267,211,268,204,268,200,262,203,258,208,254,223,244,227,241,230,242,236,243,239,245,243,250,238,258,237,263,230,268,231,271,228,275,228,280,230,286,233,286,238,288,240,284,232,269,237,267,243,272,246,270,253,272,261,267,263,273,269,273,276,275,278,272,285,272,288,274,288,276,296,280,302,280,302,292,299,296,284,295,284,301,290,300,294,305,293,308,290,309,283,319,277,320,271,330,270,339,267,340,261,334,256,336,247,333,238,336,233,337,228,336,223,339,217,338,216,332,209,333,204,336,202,342,196,345,192,338,178,338,173,334,166,333,161,336,156,335,156,330" href="madhya pradesh.aspx" title="madhya pradesh" /> <area shape="poly" alt="gujarat" coords="125,338,109,348,99,346,79,327,84,325,87,325,87,324,77,324,74,318,75,316,80,320,95,315,101,307,101,305,98,308,86,311,70,304,66,294,68,294,73,291,71,291,64,294,63,290,73,288,73,284,88,284,90,286,94,287,98,283,102,283,104,286,107,286,111,283,111,278,126,278,141,284,144,281,146,284,144,288,149,290,148,295,157,303,164,308,165,311,164,315,160,318,159,323,160,323,160,328,156,330,156,335,160,336,159,338,153,342,156,347,156,351,151,352,150,350,148,352,147,360,144,360,142,357,136,359,136,356,140,351,139,348,137,341,135,338,135,336,141,332,134,332,137,327,135,325,137,323,129,321,128,327,125,328,126,330,128,331,129,334" href="gujarat.aspx" title="gujarat" /> <area shape="poly" alt="dadar & nagar haveli" coords="140,361,139,358,141,357,143,358,143,360" href="http://www.mapsofindia.com/lat_long/dadraandnagarhaveli/" title="dadar & nagar haveli" /> <area shape="poly" alt="maharashtra" coords="147,433,144,422,141,401,137,385,137,373,134,364,136,359,139,359,140,361,144,360,146,360,147,360,148,352,150,350,151,352,156,351,156,347,153,342,160,338,160,336,161,335,166,333,168,334,173,334,178,338,192,338,196,345,202,342,204,336,209,333,216,332,217,338,223,339,228,336,234,337,242,335,247,333,255,336,261,334,267,341,264,345,268,351,267,358,265,360,267,362,266,366,273,371,272,376,267,373,263,380,263,387,258,386,256,380,258,377,257,372,253,370,250,373,245,370,240,370,235,367,230,367,228,376,223,377,222,381,223,384,218,390,217,394,214,394,212,391,210,396,206,397,203,402,197,405,196,411,183,408,182,411,185,413,184,418,179,418,175,419,172,417,171,420,167,424,162,423,161,425,164,430,164,433,160,439,155,440,154,438,150,439" href="maharashtra.aspx" title="maharashtra" /> <area shape="poly" alt="goa" coords="157,454,159,452,161,446,160,439,155,440,153,438,150,439,154,446,156,455" href="goa.aspx" title="goa" /> <area shape="poly" alt="karnataka" coords="169,489,165,470,162,461,157,455,159,452,161,445,160,439,164,433,164,429,161,425,162,423,167,424,171,420,172,417,175,419,178,418,184,418,185,413,182,411,183,408,196,411,197,405,203,402,206,397,210,396,212,391,214,394,217,394,218,402,215,404,215,407,218,408,214,414,216,416,215,424,212,426,216,430,215,436,209,436,208,441,207,446,209,447,209,451,204,452,204,459,205,464,206,469,209,465,213,465,212,469,207,471,207,474,211,474,213,472,215,475,219,474,223,472,227,473,226,476,231,478,231,482,234,483,235,486,228,492,222,490,217,496,217,499,215,502,215,502,219,502,219,507,215,508,215,510,206,510,203,513,196,511,190,505,186,506,179,500,177,494,169,490" href="karnataka.aspx" title="karnataka" /> <area shape="poly" alt="kerala" coords="209,572,211,568,210,565,210,561,209,558,213,552,214,549,210,548,211,537,210,536,203,537,205,528,201,525,203,522,202,520,198,520,198,517,194,515,194,512,196,511,190,505,186,506,179,500,177,494,169,490,178,509,185,519,191,536,197,550,194,551,201,565" href="kerala.aspx" title="kerala" /> <area shape="circle" alt="pondicherry" coords="257,518,2" href="http://www.mapsofindia.com/lat_long/pondicherry/" title="pondicherry" /> <area shape="poly" alt="tamil nadu" coords="230,558,237,557,242,554,246,555,246,553,241,553,240,550,246,542,248,536,257,536,257,519,256,520,255,519,255,516,256,509,256,504,262,497,266,488,264,479,261,478,255,483,250,483,247,487,238,487,235,490,235,494,231,494,228,492,222,490,217,496,217,499,215,501,215,502,219,502,219,507,215,508,215,510,206,510,203,513,195,511,194,512,194,515,198,517,198,520,202,520,203,522,201,525,205,528,203,537,210,536,211,538,210,548,214,549,212,554,209,558,210,562,210,566,211,568,209,573,215,577,225,570,227,563,229,559" href="tamilnadu.aspx" title="tamil nadu" /> <area shape="poly" alt="andhra pradesh" coords="260,447,265,438,269,436,276,438,282,427,289,428,297,425,300,419,297,416,307,408,317,401,327,392,338,381,339,378,337,377,331,382,331,384,323,382,319,376,315,380,315,383,310,386,309,392,306,390,303,393,300,389,299,394,298,397,292,398,288,400,288,404,286,406,285,410,282,412,275,415,272,418,268,417,266,419,268,422,267,423,261,419,259,424,248,426,244,432,238,435,232,436,227,439,219,439,215,436,209,436,207,446,209,447,209,452,204,452,204,459,206,469,209,465,213,465,212,469,207,471,207,474,211,474,213,472,215,475,220,474,223,472,227,473,226,476,230,478,231,478,231,482,234,483,235,486,228,492,230,494,235,494,235,490,238,487,247,487,250,483,255,483,261,478,264,479,262,472,261,467,262,463,261,456,260,448" href="andhra pradesh.aspx" title="andhra pradesh" /> <area shape="poly" alt="chhattisgarh" coords="298,365,290,361,291,365,295,375,295,383,288,392,284,394,282,401,282,402,277,402,272,394,270,389,266,388,264,389,262,387,263,386,263,380,267,373,272,376,273,371,266,366,267,363,265,360,267,358,268,351,264,345,267,341,266,340,269,339,270,339,271,329,277,320,283,319,290,309,293,308,294,305,290,300,284,301,284,295,299,296,302,292,309,294,313,289,322,299,324,297,325,309,330,309,326,315,325,315,325,320,318,324,315,334,312,342,302,343,297,350,299,361,302,363,302,366" href="chhattisgarh.aspx" title="chhattisgarh" /> <area shape="poly" alt="orissa" coords="362,363,352,366,343,372,337,377,331,382,331,384,324,382,323,382,319,376,315,380,315,383,310,386,309,392,306,390,303,393,300,389,298,397,292,398,285,401,282,401,284,394,289,391,295,383,295,374,291,364,290,361,299,365,302,366,302,362,302,363,299,361,297,350,302,343,312,342,318,324,325,320,328,320,333,319,339,318,341,317,341,324,344,325,347,323,353,324,356,326,358,322,357,315,364,318,370,322,375,325,383,331,373,335,372,338,375,350,369,355,364,360,361,361" href="orissa.aspx" title="orissa" /> <area shape="poly" alt="jharkhand" coords="381,286,385,282,385,274,385,267,383,264,380,264,374,269,372,278,364,279,364,282,361,282,360,279,356,276,351,276,349,279,343,282,340,283,336,282,329,284,326,280,321,280,314,281,313,285,313,289,322,299,324,297,325,309,330,309,326,315,324,315,325,320,330,320,341,317,341,323,341,324,344,325,347,323,353,324,356,326,358,322,357,315,364,318,369,322,371,318,369,314,365,311,365,308,360,308,358,305,353,303,354,299,358,298,361,299,364,295,370,295,371,291,375,292,377,289" href="jharkhand.aspx" title="jharkhand" /> <area shape="poly" alt="bihar" coords="351,243,349,242,349,239,344,240,341,240,339,238,335,237,332,236,332,230,327,230,324,228,319,229,328,244,320,246,325,249,322,251,323,254,331,259,322,262,312,270,312,275,315,280,314,281,326,280,329,284,336,282,340,283,349,279,351,276,356,276,360,279,361,282,364,282,364,279,372,278,374,269,380,264,383,264,385,261,387,261,387,258,383,253,390,246,389,243,386,245,374,245,369,244,366,245,359,242,351,244" href="bihar.aspx" title="bihar" /> <area shape="poly" alt="west bengal" coords="401,325,405,330,409,327,407,315,404,303,404,300,401,300,401,295,398,293,398,290,400,290,400,282,393,280,389,277,389,273,393,271,395,266,402,265,400,261,396,261,391,255,388,255,388,251,392,247,394,243,398,246,401,246,403,244,407,250,411,250,413,246,416,244,415,237,404,236,400,234,397,230,387,232,389,236,389,243,390,246,383,253,387,258,387,261,385,261,383,264,385,267,385,282,377,289,375,292,371,291,370,295,364,295,361,299,358,298,354,299,353,303,358,305,360,308,364,308,365,308,365,312,364,311,369,314,371,318,369,321,369,321,383,331,387,328,390,326,394,326,396,330,399,328,400,325" href="west bengal.aspx" title="west bengal" /> <area shape="poly" alt="sikkim" coords="386,228,388,218,395,213,399,217,397,224,400,227,398,230,386,233" href="sikkim.aspx" title="sikkim" /> <area shape="poly" alt="meghalaya" coords="462,263,466,261,463,258,462,255,458,253,454,253,455,247,450,247,440,253,435,251,422,251,417,253,418,262,430,264,448,263,451,262,455,263,458,265" href="meghalaya.aspx" title="meghalaya" /> <area shape="poly" alt="tripura" coords="460,280,459,288,454,290,453,294,452,295,451,302,449,302,446,298,446,300,440,289,443,283,451,279,457,276" href="tripura.aspx" title="tripura" /> <area shape="poly" alt="mizoram" coords="465,275,470,276,470,280,476,281,478,291,478,299,474,300,474,309,476,312,472,318,467,316,462,302,460,292,459,288,460,280,464,278" href="mizoram.aspx" title="mizoram" /> <area shape="poly" alt="manipur" coords="490,282,476,281,470,280,469,276,471,274,472,268,476,260,479,259,481,252,489,254,492,252,495,256,494,258,497,259,496,266,492,277" href="manipur.aspx" title="manipur" /> <area shape="poly" alt="nagaland" coords="483,248,485,239,494,230,501,225,502,232,500,234,501,240,501,247,499,253,495,256,492,252,488,254,481,252,479,260,476,260,476,257,473,254,480,248" href="nagaland.aspx" title="nagaland" /> <area shape="poly" alt="asom" coords="475,229,468,230,462,229,454,232,451,232,440,234,432,234,432,235,424,233,420,236,415,236,416,244,415,245,416,248,418,254,417,252,418,253,422,251,435,251,440,253,450,247,455,247,454,253,458,253,462,255,463,258,466,260,465,262,460,264,460,267,458,268,457,276,460,280,464,278,465,275,470,276,471,273,472,268,476,260,476,257,473,254,480,248,483,248,485,239,491,233,494,230,501,225,503,225,506,221,514,219,514,216,511,216,510,213,510,210,512,207,510,206,504,209,489,216,486,216,481,223,478,228,474,229" href="assam.aspx" title="asom" /> <area shape="poly" alt="arunachal pradeh" coords="523,216,522,218,515,220,505,231,502,232,501,226,503,225,507,221,514,218,514,216,510,215,510,210,512,207,512,207,510,206,489,216,486,216,481,223,478,228,470,230,462,229,454,232,448,232,452,229,451,223,450,222,443,220,443,215,448,217,453,214,456,216,460,212,459,209,469,204,469,199,479,197,481,191,489,185,492,188,501,189,502,184,510,180,516,183,512,187,514,190,519,186,520,192,516,198,518,199,523,197,534,200,533,203,535,204,528,210,529,215,533,220,531,220,529,219,526,216" href="arunachal pradesh.aspx" title="arunachal pradeh" /> <area shape="poly" alt="telangana" coords="216,430,212,426,215,424,216,416,214,414,218,408,215,407,215,404,218,402,217,393,217,390,218,391,223,384,222,381,223,377,228,376,230,367,236,367,240,371,240,370,245,370,250,373,252,371,253,370,257,372,258,377,256,379,258,386,262,387,264,389,266,387,270,389,274,396,277,402,282,403,282,401,286,401,288,400,288,405,286,406,285,410,275,415,272,418,268,417,266,419,268,422,267,423,261,419,259,424,248,426,244,432,238,435,233,436,226,439,219,439,215,436,216,430" href="telangana.aspx" title="telangana" /> <area shape="default" nohref="nohref" alt="" /> </map> my .cs code is:
using system; using system.collections; using system.configuration; using system.data; using system.linq; using system.web; using system.web.security; using system.web.ui; using system.web.ui.htmlcontrols; using system.web.ui.webcontrols; using system.web.ui.webcontrols.webparts; using system.xml.linq; using system.data.sqlclient; using system.io; public partial class default2 : system.web.ui.page { protected void page_load(object sender, eventargs e) { } public datetime texttodate(string strdate) { return datetime.parseexact(strdate, "dd/mm/yyyy", system.globalization.cultureinfo.currentculture); } protected void generate_click(object sender, eventargs e) { sqlconnection con = new sqlconnection(configurationmanager.connectionstrings["db"].connectionstring); sqlcommand cmd = new sqlcommand(); sqldataadapter da = new sqldataadapter(); datatable dt = new datatable(); //da = new sqldataadapter("select state sr @fromdate='" + texttodate(txtfromdate.text.tostring()).tostring("mm/dd/yyyy") + "',@todate='" + texttodate(txttodate.text.tostring()).tostring("mm/dd/yyyy") + "' ", con); da = new sqldataadapter("select state sr", con); dataset ds = new dataset(); da.fill(ds); ddlstate.datasource = ds; ddlstate.datavaluefield = "state"; ddlstate.datatextfield = "state"; ddlstate.databind(); cmd.dispose(); con.dispose(); con.close(); } protected void button1_click(object sender, eventargs e) { sqlconnection con1 = new sqlconnection(configurationmanager.connectionstrings["db"].connectionstring); sqlcommand cmd1 = new sqlcommand(); sqldataadapter da1 = new sqldataadapter(); datatable dt1 = new datatable(); da1 = new sqldataadapter("select [cst case id], [cst case subtype], [state name] sr ", con1); dataset ds1 = new dataset(); da1.fill(ds1); grdvw.datasource = ds1; grdvw.databind(); cmd1.dispose(); con1.dispose(); } } - i want show sr data on map of india.. don't know how call data sql map page.
- how call sql server data onclick event of map region?
- showing data on map colour category of 5 type highest lowest category.
want 2 show type of data on image calling sql server 2008 list item
how should fill colour on calling data of sql server 2008.
i found article changing article based on java. don't know java on complex level below code. can 1 convert java code on c# , asp.net
ex. 1-1000 population have show red colour. 1000-5000 population have show blue colour.
i'm using code this.but not displaying different colours based on range of population
var mapdata = { "af": 1000, "al": 5000, "dz": 20000, ... }; try{ $('#id').vectormap( { map : 'world_mill_en', series : { regions : [ { initial : { fill : 'white', "fill-opacity" : 1, stroke : 'none', "stroke-width" : 0, "stroke-opacity" : 1 }, hover : { "fill-opacity" : 0.8 }, selected : { fill : 'yellow' }, selectedhover : {}, values : mapdata, scale : [ '#c8eeff', '#0071a4' ], normalizefunction : 'polynomial' } ] }, onregionlabelshow : function(e, el, code) { el.html(el.html()+' (population - '+mapdata[code]+')'); } }); } catch(err){ alert(err); } and 1 given answer article. answer below: create json count , color codes according regions , colors.
var colordata = { "1" : "#c8eeff", "2" : "#0071a4", "3" : "#c8eeff", "4" : "#0071a4", "5" : "#c8eeff", "6" : "#0071a4" } and pass json scale : colordata.
please suggest converting code asp.net. in advance
this not easy using map tag because not support coloring hotspots (the clickable areas). can try plugin: http://www.outsharked.com/imagemapster/ looks promising. allows color hotspots , highlighting , coloring.
other ideas displaying map:
- recommended: tile-based maps, leaflet , mapbox. example: http://leafletjs.com/examples/choropleth.html
- svg. here free svg maps of india: https://commons.wikimedia.org/wiki/category:svg_maps_of_india copied part of 1 simple proof of concept showing how display data clicking on svg paths: http://jsfiddle.net/d4hrbu8p/
- html canvas. (not recommended)
for getting data sql server: looks binding gridview display raw data. - must associate records grid specific state's shape object. if keep using map tag first must assign id attributes each of area elements. use javascript (and above plugin) associate each data point state shape.
here simple proof of concept. map image linked in question did not match map dimensions, faked it.
click show code snippet scroll down , click run code snippet view it. click around map. defined data few states, should idea.
$("area[shape='poly']").on("click", function() { var statename = $(this).prop("alt"); var displaytext = statename; var $staterow = $("#data tbody tr").filter(function() { return $(this).data("state") === statename; }); if ($staterow && $staterow.length) { // found data; display // code proof of concept only; better use json data, or cleaner screenscraping table var cancercases = $staterow.children(':nth-child(2)').text(); var aidscases = $staterow.children(':nth-child(3)').text(); var sarscases = $staterow.children(':nth-child(4)').text(); displaytext += '\ncancer cases: ' + cancercases + '\naids cases: ' + aidscases + '\nsars cases: ' + sarscases; } else { displaytext += '\nno data defined state'; } alert(displaytext); return false; // temporarily disabled navigation... stuff here if needed });img { height: 600px; /* img did not match map; hack show proof of concept, not accurate dimensions */ } td, th { padding: 6px 12px; } th { background-color: #ccc; }<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <img src='http://i.stack.imgur.com/hbjui.jpg' usemap='latitude-and-longitude-map-of-india' /> <map id="latitude-and-longitude-map-of-india" name="latitude-and-longitude-map-of-india"> <area shape="poly" alt="jammu & kashmir" coords="184,143,177,138,171,139,171,134,156,127,153,101,163,95,164,89,159,87,160,82,151,78,150,74,142,74,144,67,151,60,162,59,160,55,166,58,172,53,176,54,177,55,183,53,193,65,204,72,206,77,215,80,215,84,226,82,236,76,241,76,243,72,246,76,254,76,259,80,257,97,252,98,251,100,248,101,249,107,246,110,241,109,239,112,241,116,240,119,240,123,246,125,251,136,240,140,237,139,237,136,230,138,229,134,226,137,219,129,213,133,205,127,198,127,191,132,192,135,188,141" href="jammu.aspx" title="jammu & kashmir" /> <area shape="poly" alt="himachal pradesh" coords="202,165,203,161,198,159,197,160,194,156,192,148,188,146,188,141,192,135,191,133,197,127,205,127,213,134,218,129,226,136,230,134,231,138,236,149,236,154,239,162,227,162,222,166,221,177,212,176,210,170,205,167" href="himachal pradesh.aspx" title="himachal pradesh" /> <area shape="poly" alt="punjab" coords="156,183,159,181,159,175,171,164,171,153,172,148,181,144,183,142,188,142,188,146,192,147,193,154,197,160,199,159,203,161,202,165,207,168,207,176,201,180,196,183,195,189,183,189,181,190,176,184,168,185" href="punjab.aspx" title="punjab" /> <area shape="poly" alt="haryana" coords="187,212,183,201,182,197,171,196,169,185,176,184,180,190,183,189,194,189,196,183,207,177,207,168,211,172,212,176,218,177,213,183,211,191,212,203,212,204,206,207,206,211,211,213,215,211,217,217,216,222,207,226,207,219,206,216,202,220,197,218,194,224,191,221,193,214" href="haryana.aspx" title="haryana" /> <area shape="poly" alt="delhi" coords="213,208,212,203,205,208,206,211,211,213,215,211" href="delhi.aspx" title="delhi" /> <area shape="poly" alt="uttrakhand" coords="253,166,248,167,244,159,241,157,238,162,228,162,221,166,221,177,223,180,221,183,220,189,225,190,227,189,231,185,234,193,238,194,237,198,249,205,257,205,260,198,261,194,262,187,270,181,271,178,259,174,258,170" href="uttrakhand.aspx" title="uttrakhand" /> <area shape="poly" alt="uttar pradesh" coords="228,241,220,240,215,243,215,240,220,238,217,237,218,232,211,225,217,221,217,215,214,210,211,204,211,190,214,180,220,176,223,180,221,183,220,189,225,190,228,188,231,185,234,193,238,194,237,198,249,205,257,205,263,209,267,208,279,216,286,222,290,222,299,225,302,229,310,231,313,228,319,229,328,244,320,246,325,249,322,251,323,254,331,259,322,262,312,270,312,275,315,280,313,283,312,290,309,294,302,292,302,288,302,280,296,280,293,278,288,276,287,273,281,272,278,272,276,275,271,274,270,273,263,273,261,267,253,272,246,270,243,272,239,269,237,267,232,269,238,281,240,284,238,288,233,286,230,286,228,278,228,275,231,272,230,268,234,265,237,263,238,258,243,250,239,245,235,243,229,242" href="uttar pradesh.aspx" title="uttar pradesh" /> <area shape="poly" alt="rajasthan" coords="112,278,104,264,105,260,98,258,96,255,96,252,98,244,90,242,87,239,87,234,96,224,101,217,107,219,108,223,111,224,116,222,124,221,132,211,133,206,142,201,144,200,150,189,150,185,155,183,169,185,171,195,171,196,182,197,187,212,193,214,191,221,194,224,197,218,202,220,206,216,207,220,207,226,211,224,211,225,218,232,217,237,220,238,215,240,215,243,221,240,227,241,225,243,208,254,202,259,200,262,203,268,211,268,214,267,214,273,205,274,206,279,210,280,208,284,205,284,206,291,201,288,195,288,188,295,183,294,185,291,188,291,187,284,189,283,188,279,179,280,180,274,179,273,175,277,173,277,171,282,172,285,171,287,173,287,173,297,167,302,170,306,164,308,152,299,148,295,149,290,144,288,146,284,144,281,141,284,126,278,111,278" href="rajasthan.aspx" title="rajasthan" /> <area shape="poly" alt="madhya pradesh" coords="160,328,160,323,159,323,160,318,164,315,165,311,164,308,170,306,167,302,173,297,173,288,171,287,172,284,171,282,173,277,175,277,179,273,180,274,179,280,182,280,188,279,189,283,187,284,188,291,185,291,183,294,187,295,188,295,195,288,201,288,206,291,205,284,208,284,210,280,206,279,205,274,214,273,214,267,211,268,204,268,200,262,203,258,208,254,223,244,227,241,230,242,236,243,239,245,243,250,238,258,237,263,230,268,231,271,228,275,228,280,230,286,233,286,238,288,240,284,232,269,237,267,243,272,246,270,253,272,261,267,263,273,269,273,276,275,278,272,285,272,288,274,288,276,296,280,302,280,302,292,299,296,284,295,284,301,290,300,294,305,293,308,290,309,283,319,277,320,271,330,270,339,267,340,261,334,256,336,247,333,238,336,233,337,228,336,223,339,217,338,216,332,209,333,204,336,202,342,196,345,192,338,178,338,173,334,166,333,161,336,156,335,156,330" href="madhya pradesh.aspx" title="madhya pradesh" /> <area shape="poly" alt="gujarat" coords="125,338,109,348,99,346,79,327,84,325,87,325,87,324,77,324,74,318,75,316,80,320,95,315,101,307,101,305,98,308,86,311,70,304,66,294,68,294,73,291,71,291,64,294,63,290,73,288,73,284,88,284,90,286,94,287,98,283,102,283,104,286,107,286,111,283,111,278,126,278,141,284,144,281,146,284,144,288,149,290,148,295,157,303,164,308,165,311,164,315,160,318,159,323,160,323,160,328,156,330,156,335,160,336,159,338,153,342,156,347,156,351,151,352,150,350,148,352,147,360,144,360,142,357,136,359,136,356,140,351,139,348,137,341,135,338,135,336,141,332,134,332,137,327,135,325,137,323,129,321,128,327,125,328,126,330,128,331,129,334" href="gujarat.aspx" title="gujarat" /> <area shape="poly" alt="dadar & nagar haveli" coords="140,361,139,358,141,357,143,358,143,360" href="http://www.mapsofindia.com/lat_long/dadraandnagarhaveli/" title="dadar & nagar haveli" /> <area shape="poly" alt="maharashtra" coords="147,433,144,422,141,401,137,385,137,373,134,364,136,359,139,359,140,361,144,360,146,360,147,360,148,352,150,350,151,352,156,351,156,347,153,342,160,338,160,336,161,335,166,333,168,334,173,334,178,338,192,338,196,345,202,342,204,336,209,333,216,332,217,338,223,339,228,336,234,337,242,335,247,333,255,336,261,334,267,341,264,345,268,351,267,358,265,360,267,362,266,366,273,371,272,376,267,373,263,380,263,387,258,386,256,380,258,377,257,372,253,370,250,373,245,370,240,370,235,367,230,367,228,376,223,377,222,381,223,384,218,390,217,394,214,394,212,391,210,396,206,397,203,402,197,405,196,411,183,408,182,411,185,413,184,418,179,418,175,419,172,417,171,420,167,424,162,423,161,425,164,430,164,433,160,439,155,440,154,438,150,439" href="maharashtra.aspx" title="maharashtra" /> <area shape="poly" alt="goa" coords="157,454,159,452,161,446,160,439,155,440,153,438,150,439,154,446,156,455" href="goa.aspx" title="goa" /> <area shape="poly" alt="karnataka" coords="169,489,165,470,162,461,157,455,159,452,161,445,160,439,164,433,164,429,161,425,162,423,167,424,171,420,172,417,175,419,178,418,184,418,185,413,182,411,183,408,196,411,197,405,203,402,206,397,210,396,212,391,214,394,217,394,218,402,215,404,215,407,218,408,214,414,216,416,215,424,212,426,216,430,215,436,209,436,208,441,207,446,209,447,209,451,204,452,204,459,205,464,206,469,209,465,213,465,212,469,207,471,207,474,211,474,213,472,215,475,219,474,223,472,227,473,226,476,231,478,231,482,234,483,235,486,228,492,222,490,217,496,217,499,215,502,215,502,219,502,219,507,215,508,215,510,206,510,203,513,196,511,190,505,186,506,179,500,177,494,169,490" href="karnataka.aspx" title="karnataka" /> <area shape="poly" alt="kerala" coords="209,572,211,568,210,565,210,561,209,558,213,552,214,549,210,548,211,537,210,536,203,537,205,528,201,525,203,522,202,520,198,520,198,517,194,515,194,512,196,511,190,505,186,506,179,500,177,494,169,490,178,509,185,519,191,536,197,550,194,551,201,565" href="kerala.aspx" title="kerala" /> <area shape="circle" alt="pondicherry" coords="257,518,2" href="http://www.mapsofindia.com/lat_long/pondicherry/" title="pondicherry" /> <area shape="poly" alt="tamil nadu" coords="230,558,237,557,242,554,246,555,246,553,241,553,240,550,246,542,248,536,257,536,257,519,256,520,255,519,255,516,256,509,256,504,262,497,266,488,264,479,261,478,255,483,250,483,247,487,238,487,235,490,235,494,231,494,228,492,222,490,217,496,217,499,215,501,215,502,219,502,219,507,215,508,215,510,206,510,203,513,195,511,194,512,194,515,198,517,198,520,202,520,203,522,201,525,205,528,203,537,210,536,211,538,210,548,214,549,212,554,209,558,210,562,210,566,211,568,209,573,215,577,225,570,227,563,229,559" href="tamilnadu.aspx" title="tamil nadu" /> <area shape="poly" alt="andhra pradesh" coords="260,447,265,438,269,436,276,438,282,427,289,428,297,425,300,419,297,416,307,408,317,401,327,392,338,381,339,378,337,377,331,382,331,384,323,382,319,376,315,380,315,383,310,386,309,392,306,390,303,393,300,389,299,394,298,397,292,398,288,400,288,404,286,406,285,410,282,412,275,415,272,418,268,417,266,419,268,422,267,423,261,419,259,424,248,426,244,432,238,435,232,436,227,439,219,439,215,436,209,436,207,446,209,447,209,452,204,452,204,459,206,469,209,465,213,465,212,469,207,471,207,474,211,474,213,472,215,475,220,474,223,472,227,473,226,476,230,478,231,478,231,482,234,483,235,486,228,492,230,494,235,494,235,490,238,487,247,487,250,483,255,483,261,478,264,479,262,472,261,467,262,463,261,456,260,448" href="andhra pradesh.aspx" title="andhra pradesh" /> <area shape="poly" alt="chhattisgarh" coords="298,365,290,361,291,365,295,375,295,383,288,392,284,394,282,401,282,402,277,402,272,394,270,389,266,388,264,389,262,387,263,386,263,380,267,373,272,376,273,371,266,366,267,363,265,360,267,358,268,351,264,345,267,341,266,340,269,339,270,339,271,329,277,320,283,319,290,309,293,308,294,305,290,300,284,301,284,295,299,296,302,292,309,294,313,289,322,299,324,297,325,309,330,309,326,315,325,315,325,320,318,324,315,334,312,342,302,343,297,350,299,361,302,363,302,366" href="chhattisgarh.aspx" title="chhattisgarh" /> <area shape="poly" alt="orissa" coords="362,363,352,366,343,372,337,377,331,382,331,384,324,382,323,382,319,376,315,380,315,383,310,386,309,392,306,390,303,393,300,389,298,397,292,398,285,401,282,401,284,394,289,391,295,383,295,374,291,364,290,361,299,365,302,366,302,362,302,363,299,361,297,350,302,343,312,342,318,324,325,320,328,320,333,319,339,318,341,317,341,324,344,325,347,323,353,324,356,326,358,322,357,315,364,318,370,322,375,325,383,331,373,335,372,338,375,350,369,355,364,360,361,361" href="orissa.aspx" title="orissa" /> <area shape="poly" alt="jharkhand" coords="381,286,385,282,385,274,385,267,383,264,380,264,374,269,372,278,364,279,364,282,361,282,360,279,356,276,351,276,349,279,343,282,340,283,336,282,329,284,326,280,321,280,314,281,313,285,313,289,322,299,324,297,325,309,330,309,326,315,324,315,325,320,330,320,341,317,341,323,341,324,344,325,347,323,353,324,356,326,358,322,357,315,364,318,369,322,371,318,369,314,365,311,365,308,360,308,358,305,353,303,354,299,358,298,361,299,364,295,370,295,371,291,375,292,377,289" href="jharkhand.aspx" title="jharkhand" /> <area shape="poly" alt="bihar" coords="351,243,349,242,349,239,344,240,341,240,339,238,335,237,332,236,332,230,327,230,324,228,319,229,328,244,320,246,325,249,322,251,323,254,331,259,322,262,312,270,312,275,315,280,314,281,326,280,329,284,336,282,340,283,349,279,351,276,356,276,360,279,361,282,364,282,364,279,372,278,374,269,380,264,383,264,385,261,387,261,387,258,383,253,390,246,389,243,386,245,374,245,369,244,366,245,359,242,351,244" href="bihar.aspx" title="bihar" /> <area shape="poly" alt="west bengal" coords="401,325,405,330,409,327,407,315,404,303,404,300,401,300,401,295,398,293,398,290,400,290,400,282,393,280,389,277,389,273,393,271,395,266,402,265,400,261,396,261,391,255,388,255,388,251,392,247,394,243,398,246,401,246,403,244,407,250,411,250,413,246,416,244,415,237,404,236,400,234,397,230,387,232,389,236,389,243,390,246,383,253,387,258,387,261,385,261,383,264,385,267,385,282,377,289,375,292,371,291,370,295,364,295,361,299,358,298,354,299,353,303,358,305,360,308,364,308,365,308,365,312,364,311,369,314,371,318,369,321,369,321,383,331,387,328,390,326,394,326,396,330,399,328,400,325" href="west bengal.aspx" title="west bengal" /> <area shape="poly" alt="sikkim" coords="386,228,388,218,395,213,399,217,397,224,400,227,398,230,386,233" href="sikkim.aspx" title="sikkim" /> <area shape="poly" alt="meghalaya" coords="462,263,466,261,463,258,462,255,458,253,454,253,455,247,450,247,440,253,435,251,422,251,417,253,418,262,430,264,448,263,451,262,455,263,458,265" href="meghalaya.aspx" title="meghalaya" /> <area shape="poly" alt="tripura" coords="460,280,459,288,454,290,453,294,452,295,451,302,449,302,446,298,446,300,440,289,443,283,451,279,457,276" href="tripura.aspx" title="tripura" /> <area shape="poly" alt="mizoram" coords="465,275,470,276,470,280,476,281,478,291,478,299,474,300,474,309,476,312,472,318,467,316,462,302,460,292,459,288,460,280,464,278" href="mizoram.aspx" title="mizoram" /> <area shape="poly" alt="manipur" coords="490,282,476,281,470,280,469,276,471,274,472,268,476,260,479,259,481,252,489,254,492,252,495,256,494,258,497,259,496,266,492,277" href="manipur.aspx" title="manipur" /> <area shape="poly" alt="nagaland" coords="483,248,485,239,494,230,501,225,502,232,500,234,501,240,501,247,499,253,495,256,492,252,488,254,481,252,479,260,476,260,476,257,473,254,480,248" href="nagaland.aspx" title="nagaland" /> <area shape="poly" alt="asom" coords="475,229,468,230,462,229,454,232,451,232,440,234,432,234,432,235,424,233,420,236,415,236,416,244,415,245,416,248,418,254,417,252,418,253,422,251,435,251,440,253,450,247,455,247,454,253,458,253,462,255,463,258,466,260,465,262,460,264,460,267,458,268,457,276,460,280,464,278,465,275,470,276,471,273,472,268,476,260,476,257,473,254,480,248,483,248,485,239,491,233,494,230,501,225,503,225,506,221,514,219,514,216,511,216,510,213,510,210,512,207,510,206,504,209,489,216,486,216,481,223,478,228,474,229" href="assam.aspx" title="asom" /> <area shape="poly" alt="arunachal pradeh" coords="523,216,522,218,515,220,505,231,502,232,501,226,503,225,507,221,514,218,514,216,510,215,510,210,512,207,512,207,510,206,489,216,486,216,481,223,478,228,470,230,462,229,454,232,448,232,452,229,451,223,450,222,443,220,443,215,448,217,453,214,456,216,460,212,459,209,469,204,469,199,479,197,481,191,489,185,492,188,501,189,502,184,510,180,516,183,512,187,514,190,519,186,520,192,516,198,518,199,523,197,534,200,533,203,535,204,528,210,529,215,533,220,531,220,529,219,526,216" href="arunachal pradesh.aspx" title="arunachal pradeh" /> <area shape="poly" alt="telangana" coords="216,430,212,426,215,424,216,416,214,414,218,408,215,407,215,404,218,402,217,393,217,390,218,391,223,384,222,381,223,377,228,376,230,367,236,367,240,371,240,370,245,370,250,373,252,371,253,370,257,372,258,377,256,379,258,386,262,387,264,389,266,387,270,389,274,396,277,402,282,403,282,401,286,401,288,400,288,405,286,406,285,410,275,415,272,418,268,417,266,419,268,422,267,423,261,419,259,424,248,426,244,432,238,435,233,436,226,439,219,439,215,436,216,430" href="telangana.aspx" title="telangana" /> <area shape="default" nohref="nohref" alt="" /> </map> <table id='data'> <thead> <tr> <th>state</th> <th>cancer cases</th> <th>aids cases</th> <th>sars cases</th> </tr> </thead> <tbody> <tr data-state='punjab'> <td>punjab</td> <td>4564554</td> <td>55466</td> <td>23434</td> </tr> <tr data-state='telangana'> <td>telangana</td> <td>43453</td> <td>3422</td> <td>3346</td> </tr> <tr data-state='jharkhand'> <td>jharkhand</td> <td>6234</td> <td>25234</td> <td>665427</td> </tr> <tr data-state='rajasthan'> <td>rajasthan</td> <td>362</td> <td>432</td> <td>7982</td> </tr> <tr data-state='uttar pradesh'> <td>uttar pradesh</td> <td>44300</td> <td>45345</td> <td>24324</td> </tr> </tbody> </table>this complex project, , recommend break steps. first map showing satisfaction, move on getting data sql server. take 1 step @ time.
note: used javascript , jquery this. don't need jquery, makes things easier.
Comments
Post a Comment