I'm looking for HTML5 chart that can show value at cursor point like this
http://www.tradeviewforex.com/forex-blog/tip-14-how-to-use-the-crosshair-on-metatrader-4
I found StockChartX can do this
http://developer.modulusfe.com/stockchartx_html5/
(click Draw -> Annotation)
but I can effort this price :P
Thanks for answer!
Ps. Sorry for my bad english.
Something similar can be done with the Annotation tool in TeeChart HTML5. See the example here
Also, you can format a tool tip, if that is the need.
tip = new Tee.ToolTip(Chart1);
Chart1.tools.add(tip);
tip.format.font.style = "11px Verdana";
tip.render = "canvas";
tip.onshow = function (tool, series, index) {
scaling = 2;
poindex = index;
}
tip.onhide = function () {
scaling = 0;
poindex = -1;
}
tip.ongettext = function (tool, text) {
var txt = tool.currentSeries.title + ":\n" + "Value: " + text + tool.currentSeries.units + "\n" + jsonDataArray[0].evDataTime[tool.currentIndex] + " (ms)";
model.MouseOverY(text + tool.currentSeries.units);
model.MouseOverX(jsonDataArray[0].evDataTime[tool.currentIndex] + " (ms)");
model.SelectedSeries(tool.currentSeries.title);
return txt;
}
Related
Here is my JSON
var gal = [
{
"folder":"nu_images",
"pic":"gd_42.jpg",
"boxclass":"pirobox_gall",
"alt":"Rand Poster 1",
"title":"Rand Poster 1",
"thfolder":"th",
"thumbpic":"th_gd_42.jpg"
},
{
"folder":"nu_images",
"pic":"gd_13.jpg",
"boxclass":"pirobox_gall",
"alt":"Explosive Pixel Design",
"title":"Explosive Pixel Design",
"thfolder":"th",
"thumbpic":"th_gd_13.jpg"
}
];
and here is my for loop
for (i = 0; i < gal.length; i++) {
document.getElementById("gallery").innerHTML = "" + "<img src=\"" + "http:\/\/galnova.com\/" + gal[i].folder + "\/" + "th\/" + gal[i].thumbpic + "\"" + "border=\"0\"" + "alt=\"" + gal[i].alt + "\"" + "title=\"" + gal[i].title + "\"\/>" + ""
};
I am trying to make my JSON show all of the objects in HTML one after the other. I can get it to show the first one or whatever number I put into the array but I don't know how to make it generate a list of them.
Here is a link to my jsfiddle. Any help you can offer would be greatly appreciated.
http://jsfiddle.net/o7cuxyhb/10/
It's being generated here <p id="gallery"></p> just not correctly.
You're overwriting your html with every loop iteration:
document.getElementById("gallery").innerHTML = ...
^---
Perhaps you want something more like
document.getElementById("gallery").innerHTML += ...
^---
which will concatenation the original html contents with your new stuff.
And technically, you shouldn't be doing this in a loop. Changing .innerHTML like that causes the document to be reflowed/re-rendered each time you change .innerHTML, which gets very expensive when you do it in a loop. You should be building your html as a plain string, THEN adding it to the dom.
e.g.
var str = '';
foreach(...) {
str += 'new html here';
}
document.getElementById("gallery").innerHTML += str;
for (i = 0; i < gal.length; i++) {
document.getElementById("gallery").innerHTML += "" + "<img src=\"" + "http:\/\/galnova.com\/" + gal[i].folder + "\/" + "th\/" + gal[i].thumbpic + "\"" + "border=\"0\"" + "alt=\"" + gal[i].alt + "\"" + "title=\"" + gal[i].title + "\"\/>" + "" };
Add a += instead of an = after innerHTML
Try this:
function displayJson(jsonArray){
var container = document.getElementById("gallery");
for (var i=0; i<jsonArray.length; i++){
var newElement = document.createElement("a").innerHTML = jsonToHtml(jsonArray[i])
container.appendChild(newElement);
}
}
function jsonToHtml(jsonObj){
//Define your dom object here
var el = document.createElement("a").innerHTML = '' // you code here
...
return el;
}
displayJson(gal);
I want to scale inline SVG document in html. I have code like this:
var svg_width = svg.attr('width');
var svg_height = svg.attr('height');
function resize(width, height) {
svg.attr('width', width).attr('height', height);
var group = svg.find('#resize_group');
if (!group.length) {
group = svg.children().not('metadata, defs').wrapAll('<g/>').
parent().attr('id', 'resize_group');
}
var matrix = svg[0].createSVGMatrix();
//var matrix = group[0].getCTM();
matrix.a = width/svg_width;
matrix.d = width/svg_height;
group.attr('transform', matrix.asString());
}
SVGMatrix.prototype.asString = function() {
return 'matrix(' + this.a + ' ' + this.b + ' ' + this.c + ' ' + this.d +
' ' + this.e + ' ' + this.f + ')';
};
NOTE: I need to transform the elements inside svg because otherwise the image is trimmed.
but when I call resize function whole svg disappear. I've save svg to file and open it in Inkscape and it look normal (it's scaled). Why the svg disappear? (I tested on Firefox, Chrome and Opera)
I found quick hack, to replace svg with text of the svg to force redraw.
$.fn.xml = function() {
return (new XMLSerializer()).serializeToString(this[0]);
};
$.fn.SVGRedraw = function() {
return $(this.xml()).replaceAll(this);
};
I have the following code and when I run it I get the right number of items in sheetFormulas (4), and the array values look correctly formed.
However, I get an error right after the sheetFormulas Browser.msgBox pops up, indicating the getRange().setFormulas line has an issue, but I can't see what it is.
function test(){
var ss = SpreadsheetApp.getActiveSpreadsheet();
var testingTarget = ss.getSheetByName("Testing");
var sheetFormulas = new Array();
for (l=0;l<10;l++) {
sheetRowCount = l + 2;
var monthlyTotalCompanyCosts = '=F' + sheetRowCount + '/$F$29*$I$14';
var monthlyTotalCompanyCostsPerEa = '=IFERROR(H' + sheetRowCount + '/C' + sheetRowCount + ')';
var monthlyMargin = '=D' + sheetRowCount + '-F' + sheetRowCount;
var monthlyMarginPctg = '=IFERROR(J' + sheetRowCount + '/D' + sheetRowCount + ')';
sheetFormulas.push(monthlyTotalCompanyCosts,monthlyTotalCompanyCostsPerEa,monthlyMargin,monthlyMarginPctg);
Browser.msgBox("sheetFormulas.length is: " + sheetFormulas.length);
Browser.msgBox("sheetFormulas is: " + sheetFormulas);
testingTarget.getRange(sheetRowCount,8,1,4).setFormulas(sheetFormulas);
sheetFormulas = [];
}
}
Any help is appreciated,
Phil
First, sheetFormulas has to be a 2D array. So try doing
/* Notice the [] around sheetFormulas */
testingTarget.getRange(sheetRowCount,8,1,4).setFormulas([sheetFormulas]);
If you still see other problems, then put your code inside a try{}catch{} block and print out the exception in the catch block.
I also suggest that you print out the formula using Logger.log() before setting it on the spreadsheet.
I am trying to add add a button called shopping cart to my Tabs script. The new button is controlled if a checkbox is clicked. (Show). Im confused why the image is not showing. Any answers would be helpful.
Thank you.
Copy code
$(function() {
var $tabs = $('#tabs').tabs({cookie:{expires:1}});
$(".ui-tabs-panel").each(function(i){
var totalSize = $(".ui-tabs-panel").size() - 1;
var prevImage = "custom/images/prev.png";
var nextImage = "custom/images/next.png";
var atcImage = "custom/images/cart.jpg";
if (i != 0) {
prev = i;
$(this).append("<img href='#' class='prev-tab mover' rel='" + prev + "' src='" + prevImage + "'></img>");
}
if (i != totalSize) {
next = i + 2;
$(this).append("<img href='#' class='next-tab mover' rel='" + next + "' src='" + nextImage + "'></img>");
}
if (i > 1) {
atc = i + 2;
$(this).append("<img href='#' class='atc-tab mover' rel='" + next + "' src='" + atcImage + "'></img>");
}
$('input[name=FIELD_469]').click(function() {
if (this.checked) {
$("img[src*=cart]").show();
}
else {
$("img[src*=cart]").hide();
}
});
$('.next-tab, .prev-tab, .atc-tab').click(function() {
$tabs.tabs('select', $(this).attr("rel"));
return false;
});
});
Sorry, I can not ask for clarification because of low level of my rating, but there are several things that I have noticed and some recomendations.
1) Your selector should look like 'img[src~="cart"]'
http://api.jquery.com/attribute-contains-word-selector/
2) If you use class 'mover' only for that images, you can use '.mover' selector, otherwise just add new class name.
3) Test your JQuery objects with Google Chrome using console.log($("selector")) (Tools->Developer Tools->Console)
4) I think it should be not 'this' but $(this)
$('input[name=FIELD_469]').click(function() {
if (this.checked) {
$("img[src*=cart]").show();
}
If recommendations don't help, please provide more info about your form preferrably with example to see. Thanks
I've got a couple of questions regarding the Sqlite implementations for HTML5 website.
First of all, I'm trying to use the Synchronous Database calling openDatabaseSync method, but it doesn't seem to work... Someone used it already and could help me ?
Also, I'm struggling a bit trying to process the result return by my database query. I'd like my function to return an array of book, like this :
function searchByKeywordId(kw_id, element) {
cleanSearch();
element.innerHTML = "No result...";
var books = new Array();
db.transaction(function (tx) {
tx.executeSql("SELECT b.BK_TITLE,b.BK_URL, b.BK_THUMBNAIL_URL FROM KEYWORDS k INNER JOIN CATALOG_ITEMS c on k.KW_ID = c.KW_ID INNER JOIN BOOKS b on c.BK_ID = b.BK_ID WHERE k.KW_ID = ? GROUP BY b.BK_TITLE,b.BK_URL",[kw_id], function (tx, results) {
if (results.rows.length > 0) {
var html = "";
for (var i = 0; i < results.rows.length; i++) {
var bookId = results.rows.item(i).BK_ID;
var bookUrl = results.rows.item(i).BK_URL;
var bookTitle = results.rows.item(i).BK_TITLE;
var bookThumbnailUrl = results.rows.item(i).BK_THUMBNAIL_URL;
var book = new Book(bookId,bookTitle,bookUrl,bookThumbnailUrl);
books.push(book);
/*html += "<div class='x_container' id='calibre:book:" + bookId + "'>";
html += "<div class='cover'>";
html += "</div></div>";*/
html += "<a href='" + bookUrl + "' title=\"" + bookTitle + "\" target='_new'><img src='" + bookThumbnailUrl + "'></a> ";
}
//html += "</div>";
element.innerHTML = html;
}
});
});
return books; }
obviously, adding books within the callback methods doesn't work ... Do you see a way I could achieve that ? So that I would not have to write in the document from my database methods ...
Thanks !
On stackoverflow a question with javascript and "doesn't work" in it is usually a missing paren :) However I didn't find one in your code. I see some suspicious looking syntax around
,[kw_id], << did we really mean an array here, or are we de-referencing something...
In any case if that's not a mistake I would start by simplifying things, and not multipurposing your functions.
function searchByKeywordId(kw_id, element) {
cleanSearch();
var books = new Array();
db.transaction(function (tx) {
tx.executeSql("SELECT b.BK_TITLE,b.BK_URL, b.BK_THUMBNAIL_URL FROM KEYWORDS k INNER JOIN CATALOG_ITEMS c on k.KW_ID = c.KW_ID INNER JOIN BOOKS b on c.BK_ID = b.BK_ID WHERE k.KW_ID = ? GROUP BY b.BK_TITLE,b.BK_URL",[kw_id], function (tx, results) {
if (results.rows.length > 0) {
var html = "";
for (var i = 0; i < results.rows.length; i++) {
var bookId = results.rows.item(i).BK_ID;
var bookUrl = results.rows.item(i).BK_URL;
var bookTitle = results.rows.item(i).BK_TITLE;
var bookThumbnailUrl = results.rows.item(i).BK_THUMBNAIL_URL;
var book = new Book(bookId,bookTitle,bookUrl,bookThumbnailUrl);
books.push(book);
} // end for loop
} // end if block
} // end execute callback
); // end executeSql call
} // end transaction function argument
); // end db.transaction call
return books;
}
Then somewhere that you called this function do something like this:
var html="";
for (i=0; i<books.length; i++) {
html += "<a href='" + books[i].url + "' title=\"" + books[i].title + "\" target='_new'><img src='" + books[i].thumbnailUrl + "'></a> ";
}
if (html == "") {
html = "No result...";
}
element.innerHTML = html; // consider using jQuery here for browser compatability reasons
This will simplify debugging your code in firebug or whatever and be more readable. Later IF you need the performance, you can try to recombine and use the existing loop as an optimization... Premature optimization is usually a bad idea. Write clear code that works. Even if you know you should optimize it, get it working and then optimize it after it works (preferably after you've demonstrated that you do in fact need to optimize it).
http://www.flounder.com/optimization.htm