How to embed formula.js from Github into html - javascript

im trying to use cumipmt function ( similar to the one from Excel) in my blogspot website and i need to embed an external javascript "formula.js" from "https://github.com/sutoiku/formula.js "to use the function cumipmt. I dont know how to embed it , can someone help?
Do i also have to embed "https://gist.github.com/ghalimi/4583240#file-cumipmt-js" too, in order to use cumipmt function?
This is what im calling,
document.calc.pay1.value = CUMIPMT(1.2, 100, 300000, 1, 100, 0);
Thanks
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
From comments from Br3t and atulquest93,
I placed the following code in a post under HTML instead of Compose but it still doenst work. Am i doing it correctly?
<!-- Numeric -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/numeric/1.2.6/numeric.min.js"></script>
<!-- Numeral.js -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/numeral.js/1.4.5/numeral.min.js"></script>
<!-- jStat -->
<script src="https://cdn.jsdelivr.net/jstat/latest/jstat.min.js"></script>
<script type="text/javascript" src="https://raw.githubusercontent.com/sutoiku/formula.js/master/dist/formula.min.js"></script>
<script type="text/javascript" src="https://gist.githubusercontent.com/ghalimi/4583240/raw/d7e0a20cff288c52db9768f9291f380cf7c293a1/CUMIPMT.js"></script>
<script>
document.write(CUMIPMT(12/12, 10, 10000, 1, 10, 0));</script>

Use
<script src="https://raw.githubusercontent.com/sutoiku/formula.js/master/dist/formula.min.js"> </script>
or copy the content and include the content directly
<script>
--content--
</script>
call this function after including the js ..
document.calc.pay1.value = CUMIPMT(1.2, 100, 300000, 1, 100, 0);

