New to html/css/js and nvd3 so this may be a noob question.
I have an html doc that loads fine with a nvd3 chart that is drawn with a function drawChart(). However when I try to use jquery and I put drawChart() into $(document).ready, the chart does not load?
Why is this happening?
Here is the HTML code:
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>Multi Bar Chart</title>
<link href="../src/nv.d3.css" rel="stylesheet" type="text/css">
<style>
body {
overflow-y:scroll;
}
text {
font: 12px sans-serif;
}
#chart1 {
height: 500px;
margin: 10px;
min-width: 100px;
min-height: 100px;
}
</style>
</head>
<body>
<div>
<h1 style="text-align: center;">Title</h1>
</div>
<div id="chart1" class='with-3d-shadow with-transitions'>
<form class="form-inline" style="text-align: center;">
<div class="btn-group">
<button class="btn dropdown-toggle" data-toggle="dropdown">dropdown<span class="caret"></span></button>
</div>
</form>
<svg></svg>
</div>
<script src="../lib/d3.v3.js"></script>
<script src="../nv.d3.js"></script>
<script src="../src/tooltip.js"></script>
<script src="../src/utils.js"></script>
<script src="../src/models/legend.js"></script>
<script src="../src/models/axis.js"></script>
<script src="../src/models/multiBar.js"></script>
<script src="../src/models/multiBarChart.js"></script>
<script src="stream_layers.js"></script>
<script src="multiBarChart3.js"></script>
<script src="../src/jquery-2.1.1.js"></script>
</body>
</html>
Here is the javascript:
function drawChart(){
var test_data = stream_layers(3,128,.1).map(function(data, i) {
return {
key: 'Stream' + i,
values: data
};
});
nv.addGraph(function() {
var chart = nv.models.multiBarChart()
.margin({bottom: 100})
.transitionDuration(300)
.delay(0)
.rotateLabels(0)
.groupSpacing(0.1)
;
chart.multibar
.hideable(true);
chart.xAxis
.axisLabel("X")
.tickFormat(d3.format('d'));
chart.yAxis
.axisLabel("Y")
.tickFormat(d3.format(',.1f'));
chart.stacked(true);
d3.select('#chart1 svg')
.datum(test_data)
.call(chart);
nv.utils.windowResize(chart.update);
chart.dispatch.on('stateChange', function(e) { nv.log('New State:', JSON.stringify(e)); });
return chart;
});
};
//$(function(){
drawChart();
//});
Related
New to Javascript and have spent hours on this problem :/
I want to implement a smooth scrolling effect to move to different sections of a webpage. I am using this piece of javascript.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$('a').on('click', function(e) {
if (this.hash !== '') {
e.preventDefault();
const hash = this.hash;
$('html, body, .main')
.animate({
scrollTop: $(hash).offset().top
}, 800);
}
});
This is the basic structure
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body style="margin-left: 30%; margin-right: 30%">
<main>
<div class="contactme-button">Contact me</div>
<div class="section-1" style="width: 100%; height: 1000px; background-color: grey; display: block;"> </div>
<div class="contactme-button-2">Contact me</div>
<div class="section-1" style="width: 100%; height: 1000px; background-color: blue; display: block;"> </div>
<div class="contactme-section" id="contactme" style="width: 100%; height: 100px; background-color: grey;">CONTACT ME</div>
<div class="section-1" style="width: 100%; height: 1000px; background-color: black; display: block;"> </div>
</main>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$('a').on('click', function(e) {
if (this.hash !== '') {
e.preventDefault();
const hash = this.hash;
$('html, body, .main').animate({
scrollTop: $(hash).offset().top
}, 800);
}
});
</script>
</html>
(there is more content in there but that is the basic structure that is giving me grief)
I discovered that in
.main{
overflow-x: hidden;
}
is stopping the normal operation of the scrolling and cause the second link to scroll to a random spot
There's a CSS declaration that may help here:
.your-anchor-element-class {
scroll-margin-top: 36px; // <-- your value here
}
Browser support: Works natively in Chrome, FF, Edge, Opera. Supported in Safari with scroll-snap-margin-top.
MDN docs.
Credit to Josh Comeau for pointing this out.
I am trying to make buttons and the "dot-menu" in slick slider visible.
My example in jsfiddle looks OK, though the "dot-menu" underneath the items is missing: my slick example
In "real live" my implementation looks like this:
<html>
<head>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.css" />
<script src="https://code.jquery.com/jquery-1.11.0.min.js" type="text/javascript"></script>
<script type="text/javascript" src="https://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js"></script>
<style >
.variants {
cursor: pointer;
border: 1px solid #CDCDCD;
width: 192px;
height: 223px;
float: left;
}
</style>
</head>
<body>
<div class="variants-container">
<div class="variants">test</div>
<div class="variants">test</div>
<div class="variants">test</div>
<div class="variants">test</div>
</div>
<script type="text/javascript" src="https://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js"></script>
<script type="text/javascript">
$('.variants-container').slick({
infinite: true,
slidesToShow: 3,
slidesToScroll: 3
});
</script>
</body>
</html>
There are buttons on top of the item set instead of a nice round buttons valigned and on top of the left item.
Desired implementation:
How can I acchive the desired state of the buttons and also show dot indicators on the bottom of each set?
The below code works as your expecting, the problem was you're including the jquery files twice, once in the head and once at the end of the body. Also you forgot to include the "slick-theme.css" after "slick.css"
To get the dots at the bottom of the carousel, according to the docs, simply add dots: true in settings
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick-theme.css" />
<html>
<head>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.css" />
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick-theme.css" />
<style>
html,
body {
padding: 20px;
background-color: #CCC;
}
.variants {
cursor: pointer;
border: 1px solid #CDCDCD;
width: 192px;
height: 223px;
float: left;
}
</style>
</head>
<body>
<div class="variants-container">
<div class="variants">test</div>
<div class="variants">test</div>
<div class="variants">test</div>
<div class="variants">test</div>
</div>
<script src="https://code.jquery.com/jquery-1.11.0.min.js" type="text/javascript"></script>
<script type="text/javascript" src="https://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.variants-container').slick({
infinite: true,
slidesToShow: 3,
slidesToScroll: 3,
dots: true
});
});
</script>
</body>
</html>
I have a page with list of 18 links in sidebar, and on clicking a link main section image must change. By default first images is visible. I know it can be done. please help me.
Thanks
kristtee
This should be enough to get you moving in the right direction. This particular example uses jQuery and is only one of many ways to implement something like this.
<!DOCTYPE html>
<html>
<head>
<style>
.main img {
width: 500px;
height: 500px;
}
.thumbs img {
width: 50px;
height: 50px;
cursor: pointer;
}
</style>
</head>
<body>
<div class="main">
<img src="https://static.pexels.com/photos/20787/pexels-photo.jpg" alt="cat">
</div>
<div class="thumbs">
<img src="https://static.pexels.com/photos/104827/cat-pet-animal-domestic-104827.jpeg" alt="cat">
<img src="https://newevolutiondesigns.com/images/freebies/cat-wallpaper-24.jpg" alt="cat">
<img src="https://newevolutiondesigns.com/images/freebies/cat-wallpaper-7.jpg" alt="cat">
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('.thumbs img').on('click', function(){
var src = $(this).attr('src');
$('.main img').attr('src', src);
})
})
</script>
</body>
</html>
I have a NVD3 line graph based on a json file. It seems that the interactive guideline is sorted by the order in which each series appears in the JSON file. Is there any way to make this tooltip sorted by y value (at any given x-value) in decending order? One way to do this would be to manually sort the order in which the series data appears in the JSON file but I'm hoping there is perhaps some attributes in the interactiveguideline that would allow me to do this in NVD3 directly?
My html file looks like this:
<html>
<head>
<meta charset="utf-8">
<link href="nvd3/build/nv.d3.css" rel="stylesheet" type="text/css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.2/d3.min.js" charset="utf-8"></script>
<script src="nvd3/build/nv.d3.js"></script>
<style>
text {
font: 12px sans-serif;
}
svg {
display: block;
}
html, body, #chart, svg {
margin: 0px;
padding: 0px;
height: 100%;
width: 100%;
}
</style>
</head>
<body>
<div id="chart" class='with-3d-shadow with-transitions'>
<svg></svg>
</div>
<script>
d3.json("distance.json",function(error,data) {
nv.addGraph(function() {
var chart = nv.models.lineWithFocusChart()
.x(function(d,i) { return d[0] })
.y(function(d,i) {return d[1] });
chart.xAxis.tickFormat (function(d) {
return d3.time.format('%x')(new Date(d))
});
chart.x2Axis.tickFormat (function(d) {
return d3.time.format('%x')(new Date(d))
});
chart.yAxis.tickFormat(d3.format(',.2f'));
chart.y2Axis.tickFormat(d3.format(',.2f'));
chart.useInteractiveGuideline(true)
;
d3.select('#chart svg')
.datum(data)
.transition().duration(500)
.call(chart)
;
nv.utils.windowResize(chart.update);
return chart;
});
});
</script>
</body>
</html>
I want the input tag value to draw on canvas...the following code didn't work.
window.onload()=draw()
draw(){
var canvas=document.getElementById('canvas');
var ctx=canvas.getContext('2d');
var text=document.getElementById('item').value
ctx.fillStyle="#3e3e3e";
ctx.font="16px Arial";
ctx.fillText(text,50,50);
}
You can "listen" for any keyup events and draw the text on the canvas
Here's code and a Fiddle: http://jsfiddle.net/m1erickson/ug88R/
<!doctype html>
<html>
<head>
<script>
function draw(event){
var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var text=document.getElementById('item').value
ctx.clearRect(0,0,canvas.width,canvas.height);
ctx.fillStyle="#3e3e3e";
ctx.font="16px Arial";
ctx.fillText(text,50,50);
}
window.addEventListener("keyup", draw, true);
</script>
<style>
body{ background-color: ivory; }
canvas{border:1px solid red;}
</style>
</head>
<body>
<canvas id="canvas" width=300 height=300></canvas>
<input type="text" id="item">
</body>
</html>