Click here to Skip to main content

16,013,642 members

Sign in

Sign in

Email

Password

Forgot your password?

Sign in with

home
articles
quick answersQ&A
discussionsforums
featuresfeatures
communitylounge
help?

Search within:
Articles
Quick Answers
Messages

Use my saved content filters

All Questions All Unanswered FAQ

How to bind countries from database to jvector map?

Please Sign up or sign in to vote.

0.00/5 (No votes)

See more:

How to bind countries from database to jvector map?

Posted 2-Sep-13 2:56am

naveenreddychennam

Comments

Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ) 2-Sep-13 9:59am

What have you tried?

1 solution

Please Sign up or sign in to vote.

Solution 1

Accept Solution Reject Solution

C#

$(function(){
  $.getJSON('/data/us-unemployment.json', function(data){
    var val = 2009;
        statesValues = jvm.values.apply({}, jvm.values(data.states)),
        metroPopValues = Array.prototype.concat.apply([], jvm.values(data.metro.population)),
        metroUnemplValues = Array.prototype.concat.apply([], jvm.values(data.metro.unemployment));

    $('#world-map-gdp').vectorMap({
      map: 'us_aea_en',
      markers: data.metro.coords,
      series: {
        markers: [{
          attribute: 'fill',
          scale: ['#FEE5D9', '#A50F15'],
          values: data.metro.unemployment[val],
          min: jvm.min(metroUnemplValues),
          max: jvm.max(metroUnemplValues)
        },{
          attribute: 'r',
          scale: [5, 20],
          values: data.metro.population[val],
          min: jvm.min(metroPopValues),
          max: jvm.max(metroPopValues)
        }],
        regions: [{
          scale: ['#DEEBF7', '#08519C'],
          attribute: 'fill',
          values: data.states[val],
          min: jvm.min(statesValues),
          max: jvm.max(statesValues)
        }]
      },
      onMarkerLabelShow: function(event, label, index){
        label.html(
          ''+data.metro.names[index]+''+
          'Population: '+data.metro.population[val][index]+''+
          'Unemployment rate: '+data.metro.unemployment[val][index]+'%'
        );
      },
      onRegionLabelShow: function(event, label, code){
        label.html(
          ''+label.html()+''+
          'Unemployment rate: '+data.states[val][code]+'%'
        );
      }
    });

    var mapObject = $('#world-map-gdp').vectorMap('get', 'mapObject');

    $("#slider").slider({
      value: val,
      min: 2005,
      max: 2009,
      step: 1,
      slide: function( event, ui ) {
        val = ui.value;
        mapObject.series.regions[0].setValues(data.states[ui.value]);
        mapObject.series.markers[0].setValues(data.metro.unemployment[ui.value]);
        mapObject.series.markers[1].setValues(data.metro.population[ui.value]);
      }
    });
  });
});

Share this answer

Posted 2-Sep-13 4:39am

Comments

naveenreddychennam 3-Sep-13 5:11am

ID int
Country varchar(50)
RegistrationNO int

I have a table like above and iam getting values from databse(sqlserver) but how can i send the countryname and registrationno from .Cs file to JavaScript. and that values should be accepted through json format. for binding Jvectormap

liveoffedge 3-Sep-13 5:37am

just create a data service which returns the data from the database and put the url(path) of that service in place of '/data/us-unemployment.json'.

naveenreddychennam 3-Sep-13 5:47am

Give me Your mail Id i will send the code ?

liveoffedge 3-Sep-13 5:53am

viveksharma2087@gmail.com

Member 13488500 30-Oct-17 10:48am

hey please send me the code
on brijeshmavani01@gmail.com

liveoffedge 30-Oct-17 10:58am

don't have it now.

liveoffedge 30-Oct-17 11:00am

you can refer the above solution.

Member 13488500 31-Oct-17 3:00am

Okay but I want to display the count of visitors per country vise, you have the idea how to display?
I saw your above solution but dont no how to implement it?

naveenreddychennam 3-Sep-13 5:51am

ASPX Page:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>jVectorMap demo</title>
<link rel="stylesheet" media="all" href ="Styles/jquery-jvectormap.css"/>
<script src="assets/jquery-1.8.2.js"></script>
<script src="assets/jquery-jvectormap.js"></script>
<script src="assets/jquery-mousewheel.js"></script>

<script src="assets/jvectormap.js"></script>

<script src="assets/abstract-element.js"></script>
<script src="assets/abstract-canvas-element.js"></script>
<script src="assets/abstract-shape-element.js"></script>

