We Keep Coding

Why is my function to hide image not working properly?

My code was working properly until I decided to make a small change, and I guess I accidentally deleted something because my console is saying hide image is not defined at decrement when I already defined hide image. I can't find my error everything worked fine :'(. I went over my hide image function and it seems like everything is correct. When I load it on html the error seems to appear when a user does not make a selection is runs the function decrement, so when time reaches zero it displays an image with the correct answer, and it used to clear it out and display the next question with the available choices, but now it just stays on the if time = 0 screen and doesn't move on to the next question.
$(document).ready(function () {
//set up object-array for questions
var trivia = [
{
question: "On Drake & Josh, what's Megan favorite phrase?'",
choices: ["Boobz", "Idiots", "Oh, really?", "Damn! Where are my
apples?"],
rightChoice: 0,
image: "assets/images/boobs.gif",
background: "<img src='assets/images/90back.jpg'>"
},
{
question: "What color lipstick does Spongebob use when he kisses
Mr. Krabs fake Millionth dollar?",
choices: ["Magenta", "Stardust", "Coral Blue #Oof", "Blorange"],
rightChoice: 2,
image: "assets/images/spongebob-coral-blue.gif",
background: "<img src='assets/images/90cart.jpg'>"
},
{
question: "What thottie accessory was popular in the 90's, that
is currently popular today?",
choices: ["chokers", "bandaids", "airpods", "tidepods"],
rightChoice: 0,
image: "assets/images/chokers.gif",
background: "<img src='assets/images/90back.jpg'>"
},
{
question: "During sleepovers, Mystery Date allowed girls to date
which sexy actor?",
choices: ["Port", "James Franco", "Paul Rudd", "Chris Evans, Mr.
America"],
rightChoice: 3,
image: "assets/images/chris-evans.gif",
background: "<img src='assets/images/90cart.jpg'>"
},
{
question: "What was the SPICIEST band in the 90's?",
choices: ["Madonna", "Hillary Clinton", "BackStreet Boyz", "The
Spice Girls"],
rightChoice: 3,
image: "assets/images/zig-a-zig-ha.gif",
background: "<img src='assets/images/90back.jpg'>"
}
];
var rightAnswer = 0;
var wrongAnswer = 0;
var unansweredCount = 0;
var time = 15;
var intervalId;
var userSelection = "";
var selected = false;
var running = false;
var totalCount = trivia.length;
var chosenOne;
var triviaRand;
var newArray = [];
var placeHolder = [];
//hide resetBtn until called
$("#resetBtn").hide();
//click startBtn button to start game
$("#startBtn").on("click", function () {
$(this).hide();
displayTrivia();
runTime();
for (var i = 0; i < trivia.length; i++) {
placeHolder.push(trivia[i]);
};
})
//time: run
function runTime() {
if (!running) {
intervalId = setInterval(decrement, 1000);
running = true;
}
}
//time--
function decrement() {
$("#timeLeft").html("<h4>👻 Madonna, we're running out of time 👻 "
+ time + " 👀</h4>");
time--;
//stop time if reach 0
if (time === 0) {
unansweredCount++;
stop();
$("#choicesDiv").html("<p>Oh no! You ran out of time 😂. The
correct choice is: " + chosenOne.choices[chosenOne.rightChoice] + "
</p>");
hideimage();
}
}
//time stop
function stop() {
running = false;
clearInterval(intervalId);
}
play question and loop though and display possible answers
function displayTrivia() {
//generate random triviaRand in array
triviaRand = Math.floor(Math.random() * trivia.length);
//console.log(triviaRand);
chosenOne = trivia[triviaRand];
console.log(chosenOne);
$("#questionDiv").html("<h2>" + chosenOne.question + "</h2>");
for (var i = 0; i < chosenOne.choices.length; i++) {
var newUserChoice = $("<div>");
newUserChoice.addClass("answerChoices");
newUserChoice.html(chosenOne.choices[i]);
//assign array position to it so can check rightChoice
newUserChoice.attr("userChoices", i);
$("#choicesDiv").append(newUserChoice);
}
//click function to select rightChoice
$(".answerChoices").click(function () {
//parseInt() function parses a string argument and returns an
integer of the specified radix
//locate array based on userChoice
userSelection = parseInt($(this).attr("userChoices"));
console.log(userSelection);
if (userSelection === chosenOne.rightChoice) {
console.log(chosenOne.choices[chosenOne.rightChoice]);
stop();
selected = true;
rightAnswer++;
userSelection = "";
$("#choicesDiv").html("<p>Damn, boi 🐱‍🐉👌</p>");
hideimage();
console.log(rightAnswer);
} else {
stop();
selected = true;
wrongAnswer++;
userSelection = "";
$("#choicesDiv").html("<p>🤔That is incorrect! The correct
choice is: " + chosenOne.choices[chosenOne.rightChoice] + "</p>");
hideimage();
console.log(wrongAnswer);
}
})
function hideimage() {
$("#choicesDiv").append("<img src=" + chosenOne.image + ">");
newArray.push(chosenOne);
trivia.splice(triviaRand, 1);
var hideimg = setTimeout(function () {
$("#choicesDiv").empty();
time = 15;
//run the score screen if all questions answered
if ((wrongAnswer + rightAnswer + unansweredCount) ===
totalCount) {
//clearbck();
$("#questionDiv").empty();
$("#questionDiv").html("<h3>🧐 Game Over! Let's see
your score 😱: </h3>");
$("#choicesDiv").append("<h4> 🤪 Correct: " +
rightAnswer + "</h4>");
$("#choicesDiv").append("<h4> 🤬 Incorrect: " +
wrongAnswer + "</h4>");
$("#choicesDiv").append("<h4> 🤯 Unanswered: " +
unansweredCount + "</h4>");
$("#resetBtn").show();
rightAnswer = 0;
wrongAnswer = 0;
unansweredCount = 0;
} else {
runTime();
displayTrivia();
}
}, 2000);
}
$("#resetBtn").on("click", function () {
$(this).hide();
$("#choicesDiv").empty();
$("#questionDiv").empty();
for (var i = 0; i < placeHolder.length; i++) {
trivia.push(placeHolder[i]);
}
runTime();
displayTrivia();
})
}
})`

Just as a syntax error correction! You should use single or double quotation in src attribute of img tag in hideimage function:
$("#choicesDiv").append("<img src=' " + chosenOne.image + " '>");

Best way to add delete button in to do list

I'm creating a to do list with vanilla JS. I ideally want to keep my adding, deleting functions separate to keep everything tidy.
My issue is if I create a delete button when I add a to do I don't know how to reference the delete button.
JSFiddle: https://jsfiddle.net/ped1j6kf/11/
Any ideas?
Thanks
HTML
<body>
<!-- Main -->
<div id="main"></div>
<!-- Add -->
<input id="to-do-value" type="text" placeholder="Enter to do">
<button id="add">Add</button>
<script type="text/javascript" src="main.js"></script>
</body>
JS
// To do
var toDo = {
cacheDom: function() {
this.toDo = ['test'];
this.main = document.getElementById('main');
this.add = document.getElementById('add');
this.toDoValue = document.getElementById('to-do-value');
},
init: function() {
this.cacheDom();
this.bindEvents();
this.displayToDos();
},
bindEvents() {
this.add.addEventListener("click", this.addToDo.bind(this));
},
displayToDos: function() {
var html = '<ul>';
for(i=0; i < this.toDo.length; i++) {
html += '<li>' + this.toDo[i] + '</li>' + '<button>delete</button>';
}
html += '</ul>';
this.main.innerHTML = html;
},
addToDo(){
var toDoValue = this.toDoValue.value;
this.toDo.push(toDoValue);
this.displayToDos();
},
deleteToDo() {
console.log("make this delete button work");
}
}
toDo.init();

With some minor changes, you can make it work the way you have it now.
One of the changes would be that you could theoretically have multiple to do items named the same (for some reason), it might simply be easier to store the todo as an object, and save it in your todo list with an identifier, like so:
addToDo( text ){
this.toDo.push({ id: this._id++, text: text});
this.displayToDos();
}
This does require some other minor changes, but it offers the possibility to reference the onClick event directly, like this:
displayToDos: function() {
var html = '<ul>';
for(i=0; i < this.toDo.length; i++) {
html += '<li>' + this.toDo[i].text + '</li>' + '<button onClick="toDo.deleteToDo(' + this.toDo[i].id + ')">delete</button>';
}
html += '</ul>';
this.main.innerHTML = html;
}
You now have both a text that is displayed in the todo list as an Id that can be referenced when you want to delete that data
And then the delete function works like this
deleteToDo( id ) {
for (var i = 0; i < this.toDo.length; i++) {
if (this.toDo[i].id === id) {
// removes 1 item from the array at position i
this.toDo.splice(i, 1);
break;
}
}
this.displayToDos();
}
var toDo = {
_id: 0,
cacheDom: function() {
this.toDo = [];
this.main = document.getElementById('main');
this.add = document.getElementById('add');
this.toDoValue = document.getElementById('to-do-value');
},
init: function() {
// must run first
this.cacheDom();
this.bindEvents();
// now it can also allow for adding
this.addToDo('test');
this.displayToDos();
},
bindEvents() {
this.add.addEventListener("click", () => this.addToDo(this.toDoValue.value));
},
displayToDos: function() {
var html = '<ul>';
for(i=0; i < this.toDo.length; i++) {
html += '<li>' + this.toDo[i].text + '</li>' + '<button onClick="toDo.deleteToDo(' + this.toDo[i].id + ')">delete</button>';
}
html += '</ul>';
this.main.innerHTML = html;
},
addToDo( text ){
var toDoValue = text;
this.toDo.push({ id: this._id++, text: toDoValue});
this.displayToDos();
},
deleteToDo( id ) {
for (var i = 0; i < this.toDo.length; i++) {
if (this.toDo[i].id === id) {
this.toDo.splice(i, 1);
break;
}
}
this.displayToDos();
}
}
toDo.init();
<body>
<!-- Main -->
<div id="main"></div>
<!-- Add -->
<input id="to-do-value" type="text" placeholder="Enter to do">
<button id="add">Add</button>
<script type="text/javascript" src="main.js"></script>
</body>

I am assuming you want to reference the delete button so that if some one clicks it you want to perform a delete operation. Easiest way to do this would be :-
html += '<li>' + this.toDo[i] + '<button onclick="deleteSomething(this)">delete</button></li>';
Please note that the button element now comes under li.
and then in the deleteSomething function you get the parent element and delete it :--
function deleteSomething(el){
val = el.value;
i = this.toDo.indexOf(val);
if (i > -1) {
array.splice(i, 1);
}
el.parentElement.remove();
}

JavaScript - Pagination with JSON

So I have made a kind of pagination with Javascript. First it gets JSON data from the file and puts it into array. Then it renders items to page. I have added there Previous and Next page buttons, but at the moment it works like if you click next page it just clears the div where are all the items and adds new ones, but my question is. How could I do it differently, so it would not clear out the div, because if I have chosen the item already and div is getting cleared, then the item will be unchosen.
Here's JSON javascript:
$.getJSON("/Search.php", function(itemsList){
if(itemsList.items){
for(var i = 0;i < itemsList.items.length; i++){
pruice = itemsList.items[i].price;
prices[itemsList.items[i].name] = pruice;
items[i] = {
name: itemsList.items[i].name,
img: itemsList.items[i].img,
price: itemsList.items[i].price,
color: itemsList.items[i].color
};
}
}
items.sort(function(a, b) {return b.price - a.price;});
OnFinished();
});
Render function
function OnFinished(){
$('#InventoryMe').empty();
var perPage = 30;
function paginate(items, page) {
var start = perPage * page;
return items.slice(start, start + perPage);
}
function renderItems(pageItems){
pageItems.forEach(function(item, index, arr){
$('#InventoryMe').append("<div class='item' style='background-image: url(https://steamcommunity-a.akamaihd.net/economy/image/"+item.img+"/116x116f)'> <span class='nameArea'>"+item.name+"</span><span class='priceArea' style='border: 1px solid #1f1e1e;border-bottom-color:"+item.color+"'>"+item.price+"</span></div>");
});
}
Next & Previous page
var page = 0;
renderItems(paginate(items, page));
$('#nextPage').on('click', function(){
$('#InventoryMe').empty();
page++;
renderItems(paginate(items, page));
});
$('#previousPage').on('click', function(){
$('#InventoryMe').empty();
page--;
renderItems(paginate(items, page));
});
}
Item selecting script
$( "#InventoryMe" ).on("click", ".item", function() {
var calculateP = fee / 100;
var itemName = $(this).find('.nameArea').text();
var itemPrice = $(this).find('.priceArea').text();
var newPrice = itemPrice * calculateP;
var jacobExe = parseInt(newPrice * 100)/100;
if($(this).closest(".item").hasClass("item-selected")){
$(this).last().removeClass("item-selected");
} else{
$(this).toggleClass("item-selected");
}
calculateTotal();
});

I assume you are selecting an item, and paginate away and back again, and the selection is then gone.
If that is the case, I would save the selection in a javascript variable, preferably by id.
$.getJSON("/Search.php", function(itemsList){
if(itemsList.items){
for(var i = 0;i < itemsList.items.length; i++){
pruice = itemsList.items[i].price;
prices[itemsList.items[i].name] = pruice;
items[i] = {
name: itemsList.items[i].name,
img: itemsList.items[i].img,
price: itemsList.items[i].price,
color: itemsList.items[i].color,
id: itemsList.items[i].id //add id
};
}
}
items.sort(function(a, b) {return b.price - a.price;});
OnFinished();
});
Add id to DOM
function renderItems(pageItems){
pageItems.forEach(function(item, index, arr){
$('#InventoryMe').append("<div data-id='"+item.id+"' class='item' style='background-image: url(https://steamcommunity-a.akamaihd.net/economy/image/"+item.img+"/116x116f)'> <span class='nameArea'>"+item.name+"</span><span class='priceArea' style='border: 1px solid #1f1e1e;border-bottom-color:"+item.color+"'>"+item.price+"</span></div>");
});
}
Then save id on click
var savedSelection;
$("#InventoryMe .item").click(function() {
savedSelection = $(this).data('id');
var calculateP = fee / 100;
var itemName = $(this).find('.nameArea').text();
var itemPrice = $(this).find('.priceArea').text();
var newPrice = itemPrice * calculateP;
var jacobExe = parseInt(newPrice * 100)/100;
if($(this).closest(".item").hasClass("item-selected")){
$(this).last().removeClass("item-selected");
} else{
$(this).toggleClass("item-selected");
}
calculateTotal();
});
Then in your renderItems, I would do
function renderItems(pageItems) {
pageItems.forEach(function(item, index, arr) {
$('#InventoryMe').append("<div class='item' style='background-image: url(https://steamcommunity-a.akamaihd.net/economy/image/"+item.img+"/116x116f)'> <span class='nameArea'>"+item.name+"</span><span class='priceArea' style='border: 1px solid #1f1e1e;border-bottom-color:"+item.color+"'>"+item.price+"</span></div>");
});
if (savedSelection) {
$('[data-id="'+savedSelection+'"]').click();
}
}
Don't forget to place savedSelection in a reachable scope of both functions.

removing function on click jquery

I have gone through quite a few similar question but none of them fit to my problem.
I am calling a function after onclick event to my anchor tag and after clicking the anchor tag the function adds a row new row to another section within the webpage.
What I am trying to do is to revert the process back when a user clicks on the same anchor tag again. In other words the newly added row should be removed from the view if clicked again.
Here is my code where on click I am calling a function to add new rows
function drawSelections(betTypeId, tableId, selections) {
var whiteLegendTrId = tableId + '_whiteLegendTr';
$.each(selections, function(i, v){
var selectionRowId = tableId + '_' + v.id;
document.getElementById(tableId).appendChild(createTr(selectionRowId,null,"white"));
$('#' + whiteLegendTrId).find('td').each(function() {
var tdId = $(this).attr('id');
if (tdId == "pic") {document.getElementById(selectionRowId).appendChild(createTd(null, null, null, "",null))}
else if (tdId == "no") {document.getElementById(selectionRowId).appendChild(createTd(null, null, null, v.position,null))}
else if (tdId == "horseName" || tdId == "jockey") {document.getElementById(selectionRowId).appendChild(createTd(null, null, null, v.name,null))}
// Horse prices
else {
var priceNotFound = true;
$.each(v.prices, function(index,value) {
if (value.betTypeId == betTypeId && (value.productId == tdId || value.betTypeId == tdId)) {
priceNotFound = false;
var td = createTd(null, null, null, "", null),
a = document.createElement('a');
a.innerHTML = value.value.toFixed(2);
// adding new rows after onclick to anchore tag
(function(i, index){
a.onclick=function() {
var betInfo = createMapForBet(selections[i],index);
$(this).toggleClass("highlight");
increaseBetSlipCount();
addToSingleBetSlip(betInfo);
}
})(i,index)
td.appendChild(a);
document.getElementById(selectionRowId).appendChild(td);
}
});
if (priceNotFound) document.getElementById(selectionRowId).appendChild(createTd(null, null, null, '-',null));
};
});
});
}
Adding new rows
function addToSingleBetSlip(betInfo) {
// Show bet slip
$('.betslip_details.gray').show();
// Make Single tab active
selectSingleBetSlip();
// Create div for the bet
var div = createSingleBetDiv(betInfo);
$("#bets").append(div);
// Increase single bet counter
updateBetSinglesCounter();
}
This is the JS code where I am generating the views for the dynamic rows added after clicking the anchor tag in my first function
function createSingleBetDiv(betInfo) {
var id = betInfo.betType + '_' + betInfo.productId + '_' + betInfo.mpid,
div = createDiv(id + '_div', 'singleBet', 'bet gray2'),
a = createA(null, null, null, 'right orange'),
leftDiv = createDiv(null, null, 'left'),
closeDiv = createDiv(null, null, 'icon_shut_bet'),
singleBetNumber = ++document.getElementsByName('singleBet').length;
// Info abt the bet
$(leftDiv).append('<p class="title"><b><span class="bet_no">' + singleBetNumber + '</span>. ' + betInfo['horseName'] + '</b></p>');
var raceInfo = "";
$("#raceInfo").contents().filter(function () {
if (this.nodeType === 3) raceInfo = $(this).text() + ', ' + betInfo['betTypeName'] + ' (' + betInfo['value'].toFixed(2) + ')';
});
$(leftDiv).append('<p class="title">' + raceInfo + '</p>');
// Closing btn
(function(id) {
a.onclick=function() {
removeSingleBet(id + '_div');
};
})(id);
$(a).append(closeDiv);
// Creating input field
$(leftDiv).append('<p class="supermid"><input id="' + id + '_input\" type="text"></p>');
// Creating WIN / PLACE checkbox selection
$(leftDiv).append('<p><input id="' + id + '_checkbox\" type="checkbox"><b>' + winPlace + '</b></p>');
// Append left part
$(div).append(leftDiv);
// Append right part
$(div).append(a);
// Appending div with data
$.data(div, 'mapForBet', betInfo);
return div;
}
Function to delete the individual rows
function removeSingleBet(id) {
// Remove the div
removeElement(id);
// Decrease the betslip counter
decreaseBetSlipCount();
// Decrease bet singles counter
updateBetSinglesCounter();
}
function removeElement(id) {
var element = document.getElementById(id);
element.parentNode.removeChild(element);
}

It's not the most elegant solution, but it should get you started.
I tried keeping it in the same format as your code where applicable:
http://jsfiddle.net/L5wmz/
ul{
min-height: 100px;
width: 250px;
border: 1px solid lightGrey;
}
<ul id="bets">
<li id="bet_one">one</li>
<li id="bet_two">two</li>
</ul>
$(document).ready(function(){
var bets = $("#bets li");
var slips = $("#slips");
bets.bind("click", function(){
var that = $(this);
try{
that.data("slipData");
}catch(err){
that.data("slipData",null);
}
if(that.data("slipData") == null){
var slip = createSlip({slipdata:"data"+that.attr("id")});
slip.bind("click", function(){
that.data("slipData",null);
$(this).remove()
});
that.data("slipData",slip);
slips.append(slip);
}
else{
slips.find(that.data("slipData")).remove();
that.data("slipData",null);
}
console.log(that.data("slipData"));
});
});
function createSlip(data){
var item = $(document.createElement("li")).append("slip: "+data.slipdata);
return item;
}

flot.js plot with checkboxes and colored swatches not working

I am specifically using the flot plotting code. My intent is to plot audio power spectrum data, including both channels for each track on a plot. So I can expect to have between 2 and say 40 lines for a given concert.
I hope to have a method to toggle each line on and off, while keeping the numbers and colors static on the plot. I have tried a variety of methods and have two that nearly get to where I want to be:
The first is based on the code from http://people.iola.dk/olau/flot/examples/turning-series.html, shown below:
var track = 0;
// hard-code color indices to prevent them from shifting as
// countries are turned on/off
var i = 0;
$.each(datasets, function(key, val) {
val.color = i;
++i;
});
// insert checkboxes
var choiceContainer = $("#choices<?php echo $i ?>");
choiceContainer.append('<table><tr>');
$.each(datasets, function(key, val) {
track = track + 1;
if (track == 1){
choiceContainer.append('<td width=\"100\">Left Channel</td>');
} else if(track == <?php echo $tracks ?>){
choiceContainer.append('</tr><tr>');
choiceContainer.append('<td>Right Channel</td>');
}
choiceContainer.append('<td width=\"35\"><input type="checkbox" name="' + key +
'" checked="checked" id="id' + key + '">' +
'<label for="id' + key + '">'
+ val.label + '</label></td>');
});
choiceContainer.append('</tr></table>');
choiceContainer.find("input").click(plotAccordingToChoices);
function plotAccordingToChoices() {
var data = [];
choiceContainer.find("input:checked").each(function () {
var key = $(this).attr("name");
if (key && datasets[key])
data.push(datasets[key]);
});
var options = {
yaxis: { min: 0 },
xaxis: { tickDecimals: 0 },
xaxes: [{
axisLabel: 'Frequency (Hz)',
}],
yaxes: [{
position: 'left',
axisLabel: 'Power (dB)',
}],
series: {
lines: {
lineWidth: 2
}
},
legend: {
noColumns:7,
container: $("#labeler<?php echo $i ?>"),
labelFormatter: function(label, series){
return ''+label+'';
}
}
};
if (data.length > 0){
$.plot($("#placeholder<?php echo $i ?>"), data, options);
}
}
plotAccordingToChoices();
This works great for what I am trying to accomplish, with the exception that the checkboxes do not show the color swatch next to them...
The example here: http://jsfiddle.net/mpazaryna/Zvqqn/ shows a code which quite simply creates the on off functionality with the color swatches. but does not lend itself (IMHO) to formatting out the legend in a manner that is coherent as to which channel and which track is being selected.
So, my goal would be find a way to add the color swatches to my existing code, above, as this is currently structured in a manner I find beneficial to the layout of the page.

Okay.. so it took some time, but below is the code I settled upon. This adds the swatches to a table below the flot plot. The plot still has the legend on the right side, which appear and disappear as I toggle sets on and off with the checkboxes. The swatches in the table persist. Maybe this will help someone!
var options = {
legend: {
show: true
},
series: {
points: {
show: false
},
lines: {
show: true
}
},
grid: {
hoverable: true
},
xaxis: {
},
yaxis: {
}
};
var i = 0;
var track = 0;
choiceContainer = $("#labeler<?php echo $i ?>");
var table = $('<table border=1/>');
var row = $('<tr/>');
var cell = $('<td width=\"100\"/>');
var temp = $(table);
$.each(results, function(key, val) {
track = track + 1;
val.color = i;
++i;
l = val.label;
if (track == 1){
temp.append(row);
row.append(cell);
cell.append('Left Channel');
} else if(track == <?php echo $tracks ?>){
row = $('<tr/>');
temp.append(row);
cell = $('<td width=\"100\">');
row.append(cell);
cell.append('Right Channel');
}
cell = $('<td width=\"75\"/>');
row.append(cell);
var bar = $('<div style=\"width:18px\"><bar />');
cell.append(bar);
var inp = $('<input name="' + l + '" id="' + l + '" type="checkbox" checked="checked">');
cell.append(inp);
var bits = $('<label>', {
text: l,
'for': l
});
cell.append(bits);
choiceContainer.append(temp);
});
function plotAccordingToChoices() {
var data = [];
choiceContainer.find("input:checked").each(function() {
var key = this.name;
for (var i = 0; i < results.length; i++) {
if (results[i].label === key) {
data.push(results[i]);
return true;
}
}
});
$.plot($("#placeholder<?php echo $i ?>"), data, options);
}
var previousPoint = null;
$("#placeholder").bind("plothover", function(event, pos, item) {
$("#x").text(pos.x.toFixed(2));
$("#y").text(pos.y.toFixed(2));
if (item) {
if (previousPoint != item.datapoint) {
previousPoint = item.datapoint;
$("#tooltip").remove();
var x = item.datapoint[0].toFixed(2),
y = item.datapoint[1].toFixed(2);
showTooltip(item.pageX, item.pageY, item.series.label + " $" + y);
}
} else {
$("#tooltip").remove();
previousPoint = null;
}
});
function showTooltip(x, y, contents) {
$('<div id="tooltip">' + contents + '</div>').css({
position: 'absolute',
display: 'none',
top: y + 5,
left: x + 15,
border: '1px solid #fdd',
padding: '2px',
backgroundColor: '#fee',
opacity: 0.80
}).appendTo("body").fadeIn(200);
}
plotAccordingToChoices();
choiceContainer.find("input").change(plotAccordingToChoices);
$('.legendColorBox > div').each(function(i){
$(this).clone().prependTo(choiceContainer.find("bar").eq(i));
});