DivDraw is a JS library that uses pure HTML elements like <div> for drawing on a canvas.
I was inspired by Chart.js and P5.js.
So I decided to write my own "chart" library.
<script src="DivDraw/divdraw.js"></script>This is going to be your canvas.
<div id="myChart"></div><script>
let width = 800;
let height = 800;
var elem = document.getElementById("myChart");
var canvas = new DivDraw(elem, width, height);
</script>Alternatively you can also add the scripts in a seperate JS file and include them in the <head>.
The order is important here, so make sure you add the scripts after the DivDraw script-tag.
And to be safe, add the defer Attribute to the script-tag to make sure that the script only executes once the body has fully loaded.
<script>
canvas.rect(300, 400, 10, 20, '#000');
canvas.ellipse(500, 550, 10, 20, 'limegreen');
canvas.ellipse(100, 200, 10);
canvas.line(300, 400, 500, 550, 'blue', 3);
canvas.line(200, 200, 400, 400);
canvas.triangle(700, 600, 30, 50, 1, 'red');
var returned_triangle = canvas.triangle(700, 600, 30, 50, -1, '#525252', true);
canvas.text(200, 200, 'Hello there');
canvas.text(600, 300, 'General Kenobi', 'fit-content', 20, 'orange', true);
canvas.clear();
</script>You just need to give them the same id as the label.
<script>
canvas.ellipse(100, 100, 10, 10, 'rgba(0,0,0,.5)', 'id-1');
canvas.rect(200, 100, 10, 10, 'red', 'rect-id');
canvas.label(100, 100, 'Visits', 'Visitors: 100', 'id-1', 'rgba(0,0,0,.5)');
canvas.label(200, 100, 'Visits', 'Visitors: 200', 'rect-id', 'red');
</script><script>
let lineChart = {
type: "line",
label: "Coffees per day",
color: "rgb(0, 173, 255)",
stroke: 8,
lineColor: "rgb(0, 173, 255)",
lineStroke: 2,
fill: "rgba(0, 173, 255, .1)",
labels: ["22.05", "23.05", "24.05", "25.05", "26.05", "27.05", "28.05", "29.05"],
data: [8, 4, 5.5, 7, 9, 2, 2, 5],
dataLabels: ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday"]
};
let barChart = {
type: "bar",
label: "Litres of water per day",
color: "blue",
labels: ["22.05", "23.05", "24.05", "25.05", "26.05", "27.05", "28.05", "29.05"],
data: [2.5, 3, 2.4, 2.1, 1.9, 2.5, 2.8, 3.4],
dataLabels: ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday"]
};
canvas.graph(lineChart, barChart);
</script>