I downloaded this project from github https://github.com/mcaule/d3-timeseries , but I don't know how to run this project to display the d3 graph. There are examples in this site: http://mcaule.github.io/d3-timeseries/.
For example I was thinking of writing a html page to run the project but I don't know how.
A working prototype for you -
<!DOCTYPE html>
<html lang="en-us">
<head>
<link rel="stylesheet" type="text/css" href="https://mcaule.github.io/d3-timeseries/dist/d3_timeseries.min.css">
</head>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.10.0/d3.min.js"></script>
<script src="https://mcaule.github.io/d3-timeseries/dist/d3_timeseries.min.js"></script>
<script src="https://mcaule.github.io/d3-timeseries/dist/create-example-data.js"></script>
<section class="main-content">
<h3>
Difference
</h3>
<!-- <div class="chartContainer"> -->
<!-- <p class="codepen" data-default-tab="result" data-embed-version="2" data-height="500" data-pen-title="d3-timeseries Example 1" data-slug-hash="wPpJWr" data-theme-id="dark" data-user="mcaule"> -->
<div id="chart"></div>
<!-- </p> -->
<script>
var data = createRandomData(80,[0,1000],0.01)
// [{date:new Date('2013-01-01'),n:120,n3:200,ci_up:127,ci_down:115},...]
var chart = d3_timeseries()
.addSerie(data.slice(0,60),{x:'date',y:'n'},{interpolate:'linear',color:"#a6cee3",label:"value"})
.addSerie(data.slice(50),
{x:'date',y:'n3',ci_up:'ci_up',ci_down:'ci_down'},
{interpolate:'monotone',dashed:true,color:"#a6cee3",label:"prediction"})
.width(820)
chart('#chart')
</script>
<!-- </div> -->
</section>
</body>
copy it as it is and paste it in an .html file then open that file in browser, everything would be working perfectly fine, and if it is not then please let me know.
Related
Hy Guys
I have a problem with my Javascript. Since I implementet Bootstrap it won't work anymore. Even simple things like an alert with an onclick function won't work.
Here is my code:
Implementet Scripts
<link type="text/css" href="../CSS/main1.css" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">
<script type="text/javascript" src="../JS/main.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
Simple HTML
<!DOCTYPE html>
<html>
<head>
<?php require 'scripts.php'; ?>
</head>
<header>
<?php include 'header.php'; ?>
</header>
<body>
<div class="container-fluid d-block d-sm-none">
<!-- LAYOUT FOR MOBILE -->
<div class="row">
<div class="col">
<button class="s-button" id="show-login" onclick="test()">Login</button>
</div>
</div>
<div class="row">
<div class="col">
<button class="s-button">Register</button>
</div>
</div>
</div>
</body>
</html>
Javascript
function test(){
alert('hallo');
}
I am programming since a bit know so it could be possible that I'm overlooking somthing simple but I'm not seeing it.
Make sure to put the JS function before the actual call in HTML. Also check your JS console to see if there are any errors there.
your javascript should load though, and you can just use this directly <script src="../JS/main.js"></script>
and ensure it is properly addressed i.e the JS is really uppercase.
and you could also put the main.js file above the bootstrap js file
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
Try this:
Using <script type="text/javascript" src="JS/main.js"></script> as the link to your HTML, assuming the JS directory is in the same directory as your index.html file.
Put your links to external stuff in the HTML head. (It was unclear from your post whether or not you did.) You don't need to put them at the end of your HTML if you use $(document).ready(function(){ //do stuff here }); which you should use anyway because jQuery is already included in your project since you're using Bootstrap. (You can declare your test function outside of the document ready call, and should.)
I am pretty sure the Bootstrap CSS link you were using was corrupted (or something), so I changed that to use MaxCDN.
My guess is your CSS isn't working either. Try changing something obvious with it to check. The '..' in a link means to move 'back' one directory, so chances are the browser is looking for this file somewhere that it doesn't exist.
Take a look at this for more information about how to link to files, and consider trying an HTML validator.
Please let me know if you have any questions or if this doesn't work for you. When I started web development, I would spend hours trying to figure this stuff out.
So your HTML would look like:
<!DOCTYPE html>
<html>
<head>
<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
<meta content="utf-8" http-equiv="encoding">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link type="text/css" href="../CSS/main1.css" rel="stylesheet" />
<!-- GOOGLE FONTS -->
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
<!-- JQUERY -->
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<!-- BOOTSTRAP -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
crossorigin="anonymous"></script>
<!-- FONT AWESOME -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU"
crossorigin="anonymous">
<script type="text/javascript" src="JS/main.js"></script>
<?php require 'scripts.php'; ?>
</head>
<header>
<?php include 'header.php'; ?>
</header>
<body>
<div class="container-fluid d-block d-sm-none">
<!-- LAYOUT FOR MOBILE -->
<div class="row">
<div class="col">
<button class="s-button" id="show-login" onclick="test()">Login</button>
</div>
</div>
<div class="row">
<div class="col">
<button class="s-button">Register</button>
</div>
</div>
</div>
</body>
</html>
For bonus points: if you need to see the console or to know anything about what is going on in either Firefox or Chrome, hit ctrl shift i and click around. If you think something has gone wrong, just hit the refresh button.
So after spending another hour figuring out what is wrong with the code I found out that the code is correct form day one. The problem is that I am using Firefox Mobile Emulator to test the app and this won't show any alert window. When I deactivate the emulation and run the website as normal the alert box will show up as the button is clicked. So now I have installed Chrome and tested it there (also with the mobile emulator) and it works fine. So Firefox knows the problem (as forums post show) but they didn't fix it yet.
Anyway thank you all for the help.
What follows is the HTML file that is passed to displayDialogAsync
<!DOCTYPE html>
<!-- Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license.
4 See LICENSE in the project root for license information -->
<html>
<head>
<title></title>
<meta charset="utf-8" />
<script src="https://appsforoffice.microsoft.com/lib/1/hosted/office.js" type="text/javascript"></script>
<script type="text/javascript" src="Scripts/jquery-3.3.1.min.js"></script>
<!-- For the Office UI Fabric, go to http://aka.ms/office-ui-fabric to learn more. -->
<link rel="stylesheet" href="Content/fabric.min.css">
<link rel="stylesheet" href="Content/fabric.components.min.css">
<script>
Office.initialize = function(reason) {
write();
}
function write() {
// If I uncomment the line below, the text in the dialog box will NOT be updated
//var email = Office.context.mailbox.item.sender.emailAddress;
$("#firstName").text("John");
$("#lastName").text("Doe");
$("#gender").text("Male");
$("#knownas").text("John Doe");
$("#citizenship").text("Antarctica");
$("#language").text("Esperanto");
}
</script>
</head>
<body>
<div class="ms-Gridc ms-font-xxl ms-fontColor-neutralSecondary ms-fontWeight-semilight">
<div class="ms-Grid-row">
<div class="ms-Grid-col"><span id="firstName"></span></div>
<div class="ms-Grid-col"><span id="lastName"></span></div>
<div class="ms-Grid-col"><span id="gender"></span></div>
</div>
<div class="ms-Grid-row">
<div class="ms-Grid-col"><span id="knownas"></span></div>
<div class="ms-Grid-col"><span id="citizenship"></span></div>
<div class="ms-Grid-col"><span id="language"></span></div>
</div>
</div>
</body>
</html>
Whenever I try to use anything from the Office JavaScript API I notice that my Dialog Box shows up blank.
In the sample, all I'm doing is assigning a value to a variable and the rest of the code stops working. No error messages appear on the console.
This is expected behavior. I found the following in the documentation for the dialog:
The messageParent function is one of only two Office APIs that can be called in the dialog box. The other is Office.context.requirements.isSetSupported.
I'm using a layer slider in my HTML site. When, I'm going to add this slider to a WordPress theme. It's not responding. Even, on the page view source the file path in the right direction. Why they aren't responding.
HTML code for the slider:
<!DOCTYPE html>
<html lang="en">
<head>
<link href="assets/layerslider/layerslider.min3831.css" rel="stylesheet"/>
</head>
<body>
<div id="homeSliderWrapper">
<div id="homeSliderInner" class="ls-bk-container" data-ride="make-layer-slider" data-id="1" data-version="1" data-src="assets/js/slider.js"></div>
</div>
<script src="assets/js/lib/jquery.min.js"></script>
<script src="assets/layerslider/layerslider.min1ee01ee0.js?v=u_3YRY7JXqEPApYnTt38DqqTzw01kqG41N4v5Osr03Y1"></script>
Now when I make them to dynamic for Wordpress theme. Code for WP theme:
<!DOCTYPE html>
<html lang="en">
<head>
<link href="<?php bloginfo('template_url'); ?>/assets/layerslider/layerslider.min3831.css" rel="stylesheet"/>
</head>
<body>
<h1>For test.</h1>
<div id="homeSliderWrapper">
<div id="homeSliderInner" class="ls-bk-container" data-ride="make-layer-slider" data-id="1" data-version="1" data-src="<?php bloginfo('template_url'); ?>/assets/js/slider.js"></div>
</div>
<script src="<?php bloginfo('template_url'); ?>/assets/js/lib/jquery.min.js"></script>
<script src="<?php bloginfo('template_url'); ?>/assets/layerslider/layerslider.min1ee01ee0.js?v=u_3YRY7JXqEPApYnTt38DqqTzw01kqG41N4v5Osr03Y1"></script>
</body>
</html>
When I checked view source code, all files get the right path. But why isn't it responding?
In wordpress to make your assets work correctly you have to use the functions.php and create a function that registers and loads the assets scripts styles etc.
The following link has examples and also explains in detail how https://developer.wordpress.org/themes/basics/including-css-javascript/
I am having trouble with a stupidly simple problem. I have an HTMl file that has successfully hooked up to a css file, but ever time I try something easy in Javascript, it doesn't do it. All of my files are in the same folder. I am running this off of Notepad ++
enter code here
<!DOCTYPE html>
<html>
<head>
<link rel='stylesheet' type='text/css' href='stylesheet.css'/>
<script type='text/javascript' src='script.js'></script>
</head>
<body>
<div class="header">
</div>
<div class="main">
<div id="comic"></div>
<div id="caption"></div>
<div id="prompt">
<h3>Hello, world!</h3>
<div class="btn" id="yes"><img src="YESsmall.jpg"/></div>
<div class="btn" id="no"><img src="NOsmall.jpg"/></div>
</div>
</body>
</html>
And my Javascript looks like this:
$(document).ready(function() {
$('.main').hide();
});
what on earth have I done wrong?
I don't see you loading jQuery (or anything else providing a $). You can use a jQuery provided by a content delivery network (as described here) by adding
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
(or similar, depending on what version you need/want) before your other <script>
I am trying to experiment with jQuery mobile, but can't seem to get started.
I have the following HMTL file hosted on a local server:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
</head>
<body>
</body>
</html>
Which is causing
Javascript error: undefined SECUIRTY_ERR: DOM Exception 18
when accessed from my iPhone from http://192.168.1.1:8000/mobile.html
Did you link the CSS stylesheet file as well before the jquery script include tags?
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.css" />
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.js"></script>
Also, in order for the page to show, you must contain content into containers like this:
<body>
<div data-role='page'>
<div data-role='header'>
Header goes here
</div>
<div data-role='content'>
Content goes here
</div>
</div>
</body>