0

I wrote code to create a line chart using the library ApexCharts. I was able to create one hardcoding data but I wanted to do it by softcoding it. I believe its more elgant as well as better for practice and helps others use it easily. The issue that I am running with is with google and other web browsers. Their CORS policy is not letting me get the final visualization. I am new to Data Science and I would love some help. Here below is the HTML file that is used to visualize the wanted line chart and below will be a csv file picture that includes all the data. What am I doing wrong and what can I improve on?

<!DOCTYPE html>
<html>
<head>
  <title>ApexCharts Example</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/apexcharts@3.27.1/dist/apexcharts.min.css">
</head>
<body>
  <div id="chart"></div>

  <script src="https://cdn.jsdelivr.net/npm/apexcharts@3.27.1/dist/apexcharts.min.js"></script>
  <script>
    document.addEventListener('DOMContentLoaded', function() {
      // Fetch the CSV data file
      fetch('/Users/nicolashillison/Desktop/DataIris/ApexCharts/cars.csv')
        .then(response => response.text())
        .then(csvData => {
          // Parse the CSV data
          const carsData = parseCSV(csvData);

          // Extract the necessary data from CSV
          const seriesData = carsData.map(car => ({
            name: car.Model,
            data: [car.LowPrice, car.HighPrice, car.HwyMPG, car.Seating, car.Acc060, car.Weight]
          }));

          // Custom colors for the lines
          const lineColors = ['#FF4560', '#0000FF', '#00E396', '#775DD0', '#FEB019', '#546E7A'];

          // Configuration options for the chart
          const chartOptions = {
            series: seriesData,
            colors: lineColors,
            chart: {
              type: 'line',
              height: 350,
              zoom: {
                enabled: false
              },
            },
            xaxis: {
              categories: ['Low Price', 'High Price', 'Hwy MPG', 'Seating', 'Acc 0-60', 'Weight'],
            },
            yaxis: {
              labels: {
                formatter: function (value) {
                  return value;
                }
              }
            }
          };

          // Create the chart instance
          const chart = new ApexCharts(document.querySelector("#chart"), chartOptions);

          // Initialize the chart
          chart.render();
        })
        .catch(error => {
          console.error('Error:', error);
        });
    });

    // Parse the CSV data into an array of objects
    function parseCSV(csv) {
      const lines = csv.split('\n');
      const headers = lines[0].split(',');
      const data = [];

      for (let i = 1; i < lines.length; i++) {
        const currentLine = lines[i].split(',');
        const entry = {};

        for (let j = 0; j < headers.length; j++) {
          entry[headers[j]] = currentLine[j];
        }

        data.push(entry);
      }

      return data;
    }
  </script>
</body>
</html>

Here is a image of the csv file so you know what it looks like

I tried changing the directory as well as getting an extension on google to bypass CORS but nothing worked.

nicohillison
  • 1
  • You can't use `fetch` to directly access a file on your local file system, it is intended for accessing resources through a server. See this [SO question](https://stackoverflow.com/questions/50007055/fetch-request-to-local-file-not-working) – kikon Jul 10 '23 at 22:52

0 Answers0