How to draw points in x/y positions using JavaScript

Question

Hi,

I would like to plot points in two dimensional fashion (each have an x and y coordinates). I was wondering if you know of a library or project that does this so that I don't have to build this from scratch.

Thanks,

Tam

Answer 1

Here you have one: http://jsdraw2d.jsfiction.com/

Answer 2

Raphaël - a small JavaScript library that should simplify your work with vector graphics on the web.

Answer 3

Use canvas. The canvas tag is the best way of doing this. Here is how to create a Canvas:

// Create a canvas that extends the entire screen
// and it will draw right over the other html elements, like buttons, etc
var canvas = document.createElement("canvas");
canvas.setAttribute("width", window.innerWidth);
canvas.setAttribute("height", window.innerHeight);
canvas.setAttribute("style", "position: absolute; x:0; y:0;");
document.body.appendChild(canvas);

Then you can draw a point at (10,10) like this:

var ctx = canvas.getContext(2d);
ctx.fillRect(10,10,1,1);

Furthermore, you can manipulate all the pixels on the screen using ImageData.

https://developer.mozilla.org/En/HTML/Canvas/Pixel%5Fmanipulation%5Fwith%5Fcanvas

Answer 4

If you've using jQuery already, then Flot is a very very simple (but powerful) way to draw graphs.

You could also look at the Google Charts API -- guaranteed cross-browser: it gives you a graph as an image, instead of canvas or VML, etc.