At first, at your blogspot-dashboard go to Design and click Add gadget at any area (preffer to do this in footer. Choose HTML/JavaScript-gadget and insert into content
<script type="text/javascript" src="https://raw.githubusercontent.com/sutoiku/formula.js/master/dist/formula.min.js"></script>
<script type="text/javascript" src="https://gist.githubusercontent.com/ghalimi/4583240/raw/d7e0a20cff288c52db9768f9291f380cf7c293a1/CUMIPMT.js"></script>
<script type="text/javascript">
document.calc.pay1.value = CUMIPMT(1.2, 100, 300000, 1, 100, 0);
</script>

Related

Why does a BokehJS example fail in the browser?

I'm trying to figure out if BokehJS can meet my plotting needs for a minor dev project. When I try to copy the last example found on https://docs.bokeh.org/en/latest/docs/user_guide/bokehjs.html it fails with this backtrace in Chrome:
Uncaught TypeError: Cannot read property 'classList' of null
at c (bokeh-1.3.4.min.js:31)
at Object.n.add_document_standalone (bokeh-1.3.4.min.js:31)
at Object.t.show (bokeh-api-1.3.4.min.js:31)
at bokeh.html:58
The example is copied verbatim into a file, bokeh.html, and opened directly in the browser. bokeh.html:58 is the line
Bokeh.Plotting.show(plot);
The example is supposed to be a complete standalone html file so I must be missing something obvious here. My copy of the example can be found here https://pastebin.com/VizzJbH4
Any hints are greatly appreciated.
Move script tag with code at the end instead of head tag.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Complete Example</title>
<script type="text/javascript" src="https://cdn.bokeh.org/bokeh/release/bokeh-2.1.1.min.js" integrity="sha384-kLr4fYcqcSpbuI95brIH3vnnYCquzzSxHPU6XGQCIkQRGJwhg0StNbj1eegrHs12" crossorigin="anonymous"></script>
<script type="text/javascript" src="https://cdn.bokeh.org/bokeh/release/bokeh-widgets-2.1.1.min.js" integrity="sha384-xIGPmVtaOm+z0BqfSOMn4lOR6ciex448GIKG4eE61LsAvmGj48XcMQZtKcE/UXZe" crossorigin="anonymous"></script>
<script type="text/javascript" src="https://cdn.bokeh.org/bokeh/release/bokeh-tables-2.1.1.min.js" integrity="sha384-Dc9u1wF/0zApGIWoBbH77iWEHtdmkuYWG839Uzmv8y8yBLXebjO9ZnERsde5Ln/P" crossorigin="anonymous"></script>
<script type="text/javascript" src="https://cdn.bokeh.org/bokeh/release/bokeh-gl-2.1.1.min.js" integrity="sha384-cT9JaBz7GiRXdENrJLZNSC6eMNF3nh3fa5fTF51Svp+ukxPdwcU5kGXGPBgDCa2j" crossorigin="anonymous"></script>
<script type="text/javascript" src="https://cdn.bokeh.org/bokeh/release/bokeh-api-2.1.1.min.js" integrity="sha384-i2RsfqLVG6PTrWCD55m8pYN9N2XZRkYVASzqjzp79o0OpPmcp+APyuwCfItW7Kn2" crossorigin="anonymous"></script>
<script>
//The order of CSS and JS imports above is important.
</script>
</head>
<body>
</body>
<script>
// create a data source to hold data
var source = new Bokeh.ColumnDataSource({
data: { x: [], y: [] }
});
// make a plot with some tools
var plot = Bokeh.Plotting.figure({
title:'Example of Random data',
tools: "pan,wheel_zoom,box_zoom,reset,save",
height: 300,
width: 300
});
// add a line with data from the source
plot.line({ field: "x" }, { field: "y" }, {
source: source,
line_width: 2
});
// show the plot, appending it to the end of the current section
Bokeh.Plotting.show(plot);
function addPoint() {
// add data --- all fields must be the same length.
source.data.x.push(Math.random())
source.data.y.push(Math.random())
// notify the DataSource of "in-place" changes
source.change.emit()
}
var addDataButton = document.createElement("Button");
addDataButton.appendChild(document.createTextNode("Add Some Data!!!"));
document.currentScript.parentElement.appendChild(addDataButton);
addDataButton.addEventListener("click", addPoint);
addPoint();
addPoint();
</script>
</html>

Link JavaScript object within HTML

How would I be able to pull the data from the JS script within my HTML? I am wanting to pull the "Title", "Description", and "Link" objects and display them within my HTML code.
Here is the code:
<div class="roadMap" id="roadMap"></div>
<script src="/siteassets/bootstrap3/js/jquery-1.8.3.min.js"></script>
<script src="/publiccdnlib/PnP-JS-Core/pnp.min.js"></script>
<script type="text/javascript" src="/publiccdnlib/es6-Promise/es6-promise.auto.js"></script>
<script type="text/javascript" src="/publiccdnlib/fetch/fetch.min.js"></script>
<script src="/publiccdnlib/slick/slick.min.js"></script>
<script src="/publiccdnlib/CommonJS/CommonJS.js"></script>
<script src="/publiccdnlib/knockout/knockout.js"></script>
<script src="/publiccdnlib/knockout/knockout.simpleGrid.3.0.js"></script>
<script src="/publiccdnlib/toastr/toastr.min.js"></script>
<script src="/publiccdnlib/dialog/open-sp-dialog.js"></script>
<!--END Scripts for O365-->
<script>
$pnp.setup({
baseUrl: "https://fh126cloud.sharepoint.com/TrainingResourceCenter/O365Training"
});
$pnp.sp.web.lists.getByTitle("O365RoadMap").items.get().then(function(z) {
console.log(z);
var result = z.results.map(a => ({
Title: `${a.Title}`,
Description: `${a.Description}`,
Link: `${a.Link}`
}))
console.log(result);
document.getElementById("roadMap").innerHTML = JSON.stringify(result, null, 2)
})
</script>
<html lang="en">
<body>
<div>
/* Code goes here */
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</body>
</html>
I see you are using jQuery so I will answer relative to it.
Using jQuery you can put text wherever you want using the text method.
For example, if you want to put the Title data in your div you could do:
$("div").text(result.Title);
The code above will place result.Title in every div on the page (which you only have one of.).
There are so many jQuery methods you could use as-well, such as append, prepend, and html. Append will put the text after the existing content of an element. Prepend puts the text before existing content of an element. Html with replace the html inside of an element.
So if you wanted to construct the HTML elements then place them on the DOM (the web page) you could do:
$(document).ready(function(){
var head = '<h1>${result.Title}</h1>';
var desc = '<p>${result.Description}</p>';
var link = '<a src="${result.Link}">${result.Link}</a>';
$("div").html(head + desc + link);
});
To put your Title, Description, and Link on the DOM. Hope this help you, good luck!

jqPlot : $.jqPlot is not a function error

I need to create charts on a website.
In my HTML code i have created a div with an ID.
This is my HTML code :
<script src="/js/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="/styles/jquery.jqplot.min.css" />
<script language="javascript" type="text/javascript" src="/js/jquery.jqplot.js"></script>
<script language="javascript" type="text/javascript" src="/js/graph.js"></script>
<body>
<div id="graph" style="height:400px;width:300px;></div> //i want to have my chart here
</body>
In the js code i have only wrote an exemple from the official website of jqPlot :
$(document).ready(function() {
var chart_data = [[[1, 2],[3,5.12],[5,13.1],[7,33.6],[9,85.9],[11,219.9]]];
var chart_opt = {
title:'Graph',
axes:{yaxis:{min:-10, max:240}},
series:[{color:'#5FAB78'}]
};
$.jqplot('graph', chart_data, chart_opt);
});
So my problem is that i have an error on the browser's console : $.jqplot is not a function
Any idea ?
You are getting this error because you have the jqplot inside the $(document).ready(function(). Try something like this.
$(document).ready(function(){
GetChart();
});
function GetChart(){
var chart_data = [[1, 2],[3,5.12],[5,13.1],[7,33.6],[9,85.9],[11,219.9]];
$('#graph').jqplot([chart_data], {
title:'Default Bar Chart',
seriesDefaults:{
renderer:$.jqplot.BarRenderer
},
axes:{
xaxis:{
renderer: $.jqplot.CategoryAxisRenderer
}
}
});
}
Here is a working example - https://jsfiddle.net/xrnfqax3/
For this example to work, you will need to add the following references to your project-
jquery.min.js
jquery.jqplot.js
jquery.jqplot.css
jqplot.barRenderer.js
jqplot.barRenderer.min.js
jqplot.categoryAxisRenderer.js
jqplot.categoryAxisRenderer.min.js
Make sure that jquery-*.js order is before jqPlot.js.
and use language="javascript" type="text/javascript" on all scripts tag.
Best Regards

Jquery age verification script on BigCommerce, not working

I have used this same script on other websites and I just can't get it to work with my current project at http://www.torchwoodworks.com/. After delving into the firefox script debugger, it seems to be a problem with cookies.js not loading, as i'm getting a "$.cookie is not a function" error. I know i've had troubles in the past if jquery itself is loaded after this script, but that is not the case. As far as I can tell, it should be working.
Here is my code added to the BigCommerce header:
<!--Scripting for age verification, added LM 02/03/15 -->
<script type="text/javascript" src="http://store-kdukte.mybigcommerce.com/template/js/jquery.min.js"></script>
<script type="text/javascript" src="http://store-kdukte.mybigcommerce.com/template/js/lightbox_me.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-migrate-1.2.1.js"></script>
<script type="text/javascript" src="http://store-kdukte.mybigcommerce.com/template/js/cookies.js"></script>
<link rel="StyleSheet" href="http://store-kdukte.mybigcommerce.com/template/js/verify.css" type="text/css" media="all">
<script type="text/javascript">
$(window).load(function () {
// Halt! Age identification
// Includes checking for and setting a cookie with cookies.js
if(!$.cookie('legal-age')){
var date = new Date();
var minutes = 30;
date.setTime(date.getTime() + (minutes * 60 * 1000));
$('#verify').lightbox_me({
centered: true,
closeClick: false,
closeESC: false,
overlayCSS: {background: 'black', opacity: 1},
closeSelector: '.v-yes',
onClose: function(){
$.cookie('legal-age','yes', {domain: 'torchwoodworks.com', path: '/', expires: date});
}
});
e.preventDefault();
}
});
</script>
<!--end Scripting for age verification -->
Any insight would be appreciated. Thanks!
To use $.cookie you need to include jquery cookie plugin

Splitting up a Javascript snippet

The recommendation of the open source web analysis software Piwik is to put the following code at the end of the pages you want to track, directly before the closing </body> tag:
<html>
<head>
[...]
</head>
<body>
[...]
<!-- Piwik -->
<script type="text/javascript">
var pkBaseURL = (("https:" == document.location.protocol) ? "https://piwik.example.com/" : "http://piwik.example.com/");
document.write(unescape("%3Cscript src='" + pkBaseURL + "piwik.js' type='text/javascript'%3E%3C/script%3E"));
</script><script type="text/javascript">
try {
var piwikTracker = Piwik.getTracker(pkBaseURL + "piwik.php", 4);
piwikTracker.trackPageView();
piwikTracker.enableLinkTracking();
} catch( err ) {}
</script><noscript><p><img src="http://piwik.example.com/piwik.php?idsite=4" style="border:0" alt="" /></p></noscript>
<!-- End Piwik Tracking Code -->
</body>
</html>
Under the following assumptions:
https is never used
we don't care that the page loads slower because the script is loaded before the DOM
is it okay to convert the above to the following:
HTML file:
<html>
<head>
[...]
<script src="http://piwik.example.com/piwik.js" type="text/javascript"></script>
</head>
<body>
[...]
<noscript><p><img src="http://piwik.example.com/piwik.php?idsite=4" style="border:0" alt="" /></p></noscript>
</body>
</html>
Custom Javascript file with jQuery:
$(document).ready(function() {
try {
var piwikTracker = Piwik.getTracker("http://piwik.example.com/piwik.php", 4);
piwikTracker.trackPageView();
piwikTracker.enableLinkTracking();
}
catch(err) {
}
}
Are there any differences?
You are deferring the tracking until the page is fully loaded. Inline Javascript is executed when the browser finds it, so you'll have different number of visits depending on where you call piwikTracker.trackPageView();. The latter you call it, the lesser number of visits/actions will be counted.
Now, what do you consider a visit/action? If a user click on a link on your page, before the page fully loads, do you consider it a visit?

Categories

Resources