javascript - Charts using Jquery -
i want design pie chart using jquery,html,css how? how daily report in pie chart representation using code. 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 not able out put , getting json data using different file , getting json data using ajax code in code ... there other way solve issue.
you don't seem getting because $.ajax
asynchronous, meaning when call it, starts request, , continues next statement (before data returned)
if goes well, end in method assigned success
. should drawing 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 idea define functions or variables *before* //passing them reference. not quite sure code below do, //but since references drawchart function, should executed after //defining drawchart. google.setonloadcallback(drawchart);
Comments
Post a Comment