I have a CSV file with some data that i want to put in a canvases. This is how i read my CSV data:
function csv_to_array($filename='', $delimiter=',')
{
if(!file_exists($filename) || !is_readable($filename))
return FALSE;
$header = NULL;
$data = array();
if (($handle = fopen($filename, 'r')) !== FALSE)
{
while (($row = fgetcsv($handle, 1000, $delimiter)) !== FALSE)
{
if(!$header)
$header = $row;
else
$data[] = array_combine($header, $row);
}
fclose($handle);
}
return $data;
}
My CSV file contains this data:
name,age,phone
"Mary",21,0000
"Anna",45,1111
"Lizzy",28,2222
"Lucy",14,3333
I want to display my data each line in a separate canvas that i have created, so if i have 5 lines in my CSV file i want to have 5 canvases after i process my CSV.
This is how i want my data in my canvas:
<script>
var c = document.getElementById("canvas");
var ctx = c.getContext("2d");
ctx.fillStyle = '#fff';
ctx.fillRect(0, 0, canvas.width, canvas.height);
// Create gradient
var grd = ctx.createLinearGradient(10,10,200,0);
grd.addColorStop(0,"#00BFFF");
ctx.lineWidth = 2;
// Fill with gradient
ctx.fillStyle = grd;
ctx.fillRect(0,60,250,70);
ctx.font = "30px Comic Sans MS";
ctx.fillStyle = 'black';
ctx.strokeText("Person: ", 80, 110);
</script>
<script>
function create() {
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
context.font = document.getElementById("font").value;
ctx.fillStyle = document.getElementById("cul").value;
context.fillText("Name: ", 30, 230);
context.fillText("Age: ", 30, 250);
context.fillText("Phone: ", 30, 270);
}
</script>
How can i put my csv data inside the canvas and loop it?
Also my html is something like this:
<!DOCTYPE html>
<html>
<head></head>
<body>
<form action="upload.php" method="post" enctype="multipart/form-data">
File to upload (format acceptat .csv):
<input type="file" name="fileToUpload" accept=".csv">
<input type="submit" value="Upload File" name="submit">
</form><br>
<button type="button" onclick="create.php">Create</button>
</body>
</html>