Description:-
in this article we will create world map using fusionchart. here i have created simple world map using JSFiddle. using jquery we can craete it and display world map in html control. here is the demo example to create world map.
Download Files:- Fusionchart.js, Fusioncharts.maps.js, Fusioncharts.theme.fint.js, Fusioncharts.world.js
Default.aspx:-
<html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title></title> <script src="JS/fusioncharts.js"type="text/javascript"></script> <script src="JS/fusioncharts.maps.js"type="text/javascript"></script> <script src="JS/fusioncharts.theme.fint.js"type="text/javascript"></script> <script src="JS/fusioncharts.world.js"type="text/javascript"></script> </head> <body> <form id="form1" runat="server"> <div> <asp:Literal ID="lt" runat="server"></asp:Literal> <div id="chart-container">Charts will render here</div> </div> </form> </body> </html>
Default.aspx.cs:-
protected void Page_Load(object sender, EventArgs e)
{
StringBuilder str = new StringBuilder();
try
{
str.Append(@" <script type='text/javascript'>
FusionCharts.ready(function () {
varworldMap = new FusionCharts({
type: 'world',
renderAt: 'chart-container',
width: '600',
height: '400',
dataFormat: 'json',
dataSource: {" + Environment.NewLine);
str.Append("\"chart\":{ " + Environment.NewLine);
str.Append("\"theme\": \"fint\"" + Environment.NewLine);
str.Append("}" + Environment.NewLine);
str.Append("}" + Environment.NewLine);
str.Append("}).render();" + Environment.NewLine);
str.Append("});" + Environment.NewLine);
str.Append("</script>");
lt.Text = str.ToString();
}
catch (Exception ex)
{ }
}
2 comments
commentsx-)
ReplyI appreciate you taking the time and effort to share your knowledge. This material proved to be really efficient and beneficial to me. Thank you very much for providing this information. Continue to write your blog.
ReplyData Engineering Services
AI & ML Services
Data Analytics Services
Data Modernization Services
Thanks for comments.....