Rick's b.log - entry 2026/01/11

Drawing a chart in HTML

If your browser didn't handle it, here's a picture of what it should have looked like, scaled up slightly because, well, I have Firefox set to 120% because my eyes suck.

Here's how I did it.

The first thing to do is to create a canvas object where it is wanted.

<div align="center"><canvas id="LastHourUse" width="360" height="180"
style="border:3px solid blue; background: yellow;"></canvas></div>

The canvas is 360 pixels wide and 180 tall. This was determined by giving space for three readings per minute for the past 60 minutes, with each being two pixels wide. That is to say, each pair of horizontal pixels represents 20 seconds.
As for height, it is calculated as being able to go up to 9000W (or more correctly, VA), with each vertical pixel representing 50W; so 20 pixels would be a kilowatt.

Now we need to switch to some JavaScript to do the work. First, we must get a pointer to the canvas object and set up a drawing context.

<script>
const canvas = document.getElementById("LastHourUse");
const drw = canvas.getContext("2d");

Now that this has been done, plot the graticles to make it easier to visualise what is happening. JavaScript can add text annotations, but let's keep this simple. Each line up represents a kilowatt, and each line across is five minutes.

// Draw the graticles
drw.beginPath();

// Horizontal, every 1000W (or 20 pixels)
for ( let graticle = 20; graticle <= 160; graticle += 20 )
{
   drw.moveTo(0, graticle);
   drw.lineTo(360, graticle);
}

// Vertical, every five minutes (or 30 pixels)
for ( graticle = 30; graticle <= 330; graticle += 30 )
{
   drw.moveTo(graticle, 0);
   drw.lineTo(graticle, 180);
}

// Make the lines narrow and blue like the border
drw.lineWidth = 1;
drw.strokeStyle = "blue";

// Draw it
drw.stroke();

Now the data is drawn. For the purposes of this example, I just pick a random value within the 0-9000W range, and then perform a few quick calculations to try to make it look slightly more realistic and not so utterly random.
Otherwise, it is simply a for loop that steps across the pixels of the canvas to plot where the line should be going.
Remember, this is intended to be output by a little microcontroller, so it'll likely just embed the data as some sort of array and get the browser to draw it. I'm using random values here just to see if/how it works.
Anyway, the microcontroller aspect is why I'm using canvas directly rather than any one of a hundred charting libraries or, indeed, to make PNGs itself on the fly.

// Now draw the data

drw.beginPath();

drw.moveTo(0, 180); // bottom left (0,0 is top left)

for (let posn = 0; posn < 360; posn++)
{
   // get a random use between 1 and 9000W
   let watts = Math.floor(Math.random() * 9000) + 1;
   
   
   // The following two calculations are to make the
   // chart slightly more realistic looking...
   
   // Fudge as it'll never be less than 150...
   if ( watts < 150 )
      watts = 150;
      
   // And constrain that which is too big as less liable
   if ( watts > 5000 )
   {
      if ( Math.random() > 0.1 )
      {
         // has a 9/10ths chance of being made half size
         watts = watts / 2;
      }
   }


   // Work out how big it should be in the chart
   watts = watts / 50;
   
   // Draw to this point
   drw.lineTo(posn, (180 - watts));
}

// Make the lines a little bit thicker, and red
drw.lineWidth = 2;
drw.strokeStyle = "red";

// Now plot it all
drw.stroke();
</script>

The current versions of the major browsers (Firefox, Chrome, Safari, Opera, and the Microsoft ones) support canvas. If you're using RISC OS and NetSurf... um... ☺

Challenge

I wanted to eat one of the 900g Mac&Cheese meals from Picard (yes, just shy of a kilogram). I also wanted to play with HTML5's canvas to see if I can get it to draw stuff, which as a side-effect meant learning some basic JavaScript (it's not so different to C so...).
But that would all be a distraction.
Distractions are deadly.
I didn't do anything yesterday as I was playing with the TIC and then writing a blog article about it, and I didn't put my bin out two weeks ago because filling it meant doing boring stuff. Instead I thought about what time was while defrosting the freezer (though, to be fair, it's been cold which is hardly motivating).

So I said to myself, either I was going to have a cup-a-soup for my meal, or I was going to have a nice Mac&Cheese. Which one depends upon whether or not I cleared the table and filled the bin to take it up for collection.

Well, as I write this I'm eating Mac&Cheese and I am pleased that the table only has a few things on it.
I give it two weeks...

Your comments:

Please note that while I check this page every so often, I am not able to control what users write; therefore I disclaim all liability for unpleasant and/or infringing and/or defamatory material. Undesired content will be removed as soon as it is noticed. By leaving a comment, you agree not to post material that is illegal or in bad taste, and you should be aware that the time and your IP address are both recorded, should it be necessary to find out who you are. Oh, and don't bother trying to inline HTML. I'm not that stupid! ☺
As of February 2025, commenting is no longer available to UK residents, following the implementation of the vague and overly broad Online Safety Act. You must tick the box below to verify that you are not a UK resident, and you expressly agree if you are in fact a UK resident that you will indemnify me (Richard Murray), as well as the person maintaining my site (Rob O'Donnell), the hosting providers, and so on. It's a shitty law, complain to your MP.
It's not that I don't want to hear from my British friends, it's because your country makes stupid laws.
 
You can now follow comment additions with the comment RSS feed. This is distinct from the b.log RSS feed, so you can subscribe to one or both as you wish.

No comments yet...

Add a comment (v0.12) [help?] . . . try the comment feed!
		Your name
		Your email	(optional)
		Validation	Are you real? Please type 57056 backwards.
		UK resident	Check to verify that you are NOT a UK resident.
		Your comment