I have written a graphing program, but each time it runs it should prompt the user for a data file to plot. Here is a very simplified program that has the data file (Data.js) hard coded in line 7:
<!DOCTYPE html>
<html>
<head>
<title>Warm-up</title>
<script src="http://ift.tt/PL93nT"></script/>
<script src="./Data.js"></script>
<script>
function drawHorizontalLine(c, startX, startY, endX, endY) {
c.lineWidth = 3;
c.strokeStyle = '#888';
c.beginPath();
c.moveTo(startX, startY);
c.lineTo(endX, endY);
c.stroke();
}
$(document).ready(function() {
// Set the canvas width according to the length of time of the recording
var myCanvas = document.getElementById("graph");
var resultOfCalculation = 100;
myCanvas.width += resultOfCalculation;
graphWidened = $('#graph');
var graphCanvas = graphWidened[0].getContext('2d');
drawHorizontalLine(graphCanvas, 10, 20, endWidth, endHeight);
});
</script/>
</head>
<body>
<canvas id="graph" width="600" height="450">
</body>
</html>
... where Data.js contains:
var endWidth = 200;
var endHeight = 150;
But I want to select the data file, something like this, perhaps:
<input type="file" id="sourcedFile" />
<p id="chosenFile" ></p>
<script type="text/javascript">
function readSingleFile(evt) {
//Retrieve the first (and only!) File from the FileList object
var f = evt.target.files[0];
if (f) {
document.getElementById("chosenFile").innerHTML = f.name;
} else {
alert("Failed to load file");
}
}
document.getElementById('sourcedFile').addEventListener('change', readSingleFile, false);
</script>
But I am having difficulty fitting the two pieces together in one file. Obviously it should first request the data file and then draw the graph using the file name stored in the "chosenFile" variable. I am new to HTML and JavaScript.
Thanks.
--- Edit ---
Thanks for your response, @TheGr8_Nik. I incorporated it in this file:
<!DOCTYPE html>
<html>
<head>
<title>Warm-up</title>
<input type="file" id="sourcedFile" />
<p id="chosenFile" ></p>
<script src="http://ift.tt/1E2nZQG"></script>
<script type="text/javascript">
function readSingleFile(evt) {
//Retrieve the first (and only!) File from the FileList object
var f = evt.target.files[0];
if (f) {
document.getElementById("chosenFile").innerHTML = f.name;
} else {
alert("Failed to load file");
}
}
document.getElementById('sourcedFile').addEventListener('change', readSingleFile, false);
</script>
<script>
function drawHorizontalLine(c, startX, startY, endX, endY) {
c.lineWidth = 3;
c.strokeStyle = '#888';
c.beginPath();
c.moveTo(startX, startY);
c.lineTo(endX, endY);
c.stroke();
}
$(function() {
$('#sourcedFile').on( 'change', function () {
var script,
script_id = 'loaded_script',
//file_name = "./Data.js";
//file_name = "http://ift.tt/1P3Huip";
//file_name = this.value.replace("C:\\fakepath\\", "");
file_name = this.value;
// check if the name is not empty
if ( file_name !== '' ) {
// creates the script element
script = document.createElement( 'script' );
// assign an id so you can delete id the next time
script.id = script_id;
// set the url to load
script.src = file_name;
// Draw the graph
//script.onload = function () {
var myCanvas = document.getElementById("graph");
var resultOfCalculation = 100;
myCanvas.width += resultOfCalculation;
graphWidened = $('#graph');
var graphCanvas = graphWidened[0].getContext('2d');
drawHorizontalLine(graphCanvas, 10, 20, endWidth, endHeight);
//drawHorizontalLine(graphCanvas, 10, 20, 400, 80);
//};
// remove the last loaded script
$('#'+ script_id ).remove();
// append the new script in the header
$('head').append( $(script) );
}
});
});
</script/>
</head>
<body>
<canvas id="graph" width="600" height="450">
</body>
</html>
I run this on a local Windows machine with Chrome browser. Chrome changed the path of the selected file to C:\fakepath\. I tried getting around this problem by creating a "fakepath" directory and putting a copy of the file-to-be-sourced in that directory, but the script said "Cross origin requests are only supported for protocol schemes: http, .....". An internet search suggested running a web server app in Chrome, which I tried. This gave my files the following addresses: http : // 127.0.0.1:8887/Test.html (spaces in links because my reputation is too low) http : // 127.0.0.1:8887/Data.js The script still didn't work because I didn't know how to navigate the file selector pop-up to http : // 127.0.0.1:8887/Data.js. I got around this by hard-coding the selected file -- file_name = "http : // 127.0.0.1:8887/Data.js"; This finally allowed the script to get to the point where the graph gets drawn, but it failed, complaining that the variable 'endWidth' was not defined. This indicates that the http : // 127.0.0.1:8887/Data.js file (which defines endWidth) was not sourced into the main script.
I then tried a simpler set-up - I moved all the files to c:\fakePath. This allowed me to to select a data file without the script complaining. But, as above, it complained when it tried to draw the graph, indicating that the selected file was not actually included in the source.
Phew! Any ideas? Thanks.
via Chebli Mohamed
Aucun commentaire:
Enregistrer un commentaire