weixin_33698823 2015-09-30 07:18 采纳率: 0%
浏览 16

使用Jquery的图表

I want to design a pie chart using jquery,html,css how? how to get daily report in pie chart representation using the code. By Teja

<html>
<head>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
      google.load("visualization", "1", {packages:["corechart"]});
      google.setOnLoadCallback(drawChart);
      var test=new Array();
      function drawChart() {
        var jsonData = $.ajax({
        url:'getData.php',
        type:'GET',
        dataType:'json',
        contentType: 'application/x-www-form-urlencoded',
        async:false,
        success: function(data){
         test=data;
            }
        }).responseText;
      //alert(test);
        var data = google.visualization.arrayToDataTable(test);

        var options = {
          title: 'My Daily Activities',
          pieHole: 0.6,
        };

        var chart = new google.visualization.PieChart(document.getElementById('piechart'));

        chart.draw(data, options);
      }
    </script>
  </head>
  <body>
    <div id="piechart" style="width: 900px; height: 500px;"></div>
  </body>
</html>

And I am not able to get any out put and i am getting all json data using different file and getting json data using Ajax code in my code ... is there any other way to solve this issue.

</div>
  • 写回答

1条回答 默认 最新

  • weixin_33694620 2015-09-30 07:24
    关注

    You don't seem to be getting anything because $.ajax is asynchronous, meaning that when you call it, it starts a request, and then immediately continues to the next statement (before any data is even returned)

    If all goes well, you end up in the method you assigned to success. That is where you should be drawing your chart.

    google.load("visualization", "1", {packages:["corechart"]});

function drawChart() {
    $.ajax({
        url:'getData.php',
        type:'GET',
        dataType:'json',
        contentType: 'application/x-www-form-urlencoded',
        async:false,
        success: function(data){
            var options = {
                title: 'My Daily Activities',
                pieHole: 0.6,
            };
            var chart = new google.visualization.PieChart(document.getElementById('piechart'));
            var dataAsDataTable = google.visualization.arrayToDataTable(data);
            chart.draw(dataAsDataTable, options);
        }
    });    
}


//typically it is a good idea to define functions or variables *before*
//passing them as a reference. i am not quite sure what the code below will do,
//but since it references the drawChart function, it should be executed after
//defining drawChart.

google.setOnLoadCallback(drawChart);
    评论

报告相同问题？

悬赏问题

  • ¥15 我想在一个软件里添加一个优惠弹窗，应该怎么写代码
  • ¥15 fluent的在模拟压强时使用希望得到一些建议
  • ¥15 STM32驱动继电器
  • ¥15 Windows server update services
  • ¥15 关于#c语言#的问题：我现在在做一个墨水屏设计，2.9英寸的小屏怎么换4.2英寸大屏
  • ¥15 模糊pid与pid仿真结果几乎一样
  • ¥15 java的GUI的运用
  • ¥15 Web.config连不上数据库
  • ¥15 我想付费需要AKM公司DSP开发资料及相关开发。
  • ¥15 怎么配置广告联盟瀑布流