Use .csv as a source for Google Charts

71 views

Skip to first unread message

Simon 85

unread,

Mar 7, 2019, 10:26:58 AM3/7/19

to Google Visualization API

Hello,

I try to get a google chart with an .csv table as source.

But my code is not running, in the console I receive following error:

SCRIPT5007: Unable to get property 'Query' of undefined or null reference

The test.csv ist stored on C:/

week,value1,value2
1,2,3

Is somebody here to help me out?

<!DOCTYPE html>
<meta content="de" http-equiv="Content-Language" />
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>TEST</title>

<span class="tag" style="background-color: transparent; box-sizing: border-box; color: rgb(59, 120, 231); font-family: Roboto Mono,monospace; font-size: 14px; font-style: normal; font-variant: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: left; text-decoration: none; text-indent: 0px; text-transform: none; -webkit-text-stroke-width: 0px; white-space: pre; word-spacing: 0px;">
<br />
</span>
<p>&nbsp;</p>

<head>
 <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
 <script type="text/javascript">
    google.charts.load('current', {packages: ['corechart']});
    google.charts.setOnLoadCallback(drawChart);
var queryOptions = {
    csvColumns: ['number', 'number', 'number' /* Or whatever the columns in the CSV file are */],
    csvHasHeader: true /* This should be false if your CSV file doesn't have a header */
}
var csvUrl = 'file://C:/test.csv'
var query = new google.visualization.Query(csvUrl, queryOptions);
query.send(handleQueryResponse);
function handleQueryResponse(response) {
    if (response.isError()) {
        alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
        return;
    }
 }
    
function drawChart() {    
   var data = response.getDataTable();
 
    var chart = new google.visualization.PieChart(document.getElementById('myPieChart'));
    chart.draw(data, null); 
 } 
 </script>
  
  

</head>
<body>
  <div id="myPieChart"/>
</body>
</html>

Reply all

Reply to author

Forward

0 new messages