I am currently using the code repository D3-timeseries at https://github.com/mcaule/d3-timeseries
The problem is that I only want to draw one time series but the plot I get is
From the scroll bar of the attached picture, you can see that it creates tons of the same time series plot.
Below you can see my code:
<!DOCTYPE html>
<html>
<meta charset="utf-8" />
<style>
.dot {
stroke: #000;
}
</style>
<meta http-equiv="cache-control" content="max-age=0" />
<meta http-equiv="cache-control" content="no-cache" />
<meta http-equiv="expires" content="0" />
<meta http-equiv="expires" content="Tue, 01 Jan 1980 1:00:00 GMT" />
<meta http-equiv="pragma" content="no-cache" />
<body>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="d3-timeseries/src/d3_timeseries.js"></script>
<link rel="stylesheet" type="text/css" href="d3-
timeseries/src/d3_timeseries.css">
<script type="text/javascript">
//var margin = { top: 50, right: 50, bottom: 50, left: 50 };
function main() {
d3.json("PeriodDetection-result.json", function(error, data) {
if (error) {
console.log(error);
return;
}
data.forEach(function(d){ d.newDate = new Date(d.newDate * 1000)
})
var chart = d3.timeseries()
.addSerie(data,{x:'newDate',y:'temp'},
{interpolate:'monotone',color:"#333"})
.width(1000)
chart("body")
var show = true;
});
}
setInterval(function() { main(); }, 250);
main();
</script>
</body>
</html>
My date file looks like
I attach the put a simplified json file below as well, which should be saved as PeriodDetection-result.json.
[{"newDate":519955200,"temp":6.6},{"newDate":520041600,"temp":6},{"newDate":520128000,"temp":6.9},{"newDate":520214400,"temp":7.7},{"newDate":520300800,"temp":8},{"newDate":520387200,"temp":3.9},{"newDate":520473600,"temp":0.8},{"newDate":520560000,"temp":2.8},{"newDate":520646400,"temp":8},{"newDate":520732800,"temp":9.8},{"newDate":520819200,"temp":11.4},{"newDate":520905600,"temp":8.6},{"newDate":520992000,"temp":5.2},{"newDate":521078400,"temp":6.6},{"newDate":521164800,"temp":5.7},{"newDate":521251200,"temp":4.6},{"newDate":521337600,"temp":5.8},{"newDate":521424000,"temp":7},{"newDate":521510400,"temp":4.8},{"newDate":521596800,"temp":4.4},{"newDate":521683200,"temp":4.4},{"newDate":521769600,"temp":7.9},{"newDate":521856000,"temp":10.6},{"newDate":521942400,"temp":5},{"newDate":522028800,"temp":7.6},{"newDate":522115200,"temp":9.2},{"newDate":522201600,"temp":9.7},{"newDate":522288000,"temp":8.8},{"newDate":522374400,"temp":6.8},{"newDate":522460800,"temp":9.4},{"newDate":522547200,"temp":11},{"newDate":522633600,"temp":2.5},{"newDate":522720000,"temp":2.1},{"newDate":522806400,"temp":5.4},{"newDate":522892800,"temp":6.2},{"newDate":522979200,"temp":7.8},{"newDate":523065600,"temp":7.4},{"newDate":523152000,"temp":9.3},{"newDate":523238400,"temp":9.3},{"newDate":523324800,"temp":9.5},{"newDate":523411200,"temp":8.5},{"newDate":523497600,"temp":10},{"newDate":523584000,"temp":7.7},{"newDate":523670400,"temp":9.3},{"newDate":523756800,"temp":9.1},{"newDate":523843200,"temp":3.5},{"newDate":523929600,"temp":3.6},{"newDate":524016000,"temp":2.5},{"newDate":524102400,"temp":1.7},{"newDate":524188800,"temp":2.7},{"newDate":524275200,"temp":2.9},{"newDate":524361600,"temp":5.3},{"newDate":524448000,"temp":7.7},{"newDate":524534400,"temp":9.1},{"newDate":524620800,"temp":9.4},{"newDate":524707200,"temp":7.3},{"newDate":524793600,"temp":8.4},{"newDate":524880000,"temp":9.2},{"newDate":524966400,"temp":6.6},{"newDate":525052800,"temp":9.7},{"newDate":525139200,"temp":12.4},{"newDate":525225600,"temp":10.2},{"newDate":525312000,"temp":5.9},{"newDate":525398400,"temp":7.1},{"newDate":525484800,"temp":7.5},{"newDate":525571200,"temp":9.7},{"newDate":525657600,"temp":12.2},{"newDate":525744000,"temp":5.6},{"newDate":525830400,"temp":5.4},{"newDate":525916800,"temp":8.3},{"newDate":526003200,"temp":10.6},{"newDate":526089600,"temp":9.1},{"newDate":526176000,"temp":11.3},{"newDate":526262400,"temp":10.9},{"newDate":526348800,"temp":8.9},{"newDate":526435200,"temp":6.3},{"newDate":526521600,"temp":9},{"newDate":526608000,"temp":6.1},{"newDate":526694400,"temp":9.1},{"newDate":526780800,"temp":9.6},{"newDate":526867200,"temp":6},{"newDate":526953600,"temp":10},{"newDate":527040000,"temp":11},{"newDate":527126400,"temp":6.2},{"newDate":527212800,"temp":8.3},{"newDate":527299200,"temp":11.3},{"newDate":527385600,"temp":11.3},{"newDate":527472000,"temp":6.7},{"newDate":527558400,"temp":6.6},{"newDate":527644800,"temp":11.4},{"newDate":527731200,"temp":6.9},{"newDate":527817600,"temp":10.6},{"newDate":527904000,"temp":8.6},{"newDate":527990400,"temp":11.3},{"newDate":528076800,"temp":12.5},{"newDate":528163200,"temp":9.9},{"newDate":528249600,"temp":6.9},{"newDate":528336000,"temp":5.5},{"newDate":528422400,"temp":7.8}]
Any help is highly appreciated!
Stupid error, in the code, just comment out this line,"setInterval(function() { main(); }, 250),then it will work.
You can also use Pondjs or Momentjs to do this, its much cleaner, but can be a little tedious. It deals with these points and auto plots them base don how to create the code based on chart implementation chart by using react-timeseries-charts. They both work well together with pond or moment.
I am trying to place some Javascript code inside a .js file so that I can call it from multiple HTML pages. The problem is, my Javascript code works fine if I place it in a script within the HTML page, but when placed in a external .js file, it simply does not work. I've looked at these questions quite a few times and still cannot find the error.
Here's the HTML page:
<html>
<head>
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<meta name="msapplication-tap-highlight" content="no" />
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
<link rel="stylesheet" type="text/css" href="css/global.css" />
<link rel="stylesheet" type="text/css" href="css/contacts.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<script type="text/javascript" src ="js/contactsModule.js"></script>
<title>Hall of Heroes</title>
</head>
<body onload = "contactsModule.getContacts();">
<!-- Global Header Starts Here -->
<div class="header">
<div class="cancel">
<img src="img/cancel.png" /><!-- if screen is triggered from onboarding, then go back to onboarding screen instead of home -->
</div>
<h1>My Contacts</h1>
</div>
<div class="wrapper">
<h3>A</h3> <!-- letter header goes here -->
<!-- Begin Contact Unit -->
<div class="feed">
</div>
<!-- End Contact Unit -->
</div>
</body>
</html>
And here is the .js file:
var contactsModule = (function($){
function getContacts()
{
dbContacts();
}
function displayContacts(contactArray){
window.alert('displayContacts now running!');
var jsonObject = $.parseJSON(contactArray);
jsonObject.forEach(function (dat) {
//Begin Contact Unit
$('.feed')
.append('<div class="feed-img"><img src="' + dat.avatarUrl + '"/>\
</div><div class="feed-text"><p><span class="name_highlight">\
' + dat.firstName + ' ' + dat.lastName + '</span></p></div>');
//End Contact Unit
});
}
function dbContacts() {
var avatarUrl;
var firstName;
var lastName;
$.ajax({
type: "GET",
url: "http://www.hallofheroesapp.com/php/contacts.php",
data: {avatarUrl: avatarUrl, firstName: firstName, lastName: lastName},
success: function (response) {
window.alert('AJAX ran successfully!');
displayContacts(response);
},
error: function(response){
alert("Error:" + response);
}
});
}
}(jQuery));
Thank you for your help!
You aren't returning anything from your IIFE. contactsModule will then not contain anything, ie equal undefined. Also just defining functions doesn't make those functions part of some object, with the exception of globally defined functions. You have to assign them, or define them as part of an object literal
Your code should be something like
var contactsModule = (function($){
return {
getContacts: function() {
/* code */
},
displayContacts: function(contactArray){
/* code */
}
dbContacts function() {
/* code */
}
};
}(jQuery));
How about using
$(document).ready(function(){
///// your code here...
});
... change ...
<body onload = "contactsModule.getContacts();">
... to ...
<body>
... and add event handler using jquery ...
(function($){
function getContacts()
{
dbContacts();
}
/* ... etc ... */
// use jquery's onready handler
$(getContacts);
}(jQuery));
Had the same problem. Easy thing when you research on google.
Your Js code loads before the DOM loads. Which should be the other way around. So you have to use this
$(document).ready(function(){
//only jQuery is recommended, global JavaScript functions outside!
});
Also JavaScript
document.addEventListener("DOMContentLoaded", function(event) {
//global function outside!
});
Only this way you can be sure that your DOM is loaded before your jquery finds your elements.
I am adding code to my website so that my logo resizes appropriately.
I wrote a JavaScript function for the logo to resize based on the window width. Unfortunately, when I do this, the logo just resumes to its original size. If I apply an inline style to the image to set the width, it works but if the size of the image is dictated by the CSS file or by my JavaScript, the logo just remains its original size.
Here is the head of my index.html file:
<!DOCTYPE html>
<html lang="en" class="no-js">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Computer Repair and Services</title>
<meta name="description" content="" />
<meta name="keywords" content="" />
<meta name="author" content="Athena Harting" />
<link rel="shortcut icon" href="../favicon.ico">
<link rel="stylesheet" type="text/css" href="css/default.css" />
<link rel="stylesheet" type="text/css" href="css/component.css" />
<script src="js/modernizr.custom.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="js/MobileMenu.js"></script>
<script src="js/WidthMargin.js"></script>
<script src="js/MobileLogo.js"></script>
</head>
<body>
<div class="container">
<header>
<div class="logospace" id="logospace"><img src="imgs/Logo_Glossy_Web.png"/></div>
<h1>Athenian Computers<span>Founded and operated out of Shoreline, WA</span></h1>
</header>
You will notice that I have a MobileLogo.js and a default.css file referenced in this file.
Here is the relevant code that should be applying to my logo within my default.css file:
/* TEST STUFF */
.logospace {
width: 200px;
height: 200px;
}
And here is my MobileLogo.js file. This file should be appropriately resizing my logo based on the width of the page:
var resize = function(){
var wi = $(window).width();
if(wi <= 519){
$("#logospace").css({
'width' : '50px'
'height' : '50px'
});
}
else if (wi <= 799){
$("#logospace").css({
'width' : '100px'
'height' : '100px''
});
}
else if (wi <= 980){
$("#logospace").css({
'width' : '150px'
'height' : '150px'
});
}
else{
$("#logospace").css({
'width' : '200px'
'height' : '200px'
});
}
}
$(window).ready(function() {
resize();
$(window).resize(function() {
resize();
});
});
Can anyone tell what's wrong?
You have an extra ' in 'height' : '100px''. You may want to remove it.
There are other issues except the extra ': You're missing commas between the style definitions:
$("#logospace").css({
'width' : '50px', <-------- HERE, since it seems tough to see for some
'height' : '50px'
});
The missing comma throws syntax errors and that is halting your entire code. These are missing in all your calls to css().
EDIT:
The div around the image is resizing as it should; when the window resizes, the div resizes. The problem is that the image is not, as displayed in my fiddle. I made the height of the div larger, to display the problem.
To fix this, assign the id or class (or both) to the image, not its parent div.
I am trying to remove all the links from a parsed site which has then had a div removed and placed in the main code. The problem is that I am trying to remove all the 'href' links in the extracted div but am unable to get anywhere. I have tried using 'CSS' and works but only in chrome and I have to use IE. I have looked at 'php simple html dom' parser to see if i could do it before the file is saved but can't get anything to work. so my last resort is to use 'jquery' but the problem is that the links to remove is being extracted from the file and is not directly in the code. If anyone could help me I would really appreciate it. below is the code I am using.
<head>
<meta http-equiv="content-type" content="text/html;charset=UTF-8">
<meta http-equiv="content-language" content="en">
<meta name="viewport" content="width=500" />
<title>example News</title>
<link rel="stylesheet" type="text/css" href="site/wwwRand1.css">
<?php
include( 'site/simple_html_dom.php');
$html=file_get_html( 'http://example.com/home.php');
$html->save('site/result.htm')
?>
<script type="text/javascript" src="site/jquery.js"></script>
<script type="text/javascript">
$('document').ready(function() {
$('#postsArea').load('site/result.htm #postsArea');
});
</script>
</head>
<body>
<div id="wrap">
<div id="postsArea"></div>
</div>
</body>
Just remove the href attribute from the <a /> tags
$("#postsArea").load( "site/result.htm", function() {
$("#postsArea a").removeAttr("href")
});
If you still want the tags to appear clickable...
$("#postsArea a").removeAttr("href").css("cursor","pointer");
Hope this helps
Try this:
$('document').ready(function () {
$.ajax({
url : 'site/result.htm',
dataType: 'html',
success : function(html){
$html = $(html).find(a).attr("href", "");
$("#postsArea").html($html);
},
error : function(){
$("#postArea").html("<div>No Data Found.</div>");
}
})
});
Here's how I did it:
$(function() {
$('a[href]').each(function() {
var link = jQuery(this);
link.after(jQuery('<span/>').text(link.text()));
link.remove();
});
});
It replaces Foo with <span>Foo</span>.
I'm trying to build some jQuery functionality into my site and I've caught a snag. I need to split a jQuery block style menu into 2 & possibly 3 columns vs having them all in one column on top of each other. I'll post as much as I can in here. I'm sure I'm missing something blatantly obvious. I'll start with the website I'm going off of:
http://upsidestudio.com/web/splitcol/2/
Now the CSS I've got:
.tabs {
width: 700px;
font-weight: ;
margin: 0;
padding: 0px;
float: left;
}
the <head> of my html: (I think my errors would be in here: I'm new to jQuery/Javascript)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>My Site</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<meta name="author" content="" />
<!-- !Stylesheets -->
<link rel="stylesheet" type="text/css" href="css/screen.css" media="all" />
<!--[if IE 7]><link rel="stylesheet" href="css/ie7.css" type="text/css" media="screen" /><![endif]-->
<!--[if lte IE 8]><link rel="stylesheet" href="css/ie8.css" type="text/css" media="screen" /><![endif]-->
<!-- !jQuery -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script src="http://cdn.jquerytools.org/1.2.5/all/jquery.tools.min.js"></script>
<script>
// execute your scripts when the DOM is ready. this is mostly a good habit
$(function() {
// initialize scrollable
$("#browsable").scrollable({circular: true}).navigator().autoscroll({
interval: 10000
});
// initialize scrollable together with the autoscroll plugin
var root = $("#scroller").scrollable({circular: true}).autoscroll({ autoplay: false });
// perform JavaScript after the document is scriptable.
$(function() {
// setup ul.tabs to work as tabs for each div directly under div.panes
$("ul.tabs").tabs("div.panes > div")
});
});
<!-- !jQuery Split Navigation -->
$(document).ready(function() {
$('.tabs').each(function() {
if($(this).is("ol")) { var ordered = true; }
var colsize = Math.round($(this).find("li").size() / 2);
$(this).find("li").each(function(i) {
if (i>=colsize) {
$(this).addClass('right_col');
}
});
if(ordered) {
$(this).find('.right_col').insertAfter(this).wrapAll("<ol class='tabs' start='" + (colsize+1) + "'></ol>").removeClass("right_col");
} else {
$(this).find('.right_col').insertAfter(this).wrapAll("<ul class='tabs'></ul>").removeClass("right_col");
}
});
});
</script>
</head>
And Lastly...My Html section.
<!--THE TABS-->
<hr width="575" size="4" noshade align="left">
<ul class="tabs">
<li>What We Do</li>
<li>How It Works</li>
<li>FAQ</li>
<li>The Ajungo Team</li>
<li>Advertise</li>
</ul>
<hr width="575" size="4" noshade align="left"><br/><br/>
<!--TAB PANES COME IN BELOW THIS-->
Well, the biggest problem I can see there is that you've got a HTML comment stuck in the middle of the script block:
<!-- !jQuery Split Navigation -->
Remove that, then adding
.tabs {
margin-bottom: 20px;
}
And you can see that the ul.tabs list has been split in two. However, there a few inefficiencies in the script. It can be rewritten much, much more cleanly like this:
$('.tabs').each(function() {
var t = $(this), // Store a copy of both $(this) and t.children(),
children = t.children(), // to avoid calling the jQuery function too much
// Create a clone of the original list, then empty it and insert it after the original
secondList = t.clone(false).empty().insertAfter(this),
// Calculate the number of elements to move to the second list
// ie. half the number of elements in the list, divided by two and rounded up
length = Math.ceil(children.length / 2);
// Move half the children of the original list to the new one
children.slice(length).appendTo(secondList);
// If the list is an ordered list, let the list start at the correct position
if(this.nodeName === 'OL'){
secondList.attr('start', length + 1);
}
});
See: http://www.jsfiddle.net/yijiang/Tf4HT/1/