How to plot this type of "binary matrix" graphic (I honestly don't know if it has a name) using PHP and HTML

Question

I'm trying to plot this type of "binary matrix" graphic:

Disregard the two colors from the sample image; I want to either color a dot blue for, let's say, "complete" values or leave it uncolored/gray for "incomplete" values as a way to track daily task completion for a certain amount of dots/days. The dots represent a day where a task was completed or not completed. Showing the full amount of dots/days gives perspective on % of completion as days go by.

I would like to use a combination of HTML/Javascript and PHP + MySQL. But the hardest part for me is figuring out a good algorithm to render this visualization. Thanks for your help.

Answer 1

Just treat each dot like it's a pixel. Also, imagine that the image has been rotated 90° CCW. Then, you simply draw a square that takes up less room that is allocated to it - this way, you get the separating lines.

Here'e a quick something to have a play with. A few notes:

• 0) I just halved your image dimensions
• 1) 4 pixels and 5 pixels were chosen arbitrarily
• 2) I didn't bother with setting the colour of the dot - you can easily do this.
• 3) I've simply treated the drawing area like a normal top-bottom bitmap, while your image seems to show that all of the Y values will be used before the next X value is needed. (This is like a 90° CCW rotation).
• 4) I'm addressing the pixels with an X and a Y - perhaps you'd be more interested in addressing them with a single number? If so, you could easily write a function that would map two coords to a single number - the pixels index, if you like.

I.e if an image is 100 x 100, there are 10,000 pixels. You could address them by specifying a number from 0 - 9,999 E.g

function 10k_to_100x100(index)
{
   var x = index % 100;
   var y = (index / 100).toFixed(0);
   plotPixelDot(x, y);
}

X is simply the remainder when dividing by the width Y is the whole number answer when dividing by the width

Here's a snippet you can try right here on the page:

function byId(id){return document.getElementById(id);}
window.addEventListener('load', onDocLoaded, false);

function onDocLoaded()
{
	var x, y;
	
	for (y=0; y<20; y++)
	{
		for (x=0; x<100; x++)
		{
			drawDot(x, y, 'output');
		}
	}
}

function drawDot(xPos, yPos, canvasId)
{
	var actualX=xPos*5, actualY=yPos*5;
	var ctx = byId(canvasId).getContext('2d');
	ctx.fillRect(actualX, actualY, 4, 4);
}

<canvas width=558 height=122 id='output'></canvas>