<script src="assets/svg-element.js"></script>
<script src="assets/svg-group-element.js"></script>
<script src="assets/svg-canvas-element.js"></script>
<script src="assets/svg-shape-element.js"></script>
<script src="assets/svg-path-element.js"></script>
<script src="assets/svg-circle-element.js"></script>

<script src="assets/vml-element.js"></script>
<script src="assets/vml-group-element.js"></script>
<script src="assets/vml-canvas-element.js"></script>
<script src="assets/vml-shape-element.js"></script>
<script src="assets/vml-path-element.js"></script>
<script src="assets/vml-circle-element.js"></script>

<script src="assets/vector-canvas.js"></script>
<script src="assets/simple-scale.js"></script>
<script src="assets/numeric-scale.js"></script>
<script src="assets/ordinal-scale.js"></script>
<script src="assets/color-scale.js"></script>
<script src="assets/data-series.js"></script>
<script src="assets/proj.js"></script>
<script src="assets/world-map.js"></script>

<script src="assets/jquery-jvectormap-world-mill-en.js"></script>
<script>
jQuery.noConflict();
jQuery(function () {
var $ = jQuery;

$('#map1').vectorMap({
map: 'world_mill_en',
focusOn: {
x: 0.5,
y: 0.5,
scale: 2
},
series: {
regions: [{
scale: ['#C8EEFF', '#0071A4'],
normalizeFunction: 'polynomial',
values: {
"AF": 100,
"AL": 200,
"DZ": 50,
"IN": 500,
}
}]
}
});
})
</script>

</head>
<body>
<form id="form1" runat="server">
<div id="map1" style="width: 600px; height: 400px"></div>
</form>
</body>
</html>

Aspx.Cs:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Services;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data;
using System.Data.SqlClient;

public partial class _Default : System.Web.UI.Page
{
SqlConnection con = new SqlConnection("Data Source=x001;Initial Catalog=Test;User ID=sa;Password=x@123");
protected void Page_Load(object sender, EventArgs e)
{

}
[WebMethod]
public List<datarow> GetCountries()
{
SqlCommand cmd = new SqlCommand("Select * from tbl_Countries", con);
SqlDataAdapter da = new SqlDataAdapter(cmd);
DataSet ds = new DataSet();
DataTable dt = new DataTable();
da.Fill(dt);
List<datarow> list = dt.AsEnumerable().ToList();
return list;
}

}

liveoffedge 3-Sep-13 7:52am

check your mail

liveoffedge 13-Sep-13 3:35am

kindly rate my solution

Ackoo 22-May-14 7:07am

How i can take this values: {
"AF": 100,
"AL": 200,
"DZ": 50,
"IN": 500,
} from SqlDatabase ?

Add a Solution

Add your solution here

Plain Text

ASM

ASP

ASP.NET

BASIC

BAT

C#

C++

COBOL

CoffeeScript

CSS

Dart

dbase

F#

FORTRAN

HTML

Java

Javascript

Kotlin

Lua

MIDL

MSIL

ObjectiveC

Pascal

PERL

PHP

PowerShell

Python

Razor

Ruby

Scala

Shell

SLN

SQL

Swift

T4

Terminal

TypeScript

VB

VBScript

XML

YAML

OKPaste as

Strip HTML

Encode HTML

Paste as-is

Code block

Quoted Text

Best guess

To display as

The content must be between 30 and 50000 characters.

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

Submit your solution

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Top Experts

Last 24hrs

This month

Pete O'Hanlon	25
Dave Kreskowiak	10
OriginalGriff	10
Richard MacCutchan	5
sai chinnu	-6

OriginalGriff	814
Pete O'Hanlon	640
Dave Kreskowiak	431
Richard Deeming	400
merano99	265

Related Questions

Binding geofencing data on the Google map in angular 16

How to fetch the data like countries from the database and displayed on the google Map?

Accessing a DropDownList inside a GridView Dropdownlist can bind database ,country,state,city

problem in country,state,city binding to combobox using window form

Download map at different zoom levels image fragment(suqare) for a scpecific country in image format (jpg) with lat long?

Country name not show on Google geo chart

bind country and city in one dropdown

salesforce country to sql server database using asp.net

How(fast way) to devide country map into suqare(4 points at fixed equal distance) and get 8 lat long at different zoom levels

Getting Selected Country From Google Maps

Advertise
Privacy
Cookies
Terms of Use
Last Updated 2 Sep 2013

Layout: fixed | fluid

Copyright © CodeProject, 1999-2024
All Rights Reserved.

Web03 2.8:2024-07-22:1

CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900