需要从.txt文件中的数据创建Google图表

Both html and txt files are in same folder.

html和txt文件都在同一个文件夹中。

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

尝试将完整位置放到网址,如:/home/lp505/Desktop/chart/output.txt,但它不起作用。

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

尝试使用类型为'get',它也没有用。

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

我认为错误是在方法绘图中请帮我调试代码来创建图表

html code is

HTML代码是

    <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

1 个解决方案

#1

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

1)一定要包含JQuery,没看到你的HTML 2)设置AJAX调用类型得到3)tmpData在这里拼写错误 - > parseInt(tempData [1])4)每行数据应该是一个数组值

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

来自: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 #

5)在id上使用querySelector时,请务必使用#前缀

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>

#1