Javascript  

  

 

 

 

 

Plot a CSV file in Cartesian

 

this code is created first by chatGPT on Jan 7 2023 (meaning using chatGPT 3.5) and then modified a little bit my me. The initial request that I put into chatGPT is as follows :

 

Write a javascript with the following requirement

1. create a table at the center of the page

2. the table has two rows and one column, make grid visible in thin line

3. put a textbox that can take in a filename and a button. the default value of the text box is 'data.dat'. the data stored in the file is sequence of 2d coordinate x and y in csv format

4. put a canvas that plot the data in the file in the lower row. Do not put any background in the canvas. the background should be all white.

5. make the edge of the canvas visible

6. plot axis lines at (0,0) in the plot in black

7. plot a grid lines in the plot in gray. Grid lines should start from x axis and y axis

8. javascript for the plot should be stored in a separate file

9. if you want to use style, create a separate css file.

10. Create an html file that combines all of these components

NOTE : It is not guaranteed that you would have the same code as I got since chatGPT produce the answers differently depending on the context. And it may produce the different answers everytime you ask even with the exact the same question.

NOTE : If you don't have any of your own idea for the request, copy my request and paste it into the chatGPT and put additional requests based on the output for the previous request. I would suggest to create a new thread in the chatGPT and put my request and then continue to add your own request.

 

 

NOTE : This code works only when the data file is located on a server because the script is using XMLHttpRequest(); to read the file. It would cause an error if you try to read the data file located on local harddisk.

 

PlotData.html

<html>

<head>

  <link rel="stylesheet" type="text/css" href="style_plotdata.css">

  <script src="PlotData.js"></script>

</head>

<body>

  <table align="center" cellspacing="0" cellpadding="0" border="1">

    <tr>

      <td>

        <input type="text" id="filename" value="data.dat">

         <button onclick="plotData()">Plot</button>

      </td>

    </tr>

    <tr>

      <td>

        <canvas id="plot" width="400" height="400"></canvas>

      </td>

    </tr>

  </table>

</body>

</html>

 

 

style_plotdata.css

canvas {

  border: 1px solid black;

}

 

 

PlotData.js

function plotData() {

  // Get the canvas and its context

  var canvas = document.getElementById("plot");

  var context = canvas.getContext("2d");

 

  // Clear the canvas

  context.clearRect(0, 0, canvas.width, canvas.height);

 

  // Move the origin to the center of the canvas

  context.translate(canvas.width / 2, canvas.height / 2); // position the (0,0) at the center of the canvas

  context.scale(1, -1);  // invert the y scale so that the +y is above x axis, -y is below x axis.

 

  // Set the stroke style for the axis and grid lines

  context.strokeStyle = "black";

 

  // Plot the x and y axis lines

  context.beginPath();

  context.moveTo(0, canvas.height / 2);

  context.lineTo(canvas.width, canvas.height / 2);

  context.moveTo(canvas.width / 2, 0);

  context.lineTo(canvas.width / 2, canvas.height);

  context.stroke();

 

  // Set the scale of the axis

  var scale = 40;

  var xstep = 0.1;

 

  // Set the stroke style for the grid lines

  context.strokeStyle = "gray";

 

  // Draw the grid lines

  context.beginPath();

  for (var x = 0; x > -canvas.height / 2; x -= scale) {

    context.moveTo(x, -canvas.height / 2);

    context.lineTo(x, canvas.height / 2);

  }

  for (var x = 0; x < canvas.width / 2; x += scale) {

    context.moveTo(x, -canvas.height / 2);

    context.lineTo(x, canvas.height / 2);

  }

 

  for (var y = 0 ; y < canvas.height / 2; y += scale) {

    context.moveTo(-canvas.width / 2, y);

    context.lineTo(canvas.width / 2, y);

  }

  for (var y = 0; y > -canvas.height / 2; y -= scale) {

    context.moveTo(-canvas.width / 2, y);

    context.lineTo(canvas.width / 2, y);

  }

  context.stroke();

 

  // Set the color of the x and y axis to black

  context.strokeStyle = "black";

 

  // Draw the x and y axis

  context.beginPath();

  context.moveTo(-canvas.width / 2, 0);

  context.lineTo(canvas.width / 2, 0);

  context.moveTo(0, -canvas.height / 2);

  context.lineTo(0, canvas.height / 2);

  context.stroke();

 

 

  // Read the data file

  var filename = document.getElementById("filename").value;

  var xhr = new XMLHttpRequest();

  xhr.open("GET", filename, true);

  xhr.onload = function() {

    if (xhr.status == 200) {

      // Parse the CSV data

      var data = xhr.responseText.split("\n").map(function(line) {

        return line.split(",").map(parseFloat);

      });

 

      // Set the stroke style for the data points

      context.strokeStyle = "red";

 

      // Plot the data points

      context.beginPath();

      context.lineWidth = 2;

      data.forEach(function(point, index) {

        var x = point[0];

        var y = point[1];

        if (index == 0) {

          context.moveTo(x, y);

        } else {

          context.lineTo(x, y);

        }

      });

      context.stroke();

    }

  };

  xhr.send();

}