I am using jQchart to display a graph. However, the title property seems to display only a single line of text. Currently, the graph displays the following title:
text: chartTypeText + ': ' + chartTitle + ", " + $('#baselineResidentialLocationCity option:selected').text() + ', ' + $("#baselineResidentialLocationState option:selected").val() + ' ' + $('#baselineResidentialStandardYear option:selected').text() + ' ' + baselinePeriod + ' year'
However, I basically need to display each variable on a different line (hopefully use linebreaks to separate each piece of information). I tried using "" but it displays the string literal.
Is there any way I could display each variable under the title of the graph with different fonts etc?
If you are looking for series title customization, it can be customized with tooltipFormat event.
[Use some separator(I use ; as a separator) and format with html, css]
In below statement, I changed separator to ;
text: chartTypeText + ': ' + chartTitle + ";" + $('#baselineResidentialLocationCity option:selected').text() + ', ' + $("#baselineResidentialLocationState option:selected").val() + ';' + $('#baselineResidentialStandardYear option:selected').text() + ' ' + baselinePeriod + ' year'
<script lang="javascript" type="text/javascript">
$(function () {
$('#ChartClientID').bind('tooltipFormat', function (e, data) {
var t=data.series.title.split(";");
//OR here you can dynamically build here it self
return "<b>" + t[0] + "</b><br />"
+ (t[1] || "") + "<br />"
+ (t[2] || "");
});
});
</script>
see this link for reference: http://www.jqchart.com/aspnet/chart/ChartFeatures/Tooltips
Related
I'm getting a list of objects and printing their content in the HTML page dynamically but only the last object is getting printed in all the added divisions.
Here is the js code:
var thelist = JSON.parse(sessionStorage.getItem("suspectList"));
for (var k in thelist) {
$(document).ready(function () {
$('#outerdiv').append('<div class="card"><h5 class="card-header">' + 'Crime: ' + thelist[k]['crime'] + '</h5><div class="card-body"><h5 class="card-title">' + 'Suspect name : ' + thelist[k]['name'] + '</h5><p class="card-text">' + 'Date of birth: ' + thelist[k]['dob'] + '</p>Enter Statement</div></div>');
});
console.log(thelist[k]['name'] + ' ' + thelist[k]['phone'] + ' ' + thelist[k]['dob']);
}
Here is the output:
Here is the console log
I working on one application, and I started learning ASP.NET so I am begginer and I am trying to add one field in view.
So, I have Firstname,Address, ZIP, State etc and I want for every medical provider add his|her speciality. I create a table and make connection beatween two table.
When I add SPeciality, it doesnt show up in view. I have no idea where I made mistake.
https://i.imgur.com/YBc5dVZ.jpg
https://i.imgur.com/m0haaIW.jpg
https://i.imgur.com/mAvjNLc.jpg
var id = $(this).attr('data-id');
$.getJSON("/NfDocuments/MedicalInput", { id: id },
function (data) {
$('#medInput').empty();
$.each(data, function () {
// $("#medInput").append("'" + this.Id + "'");
//console.log(this.Id);
var medInput = document.getElementById("medInput");
medInput.value = this.Firstname + ' - ' + this.Zip + ' ' + this.Address1 + ',' + this.City + ', ' + this.State + ' - ' + this.Mobile;
});
});
Any suggestion, comment ?
medInput.value = this.Firstname + ' - '
+ this.Zip + ' '
+ this.Address1 + ','
+ this.City + ', '
+ this.State + ' - '
+ this.Mobile;
You need to append this.SpecialityName (or whatever you have it named as when returned to the view) to medInput.Value:
medInput.value = this.Firstname + ' - '
+ this.Zip + ' '
+ this.Address1 + ','
+ this.City + ', '
+ this.State + ' - '
+ this.Mobile + ' - '
+ this.SpecialityName;
I'm assuming the id of each speciality is this.TypeId and that you have already mapped TypeId to some kind of SpecialityName before sending the object back to the view.
I'm trying to add a href link to jquery append. The link opens an ajax modal when clicked.
here's what I have
$('<div/>').text(message.text).prepend($('<em/>')
.text('Opponent: '+ opponentName + ',' + ' ' + 'Game amount: ' + message.amount + ' ' + 'tokens,' + ' ' + 'Game: ' + message.game + ' ' + 'accept')).appendTo($('#pendingChallenges'));
$('#pendingChallenges')[0].scrollTop = $(' #pendingChallenges')[0].scrollHeight;
You need to use html instead of text to have your html string to be represented as html instead of textcontent which is what happens when you use text.
$('<div/>').text(message.text).prepend($('<em/>')
.html(...
I'm using append in the following way:
$('#city').append('<div class="c">' + value['name'] + '. ' + value['city'] + ', ' +
value['state'] +' ' + value['zip'] + ' ' + '</div>');
Which results in something like this:
<div class="c">
Antone Stark. Doyletown, Rhode Island 43467
</div>
How do you use value['state'] to name the class?
<div class="MyCustomClass">
If the states were two letter codes, you could do this:
$('#city').append('<div class="'+value['state']+'">' + value['name'] + '. ' + value['city'] + ', ' +
value['state'] +' ' + value['zip'] + ' ' + '</div>');
However, classes are space-separated meaning they are treated as separate when split up by spaces. So if you add something there with a space (like "Rhode Island"), it will treat them as separate classes (e.g., "Rhode" and "Island") so you may wish to replace spaces with an underscore or the like.
$('#city').append('<div class="'+value['state'].replace(/ /g, '_')+'">' + value['name'] + '. ' + value['city'] + ', ' +
value['state'] +' ' + value['zip'] + ' ' + '</div>');
So in the case of Rhode Island, that will produce:
<div class="Rhode_Island">
which you can then reference in CSS:
.Rhode_Island {color:blue}
or jQuery:
$('.Rhode_Island').... (do something)
etc.
However, if you are not repeating these, it might be more appropriate to generate it as an id rather than a class (i.e., to produce <div id="Rhode_Island"> instead of <div class="Rhode_Island">).
$('#city').append('<div class="' + value['state'].replace(/ /g, '_') + '">' ...
The ultimate aim is to return a page displaying the following sentence
Once upon a time there was a GENDER named NAME who had a PET named PET NAME.
<SCRIPT language="JavaScript">
var heroGender, heroName, petType, petName;
heroGender = window.prompt('Is the hero female or male? Enter F or M', 'F');
heroName = window.prompt('What is the hero\'s name?','');
petType = window.prompt('What type of pet does the hero have?','');
petName = window.prompt('What is name of the pet?','');
document.write('Once upon a time there was a ');
if (heroGender == ('F'))
{
document.write('girl');
}
else
{
document.write('boy');
}
document.write('Once upon a time there was a ' + heroGender + ' named ' + heroName '.''<BR>' +
heroName + ' had a ' + petType + ' called ' + petName + '.');
</SCRIPT>
While your waiting for the books!
Learn from Mozilla Developer Centre !
An Example:
Example
Fixed version
document.write(
'Once upon a time there was a ' + heroGender +
' named ' + heroName + '.' + '<BR>' + heroName +
' had a ' + petType + ' called ' + petName + '.');
Broken version
You were missing to + symbols.
document.write(
'Once upon a time there was a ' + heroGender +
' named ' + heroName /* + */ '.' /* + */ '<BR>' + heroName +
' had a ' + petType + ' called ' + petName + '.');
Try using
Firefox and Firebug and its console tab (Hit F12)
IE9 and the build in console (Hit F12. Make sure the console is open then refresh).
Chrome and the build in console (Hit Ctrl+Shift+J)
To watch for any error messages.
If that's too much effort then try
window.onerror = function(e) {
alert(e.message);
}
Here's an "improved" more standards compliant version. Example Link!
HTML:
<label> Your Hero's gender </label><input id="heroGender"/><br/>
<label> Your Hero's name </label><input id="heroName"/><br/>
<label> Your Hero's pet type </label><input id="petType"/><br/>
<label> Your Hero's pet name </label><input id="petName"/><br/>
<button> Make me a hero! </button>
<div id="output"></div>
JavaScript:
// make your hero when you press the button
document.getElementsByTagName("button")[0].addEventListener("click", function() {
// get all the values from the text boxes
var gender = document.getElementById("heroGender").value,
name = document.getElementById("heroName").value,
petType = document.getElementById("petType").value,
petName = document.getElementById("petName").value;
// set the text on your output.
document.getElementById("output").textContent =
"Once upon a time there was a " + gender +
" named " + name + ". " + name + " had a pet " +
petType + " called " + petName;
}, false);
The above code will break for IE8 or less :(. Making JavaScript work cross browser is a right pain.
So I you could read the documentation for browsers at
Firefox's MDN
Microsoft JavaScript docs and HTML docs
But those are not easy to read or navigate. A great visual guide for cross browser scripting is the visibone BrowserBook.
It will show cross browser support (red is firefox, blue is IE) :
Give it a few months and you'll know how to use all that comfortably.
I think you had some typos in your final document.write.You're missing a '+' after heroName... and you've got some duplicative document.writes.
Here's what I believe should be your final code:
var heroGender, heroName, petType, petName;
heroGender = window.prompt('Is the hero female or male? Enter F or M', 'F');
heroName = window.prompt('What is the hero\'s name?','');
petType = window.prompt('What type of pet does the hero have?','');
petName = window.prompt('What is name of the pet?','');
if (heroGender == ('F')) { heroGender ='girl'; } else { heroGender = 'boy'; }
document.write('Once upon a time there was a ' + heroGender + ' named ' + heroName + '. ' + heroName + ' had a ' + petType + ' called ' + petName + '.');
There is a syntax error in this line:
document.write('Once upon a time there was a ' + heroGender + ' named ' + heroName '.''<BR>' + heroName + ' had a ' + petType + ' called ' + petName + '.');
specifically, here:
heroName '.''<BR>' + heroName
If you change it to this, your should work as expected:
document.write(' named ' + heroName + ' who had a ' + petType + ' called ' + petName + '.');
Notice that I also removed the redundancy from the first part of the phrase, since you already included it before your "if 'F', then 'girl'" statement.
Too many quotes and a missing plus
Error: missing ) after argument list
Source File: http://fiddle.jshell.net/_display/
Line: 41, Column: 83
Source Code:
document.write('Once upon a time there was a ' + heroGender + ' named ' + heroName '.''<BR>' +
should be
document.write(' named ' + heroName + '.<BR>' +
heroName + ' had a ' + petType + ' called ' + petName + '.');
http://jsfiddle.net/mplungjan/zHGsD/
document.write('Once upon a time there was a ' + heroGender + ' named ' + heroName **+** '.' **+** '<BR>' +
heroName + ' had a ' + petType + ' called ' + petName + '.');
I got it to run by adding the two + that I've wrapped in **
The problem is on your last line. Corrected as follow
document.write('Once upon a time there was a ' + heroGender + ' named ' + heroName + '.' + '<BR>' + heroName + ' had a ' + petType + ' called ' + petName + '.');