Графики с использованием JQuery

Я хочу создать круговую диаграмму, используя jquery, html, css как? Как получить ежедневный отчет в виде круговой диаграммы с использованием кода. По ТежаГрафики с использованием JQuery

<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); 
 
\t var test=new Array(); 
 
     function drawChart() { 
 
\t \t var jsonData = $.ajax({ 
 
     url:'getData.php', 
 
\t \t type:'GET', 
 
     dataType:'json', 
 
\t \t contentType: 'application/x-www-form-urlencoded', 
 
\t \t async:false, 
 
\t \t success: function(data){ 
 
     test=data; 
 
\t \t \t } 
 
     }).responseText; 
 
\t //alert(test); 
 
     var data = google.visualization.arrayToDataTable(test); 
 

 
     var options = { 
 
      title: 'My Daily Activities', 
 
\t \t 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>

И я не могу получить любой из положить и я получаю все данные в формате JSON, используя другой файл и получать данные JSON с помощью Ajax код в моем коде .. есть ли другой способ решить эту проблему. Вы, кажется,

источник

2015-09-30 Tej

не получать ничего, потому что $.ajax является асинхронным, а это означает, что при вызове, он начинает запрос, а затем сразу же переходит к следующему оператору (до того, как данные даже возвращали)

Если все пойдет хорошо, вы получите метод, назначенный на success. Вот где вы должны рисовать диаграмму.

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);

источник

2015-09-30 07:24:03

Привет Гроот, код у дал казнили, но график не показывает, и никаких ошибок не coming..Can вы даете другой код, чтобы отобразить круговую диаграмму с ежедневным прогрессом – Tej

и хорошим ответом, но некоторые из них я делая ошибку, как ... мы проходим тест как параметр, но объявляем тест как пустой массив, а затем как данные передаются в dataAsDataTable. Я хочу немного ясности здесь ... Можете ли вы PLZ дать мне – Tej

извините, это должна была быть переменная 'data', возвращаемая в обработчике успеха. (немного не замечаю с моей стороны), я обновил ответ. –

Графики с использованием JQuery

ответ

Смежные вопросы