CODEWITHSUNDEEP
javascriptjqueryajaxgoogle-visualization
ullas_jain
ullas_jain

Reputation: 13

Need to create a Google Chart from data in .txt file

Both html and txt files are in same folder.

Tried putting full location to url like : /home/lp505/Desktop/chart/output.txt , but it didn't work.

Tried using type as 'get' , it also didn't work.

I think the bug is in method drawchart Please help me in debugging the code to create a chart

html code is

    <html>
  <head>
    <!--Load the AJAX API-->
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">

      google.load('visualization', '1.0', {'packages':['corechart']});
      google.setOnLoadCallback(drawChart);

function drawChart () {
    $.ajax({
        url: 'output.txt',
        type: 'text',
        success: function (txt) {
            var dataArray = [['Name', 'Date']];
            var txtArray = txt.split('\n');
            for (var i = 0; i < txtArray.length; i++) {
                var tmpData = txtArray[i].split(/\s+/);
                dataArray.push(tmpData[0], parseInt(tempData[1]));
            }
             var data = google.visualization.arrayToDataTable(dataArray);
            var chart = new google.visualization.LineChart(document.querySelector('chart_div'));
      var options = {'title':'What is this','width':400,'height':300};
            chart.draw(data,options);
        }
    });
}
google.load('visualization', '1', {packages:['corechart'], callback: drawChart});

    </script>
  </head>
  <body>
    <div id="chart_div"></div>
  </body>
</html>

txt file

Screen_Home 13 
Screen_Home 26 
Screen_Explore 26 
Screen_Explore 27 
Screen_Home 27 
Screen_Home 28

Upvotes: 0

Views: 2388

Answers (1)

WhiteHat
WhiteHat

Reputation: 61275

I found a few issues...

1) Be sure to include JQuery, didn't see it your HTML
2) Set AJAX call type to get
3) tmpData was misspelled here --> parseInt(tempData[1])
4) Each row of data should be an array of values

From: dataArray.push(tmpData[0], parseInt(tempData[1]));
To: dataArray.push([tmpData[0], parseInt(tmpData[1])]);

5) When using querySelector on an id, be sure to prefix with #

This should draw your chart...

<script src="https://www.google.com/jsapi"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript">
  google.load('visualization', '1.0', {'packages':['corechart']});
  google.setOnLoadCallback(drawChart);

  function drawChart () {
      $.ajax({
          url: 'output.txt',
          type: 'get',
          success: function (txt) {
              var dataArray = [['Name', 'Date']];
              var txtArray = txt.split('\n');
              for (var i = 0; i < txtArray.length; i++) {
                  var tmpData = txtArray[i].split(/\s+/);
                  dataArray.push([tmpData[0], parseInt(tmpData[1])]);
              }
              var data = google.visualization.arrayToDataTable(dataArray);
              var chart = new google.visualization.LineChart(document.querySelector('#chart_div'));
              var options = {'title':'What is this','width':400,'height':300};
              chart.draw(data,options);
          }
      });
  }

  google.load('visualization', '1', {packages:['corechart'], callback: drawChart});
</script>

<div id="chart_div"></div>

Upvotes: 1

Related Questions