Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 6 years ago.
Improve this question
I wish there was a horizontal funnel plugin available in the market. I'm not a good js developer but I'm a designer with html/css skills in hand. I have designed similar funnel like below in psd but I couldn't find any plugin to plug in into the html. The funnel links should be dynamically adjusted too. Please suggest me how to build similar kind of funnel with steps title, conversion % on the second row in the funnel columns. I've also created this in css but css doesn't work because the funnel columns should be totally dynamic.
Here's how to draw your horizontal funnel chart for a given set of data using Canvas...
var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var cw=canvas.width;
var ch=canvas.height;
var height=100;
var baseY=200;
var ascending=35;
var descending=35;
var barheight=50;
var data=[65,14,4,3,3];
filledLineChart(data,height,baseY,descending,ascending,barheight,'gold')
function filledLineChart(data,height,baseY,descending,ascending,barheight,fillcolor){
var stepWidth=canvas.width/(data.length-1);
var maxDataValue=0;
for(var i=0;i<data.length;i++){
if(data[i]>maxDataValue){maxDataValue=data[i];}
}
ctx.beginPath();
ctx.moveTo(0,baseY-height*data[0]/maxDataValue);
for(var i=1;i<data.length;i++){
ctx.lineTo(stepWidth*i,baseY-height*data[i]/maxDataValue);
}
ctx.lineTo(stepWidth*(data.length-1),baseY);
ctx.lineTo(0,baseY);
ctx.fillStyle=fillcolor;
ctx.fill();
ctx.strokeStyle='lightgray';
ctx.strokeRect(0,baseY-height-ascending,canvas.width,height+descending+ascending);
ctx.strokeRect(0,baseY-height,canvas.width,height+descending);
ctx.beginPath();
for(var i=0;i<data.length;i++){
ctx.moveTo(i*stepWidth,baseY-height);
ctx.lineTo(i*stepWidth,baseY);
}
ctx.stroke();
ctx.fillStyle='whitesmoke';
ctx.fillRect(0,baseY-height-ascending-barheight,canvas.width,barheight);
}
<canvas id="canvas" width=300 height=300></canvas>
You can apply all your text like this:
// set a font and set a font color and draw some text
ctx.font='14px verdana';
ctx.fillStyle='black'; // or red or whatever
ctx.fillText('21.5%', 100, 175) // 100,175 are the x,y text position
I leave it to you to apply your various text values for the chart using this simple text method.
Related
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 2 years ago.
Improve this question
I have a 12h clock with 47 quarter areas (12h * 4 quarters in one hour). I want to show a point on a defined quarter area of the clock depending on the back-end's response. Assuming the back-end returns me 3, I have to show a point on the 3rd quarter area.
Here is a fiddle: jsfiddle
Here my approach:
All quarter areas in the SVG are in the group <g id="data"></g>. Each area has an id. After that I want to determine his SVG position and then put a point on that position:
function setPointForQuarterCoordonates(id) {
var quarterObject = document.getElementById(id);
var coordinates = quarterObject.getBoundingClientRect();
var point = document.createElementNS(NS, 'circle');
point.setAttributeNS(null, 'cx', coordinates.x);
point.setAttributeNS(null, 'cy', coordinates.y);
point.setAttributeNS(null, 'r', 10);
return point;
}
In my exemple, the button "Show Defined Point (3)" simulates this event by adding a point on the 3rd rectangle starting from 12:00. For that I used:
var quarterCoordinates = quarterObject.getBoundingClientRect();
But the problem is that this gives me the DOM coordinates, not the SVG ones. So if I resize the window and I click on the button 2nd time, the point is added at different position instead at the same.
Do you have any ideas or suggestions how to deal with that?
Try using .getBBox(); instead of getBoundingClientRect();.
function setPointForQuarterCoordonates(id) {
var quarterObject = document.getElementById(id);
var coordinates = quarterObject.getBBox(); // <------------------
var point = document.createElementNS(NS, 'circle');
point.setAttributeNS(null, 'cx', coordinates.x);
point.setAttributeNS(null, 'cy', coordinates.y);
point.setAttributeNS(null, 'r', 10);
return point;
}
https://developer.mozilla.org/en-US/docs/Web/API/SVGGraphicsElement/getBBox
Im trying to build a simple 3d shape builder (it would always be a rectangle / square that needs to be built) all I want is for the user to be able enter the height, width and depth and the shape is built in real time for them as a line drawing. I have been looking online and found this jsfiddle which is great however I would need it to work in 3d (not just 2d) http://jsfiddle.net/m1erickson/f6E6Y/ but along those lines. Im however completly stuck and left scratching my head on this one...
var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var width=2;
var height=35;
var $width=document.getElementById('width');
var $height=document.getElementById('height')
$width.value=width;
$height.value=height;
draw();
$width.addEventListener("keyup", function(){
width=this.value;
draw();
}, false);
$height.addEventListener("keyup", function(){
height=this.value;
draw();
}, false);
function draw(){
ctx.clearRect(0,0,canvas.width,canvas.height);
ctx.fillRect(40,40,width,height);
}
Any ideas?
Dealing with 3D is much easier with a library. Three.js is a popular one. They also have a demo for what you've described: http://threejs.org/docs/scenes/geometry-browser.html#BoxGeometry
The controls on the top-right will allow you to adjust the dimensions of the object in real-time. Modifying this example will be much more easier than writing it from scratch, unless you'd like to learn vanilla WebGL.
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 2 years ago.
Improve this question
I need to make the gif image by canvas from this.
Is there any way to convert css3 animation to canvas animation?
I am looking for some awesome text animations, but it always made by css3. I just wonder there is an easy way to convert or I need to rewrite it by myself.
Thanks !
Here's one way to use html5 canvas to capture animations into a .GIF
The Greensock Animation Library is an excellent animation library that can manipulate DOM elements just like CSS3 animations.
But importantly for you, Greensock can also animate any javascript object.
This means that you can:
Create a JS object that draws individual animation frames on html5 canvas based on that JSObject's properties. For example:
// create a JSObject capable of drawing a rotating rectangle
var RotatingRect={
cx:canvas.width/2,
cy:canvas.height/2,
w:50,
h:35,
ww:-50/2,
hh:-35/2,
rangle:0,
draw:function(){
ctx.clearRect(0,0,cw,ch);
ctx.translate(this.cx,this.cy);
ctx.rotate(this.rangle);
ctx.beginPath();
ctx.rect(this.ww,this.hh,this.w,this.h);
ctx.closePath();
ctx.fill();
ctx.stroke();
ctx.rotate(-this.rangle);
ctx.translate(-this.cx,-this.cy);
ctx.setTransform(1,0,0,1,0,0);
},
}
Use Greensock to drive the animation by changing the JSObject's properties.
and then requesting that redrawing each "frame" on the canvas. Greensock has an onUpdate event triggers each time Greensock
// Use Greensock to animate from RotatingRect's current angle
var tl=TweenLite.to(RotatingRect,5,{
paused:true,
rangle:PI2*2,
ease:"Quart.easeOut",
onUpdate:function(){this.target.draw();},
onComplete:function(){log('complete',RotatingRect);}
}
);
Optionally, use GifJS to add a new GIF frame whenever the Greensock causes a new canvas frame to be drawn.
// Add to the bottom of RotatingRect.draw()
// Add a GIF frame from the current canvas content
gif.addFrame(canvasElement);
Tools:
The Greensock Animation Library
The gifJS Script
The Html5 Canvas element
Here is example code and a Demo:
var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var cw=canvas.width;
var ch=canvas.height;
ctx.fillStyle='skyblue';
ctx.strokeStyle='lightgray';
ctx.lineWidth=3;
var PI=Math.PI;
var PI2=PI*2;
var RotatingRect={
cx:canvas.width/2,
cy:canvas.height/2,
w:50,
h:35,
ww:-50/2,
hh:-35/2,
rangle:0,
draw:function(){
ctx.clearRect(0,0,cw,ch);
ctx.translate(this.cx,this.cy);
ctx.rotate(this.rangle);
ctx.beginPath();
ctx.rect(this.ww,this.hh,this.w,this.h);
ctx.closePath();
ctx.fill();
ctx.stroke();
ctx.rotate(-this.rangle);
ctx.translate(-this.cx,-this.cy);
ctx.setTransform(1,0,0,1,0,0);
},
}
// Use Greensock to animate from RotatingRect's current angle
var tl=TweenLite.to(RotatingRect,5,{
paused:true,
rangle:PI2*2,
ease:"Quart.easeOut",
onUpdate:function(){this.target.draw();},
onComplete:function(){log('complete',RotatingRect);}
}
);
RotatingRect.draw();
$('#play').click(function(){ tl.play(); });
$('#replay').click(function(){ tl.restart(); });
body{ background-color: ivory; }
#canvas{border:1px solid red;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenLite.min.js"></script>
<button id=play>Play</button>
<button id=replay>Replay</button>
<br><canvas id="canvas" width=300 height=300></canvas>
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 7 years ago.
Improve this question
Like our avatars: is it possible to create a simple avatar that i can use as placeholder for my users?
and extending that: how far can you go with the art preferences: colors, shape etc.
Link only answers are frowned upon but I think I'll take the risk: There are several libraries for those so called identicons Sampson linked to. The code there is Java (or looks very similar). A pure JavaScript implementation seems to be jdidenticon. You have more possibilities with PHP (you can use e.g.: ImageMagick and similar) but JavaScript is cheaper for your load ;-)
It is possible to create 2D and 3D graphics with javascript and the HTML5 tag canvas
<canvas><canvas>
Inside your javascript code you define what should painted inside your canvas
var context = document.getElementById("canvasId").getContext("2d");
var width = 125; // Triangle Width
var height = 105; // Triangle Height
var padding = 20;
// Draw a path
context.beginPath();
context.moveTo(padding + width/2, padding); // Top Corner
context.lineTo(padding + width, height + padding); // Bottom Right
context.lineTo(padding, height + padding); // Bottom Left
context.closePath();
// Fill the path
context.fillStyle = "#ffc821";
context.fill();
<canvas id="canvasId" width="165" height="145"></canvas>
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 9 years ago.
Improve this question
I Want to have an image of a car, and when a user clicks a spot on the car, I drop an x image or a circle image on that spot. I need to save the spot where they clicked so when they come back I display it in the same spot.
What is the best way to do this in html?
Should I use an image with other images overlaid on top of it?
Should I use html5?
Anybody know of any working examples of a similar nature?
Want to use js, html5, etc to make this work on iphone safari (not native app). App is ruby on rails, so I could make use of some server side features, but would prefer to leverage as much in html/css if possible.
You can use a canvas element to do this. The canvas element allow you to draw images and shapes to it.
To store and retrieve clicks you can use Web Storage (localStorage).
For example - load the image and paint it to canvas:
ONLINE DEMO HERE
HTML:
<canvas id="demo" width="500" height="400"></canvas>
JavaScript:
/// get context for canvas, cache dimension
var ctx = demo.getContext('2d'),
w = demo.width,
h = demo.height,
img = new Image(); /// the image we want to load
/// when done go draw existing marks and start listening for clicks
img.onload = function() {
renderMarks();
demo.onclick = function(e) {
/// convert mouse coord relative to canvas
var rect = demo.getBoundingClientRect(),
x = e.clientX - rect.left,
y = e.clientY - rect.top;
/// store mark
addMark(x, y);
/// redraw everything
renderMarks();
}
}
These are the main functions, this first renders existing marks to canvas on top of the image:
function renderMarks() {
/// re-draw image which also serves to clear canvas
ctx.drawImage(img, 0, 0, w, h);
/// get existing marks from localStorage
var marks = localStorage.getItem('marks'),
i = 0;
/// if any, render them all
if (marks !== null) {
/// localStorage can only store strings
marks = JSON.parse(marks);
/// set color and line width of circle
ctx.strokeStyle = '#f00';
ctx.lineWidth = 3;
/// iterate marks and draw each one
for(;i < marks.length; i++) {
ctx.beginPath();
ctx.arc(marks[i][0], marks[i][1], 30, 0, 2 * Math.PI);
ctx.stroke();
}
}
}
This adds a mark to the collection:
function addMark(x, y) {
/// get existing marks or initialize
var marks = JSON.parse(localStorage.getItem('marks') || '[]');
/// add mark
marks.push([x, y]);
/// update storage
localStorage.setItem('marks', JSON.stringify(marks));
}
(The code can be optimized in various ways but I made it to show the basic principles).
If you now navigate away from the page and come back you will see the marks are rendered again (disclaimer: jsfiddle may or may not give the same page so test locally/in "real" page to be sure).
The circles here can be anything, an image, a different shape and so forth.
To clear the marks simply call:
localStorage.clear();
or if you store other data as well:
localStorage.removeItem('marks');
Well, you can create new images for each spot and when the user click you substitute the original image by the new one. You can do that using CSS or jQuery)
Depending if you are interested in showing areas or the exact x/y coordinates, an image <map> might be of use.
Also check out this stackoverflow question.
I have no working example to show, but I think this qualifies as similar in nature. I am not sure how you'd save the info for recalling state (coming back same session or days/months later?).
I hope this is of some use.