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