Mixing
Jquery Mapael: How can I use HTML table data to replace this hard coded example?
Here is the hard coded code that works (only 2 states):
var myAreas = ;
myAreas = {
"VA": {
value: "6.3",
tooltip: { content: "Virginia freq : 7.2" }
},
"NC": {
value: "5.7",
tooltip: { content: "North Carolina freq : 6.7" }
}
};
$(".mapcontainer").mapael({
map: {
name: "usa_states"
},
areas: myAreas
});
I'm trying to use the results in my HTML table but can't seem to get it into an acceptable format. This is what I have been trying:
var data = ;
var rows = $('#tblStateFreq').find('tr');
for (var i = 0; i < rows.length; i++) {
var row = $(rows[i]);
var state = row.find('td').eq(0).text();
var freq = row.find('td').eq(1).text();
data.push({
state,
value: freq,
tooltip: state + " " + freq;
});
}
$(".mapcontainer").mapael({
map: {
name: "usa_states"
},
areas: data
});
the data array has all the states with the correct data but it's in the form:
0:
state: "AK"
tooltip: {content: "AK 7.0"}
value: "7.0"
I've used this table data approach successfully with flot for line and column charts but the map seems to be trickier. Can anyone help. Thanks
jquery mapael
asked Jan 2 at 1:36
Jim BransonJim Branson
11
add a comment |
Here is the hard coded code that works (only 2 states):
var myAreas = ;
myAreas = {
"VA": {
value: "6.3",
tooltip: { content: "Virginia freq : 7.2" }
},
"NC": {
value: "5.7",
tooltip: { content: "North Carolina freq : 6.7" }
}
};
$(".mapcontainer").mapael({
map: {
name: "usa_states"
},
areas: myAreas
});
I'm trying to use the results in my HTML table but can't seem to get it into an acceptable format. This is what I have been trying:
var data = ;
var rows = $('#tblStateFreq').find('tr');
for (var i = 0; i < rows.length; i++) {
var row = $(rows[i]);
var state = row.find('td').eq(0).text();
var freq = row.find('td').eq(1).text();
data.push({
state,
value: freq,
tooltip: state + " " + freq;
});
}
$(".mapcontainer").mapael({
map: {
name: "usa_states"
},
areas: data
});
the data array has all the states with the correct data but it's in the form:
0:
state: "AK"
tooltip: {content: "AK 7.0"}
value: "7.0"
I've used this table data approach successfully with flot for line and column charts but the map seems to be trickier. Can anyone help. Thanks
jquery mapael
asked Jan 2 at 1:36
Jim BransonJim Branson
11
add a comment |
Here is the hard coded code that works (only 2 states):
var myAreas = ;
myAreas = {
"VA": {
value: "6.3",
tooltip: { content: "Virginia freq : 7.2" }
},
"NC": {
value: "5.7",
tooltip: { content: "North Carolina freq : 6.7" }
}
};
$(".mapcontainer").mapael({
map: {
name: "usa_states"
},
areas: myAreas
});
I'm trying to use the results in my HTML table but can't seem to get it into an acceptable format. This is what I have been trying:
var data = ;
var rows = $('#tblStateFreq').find('tr');
for (var i = 0; i < rows.length; i++) {
var row = $(rows[i]);
var state = row.find('td').eq(0).text();
var freq = row.find('td').eq(1).text();
data.push({
state,
value: freq,
tooltip: state + " " + freq;
});
}
$(".mapcontainer").mapael({
map: {
name: "usa_states"
},
areas: data
});
the data array has all the states with the correct data but it's in the form:
0:
state: "AK"
tooltip: {content: "AK 7.0"}
value: "7.0"
I've used this table data approach successfully with flot for line and column charts but the map seems to be trickier. Can anyone help. Thanks
jquery mapael
asked Jan 2 at 1:36
Jim BransonJim Branson
11
Here is the hard coded code that works (only 2 states):
var myAreas = ;
myAreas = {
"VA": {
value: "6.3",
tooltip: { content: "Virginia freq : 7.2" }
},
"NC": {
value: "5.7",
tooltip: { content: "North Carolina freq : 6.7" }
}
};
$(".mapcontainer").mapael({
map: {
name: "usa_states"
},
areas: myAreas
});
I'm trying to use the results in my HTML table but can't seem to get it into an acceptable format. This is what I have been trying:
var data = ;
var rows = $('#tblStateFreq').find('tr');
for (var i = 0; i < rows.length; i++) {
var row = $(rows[i]);
var state = row.find('td').eq(0).text();
var freq = row.find('td').eq(1).text();
data.push({
state,
value: freq,
tooltip: state + " " + freq;
});
}
$(".mapcontainer").mapael({
map: {
name: "usa_states"
},
areas: data
});
the data array has all the states with the correct data but it's in the form:
0:
state: "AK"
tooltip: {content: "AK 7.0"}
value: "7.0"
I've used this table data approach successfully with flot for line and column charts but the map seems to be trickier. Can anyone help. Thanks
jquery mapael
jquery mapael
asked Jan 2 at 1:36
Jim BransonJim Branson
11
asked Jan 2 at 1:36
Jim BransonJim Branson
11
asked Jan 2 at 1:36
Jim BransonJim Branson
11
asked Jan 2 at 1:36
Jim BransonJim Branson
11
asked Jan 2 at 1:36
Jim BransonJim Branson
11
11
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
I found what I was looking for here:
Is it possible to add dynamically named properties to JavaScript object?
although the hard coded data, myAreas is originally defined as an array it is redefined as an object, myAreas{...} and properties (states) are added.
In my example I was trying to add to my array data using push which worked, but is not what the mapeal plugin wants as the areas argument.
answered Jan 23 at 22:11
user10958351user10958351
1
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54000309%2fjquery-mapael-how-can-i-use-html-table-data-to-replace-this-hard-coded-example%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
I found what I was looking for here:
Is it possible to add dynamically named properties to JavaScript object?
although the hard coded data, myAreas is originally defined as an array it is redefined as an object, myAreas{...} and properties (states) are added.
In my example I was trying to add to my array data using push which worked, but is not what the mapeal plugin wants as the areas argument.
answered Jan 23 at 22:11
user10958351user10958351
1
add a comment |
I found what I was looking for here:
Is it possible to add dynamically named properties to JavaScript object?
although the hard coded data, myAreas is originally defined as an array it is redefined as an object, myAreas{...} and properties (states) are added.
In my example I was trying to add to my array data using push which worked, but is not what the mapeal plugin wants as the areas argument.
answered Jan 23 at 22:11
user10958351user10958351
1
add a comment |
I found what I was looking for here:
Is it possible to add dynamically named properties to JavaScript object?
although the hard coded data, myAreas is originally defined as an array it is redefined as an object, myAreas{...} and properties (states) are added.
In my example I was trying to add to my array data using push which worked, but is not what the mapeal plugin wants as the areas argument.
answered Jan 23 at 22:11
user10958351user10958351
1
I found what I was looking for here:
Is it possible to add dynamically named properties to JavaScript object?
although the hard coded data, myAreas is originally defined as an array it is redefined as an object, myAreas{...} and properties (states) are added.
In my example I was trying to add to my array data using push which worked, but is not what the mapeal plugin wants as the areas argument.
answered Jan 23 at 22:11
user10958351user10958351
1
answered Jan 23 at 22:11
user10958351user10958351
1
answered Jan 23 at 22:11
user10958351user10958351
1
answered Jan 23 at 22:11
user10958351user10958351
1
1
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54000309%2fjquery-mapael-how-can-i-use-html-table-data-to-replace-this-hard-coded-example%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
