Drawing a Google Visualization Chart from .CSV file

I'm not a programmer

I want to Draw a Google Visualization Chart from .CSV file

I have .csv file as below:

time,temperature
2023-08-21 12:00:00,25
2023-08-21 12:01:00,26
2023-08-21 12:02:00,27

and this is the my code :

<!DOCTYPE html><html><head><title>Temperature vs. Time Chart</title><script src="https://www.google.com/jsapi"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.csv/0.71/jquery.csv.min.js"></script></head><body><div id="chart"></div>

<script>// Load the Google Visualization API and the jQuery-CSV library.google.load("visualization", "1", {packages: ["corechart", "controls"]});$.getScript("https://cdnjs.cloudflare.com/ajax/libs/jquery.csv/0.71/jquery.csv.min.js");

// Function to draw the chart.
function drawChart() {
  // Get the data from the CSV file.
  var csvData = $.csv("temp.csv");

  // Create a new DataTable object from the CSV data.
  var data = new google.visualization.arrayToDataTable(csvData);

  // Create a new chart object.
  var chart = new google.visualization.LineChart(document.getElementById("chart"));

  // Set the chart options.
  chart.options.title = "Temperature vs. Time";
  chart.options.width = 600;
  chart.options.height = 400;

  // Draw the chart.
  chart.draw(data);
}

// Call the drawChart() function when the page loads.
google.setOnLoadCallback(drawChart);

</script></body></html>

unfortunately not working giving me a blank page

Solution

first, need to make sure you're calling google's load statement, didn't see it in the code provided.

google.charts.load('current', {packages: ['corechart']});

and you can use the promise the load statement returns to know when the page has loaded.

next, options should be a separate variable, and passed as the second argument to the draw method.

see following snippet...

google.charts.load('current', {
  packages: ['corechart']
}).then(function () {
  // Get the data from the CSV file.
  var csvData = $.csv("temp.csv");

  // Create a new DataTable object from the CSV data.
  var data = new google.visualization.arrayToDataTable(csvData);

  // Create a new chart object.
  var chart = new google.visualization.LineChart(document.getElementById("chart"));

  // Set the chart options.
  var options = {};
  options.title = "Temperature vs. Time";
  options.width = 600;
  options.height = 400;

  // Draw the chart.
  chart.draw(data, options);
});

EDIT

and just noticed...

you need to use the following url to load google charts.

<script src="https://www.gstatic.com/charts/loader.js"></script>

jsapi has been deprecated...

see update library loader code