getdata.php worked with proper format. Still no chart. I started chartDraw.php on browser but empty page again. Do we use ajax here if I convert into google format in getdata.php itself and simply calls that file. Right?
chartDraw.php <html> <head> <!--Load the AJAX API --> <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"> function drawChart(){ /* var jsonData = $.ajax({ url:"getData.php", dataType:"json", async:false }).responseText; */ var jsonData='{"cols":[{"label":"User ID","type":"string"},{"label":"Group Name","type":"string"},{"label":"Requested Nodes",type:"number"},{"label":"Actual PE","type":"number"}],"rows":[{"c":[{"v":"user 1"},{"v":"ufhpc"},{"v":1},{"v":5.000}]},{"c":[{"v":"user2"},{"v":"ufhpc"},{"v":1},{"v":7.000}]}]}'; //Create our data table out of JSON data loaded from server var data=new google.visualization.DataTable(jsonData); //PieCharts expects 2 columns of data: a label and a value, so we need to use a DataView to restrict to 2 columns var view=new google.visualization.DataTable(data); view.setColumns([0,3]); //Instantiate and draw our chart, passing in some options var chart=new google.visualization.PieChart(document.getElementById('chart_div')); chart.draw(view,{width:400,height:240}); } //Load the visualization API and the piechart package google.load('visualization','1',{'packages':['corechart']}); //Set a callback to run when the google visualization API is loaded google.setOnLoadCallback(drawchart); </script> </head> <body> <!--Div that will hold the pie chart --> <div id="chart_div"></div> </body> </html> ---------------------------------------------------------------------------------------------------------------------------------------------------------- On Wed, Feb 27, 2013 at 3:19 PM, asgallant <[email protected]>wrote: > Ok, there are a couple of adjustments to make. In the PHP, you need to > typecast the numbers as int's or floats to get them output correctly > (currently, they are being output as strings). Do so like this: > > while($r=mysql_fetch_assoc($**sqlresult1)){ > $temp=array(); > $temp[]=array('v' => $r['userid']); > $temp[]=array('v' => $r['group_name']); > $temp[]=array('v' => (int) $r['req_nodes']); > $temp[]=array('v' => (float) $r['actualPE']); > > $rows[]=array('c' => $temp); > } > > Then, in the javascript, you have to adjust the data so that it is in the > format that the PieChart expects. PieCharts expect to get 2 columns of > data: 1 label and 1 number; so you have to use a DataView to filter out the > unneeded columns (or to create calculated columns which combine aspects of > multiple columns into 1). Here's an example: > http://jsfiddle.net/asgallant/8J6BC/ > > On Wednesday, February 27, 2013 2:35:23 PM UTC-5, akshita gupta wrote: > >> I realized that I wasn't sending the data to columns and now the >> getdata.php is displaying the data in the form as: >> >> {"cols":[{"label":"User ID","type":"string"},{"label":**"Group >> Name","type":"string"},{"**label":"Requested >> Nodes","type":"number"},{"**label":"Actual >> PE","type":"number"}],"rows":[**{"c":[{"v":"zhang"},{"v":"** >> ufhpc"},{"v":"1"},{"v":"0.000"**}]},{"c":[{"v":"zhang"},{"v":"** >> ufhpc"},{"v":"1"},{"v":"0.000"**}]},{"c":[{"v":"zhang"},{"v":"** >> ufhpc"},{"v":"1"},{"v":"0.000"**}]},{"c":[{"v":"zhang"},{"v":"** >> ufhpc"},{"v":"1"},{"v":"0.000"**}]},{"c":[{"v":"zhang"},{"v":"** >> ufhpc"},{"v":"2"},{"v":"0.000"**}]},{"c":[{"v":"zhang"},{"v":"** >> ufhpc"},{"v":"1"},{"v":"0.000"**}]},{"c":[{"v":"zhang"},{"v":"** >> ufhpc"},{"v":"1"},{"v":"0.000"**}]},{"c":[{"v":"zhang"},{"v":"** >> ufhpc"},{"v":"2"},{"v":"0.000"**}]},{"c":[{"v":"zhang"},{"v":"** >> ufhpc"},{"v":"2"},{"v":"0.000"**}]},{"c":[{"v":"zhang"},{"v":"** >> ufhpc"},{"v":"2"},{"v":"0.000"**}]},{"c":[{"v":"zhang"},{"v":"** >> ufhpc"},{"v":"2"},{"v":"0.000"**}]},{"c":[{"v":"zhang"},{"v":"** >> ufhpc"},{"v":"4"},{"v":"0.000"**}]},{"c":[{"v":"zhang"},{"v":"** >> ufhpc"},{"v":"4"},....... >> >> >> I am now using ajax in chartDraw.php to create a chart by passing the var. >> But chart is not displaying. Do I need to specify some other variable >> also? Its just a blank page so am I having some syntax problem? >> Please guide. >> >> >> On Tue, Feb 26, 2013 at 11:32 AM, asgallant <[email protected]>wrote: >> >>> In the while loop, you need to access the data columns by their SQL >>> names: >>> >>> while($r=mysql_fetch_assoc($**sq**lresult1)){ >>> $temp=array(); >>> $temp[]=array('v' => $r['userid']); >>> $temp[]=array('v' => $r['group_name']); >>> $temp[]=array('v' => $r['req_nodes']); >>> $temp[]=array('v' => $r['actualPE']); >>> >>> >>> $rows[]=array('c' => $temp); >>> } >>> >>> >>> Try that. If it doesn't work, then open the data source php page in a >>> browser and post the printed JSON here, >>> >>> >>> On Tuesday, February 26, 2013 11:11:57 AM UTC-5, akshita gupta wrote: >>> >>>> Thanks for your help..but still its not working. Please guide me. >>>> Here is the modified code. >>>> >>>> <?php >>>> >>>> mysql_connect('localhost','**aks**hita','123456'); >>>> mysql_select_db('rcusers'); >>>> >>>> $sqlquery1="select userid,group_name,req_nodes,**ac**tualPE from jobs >>>> where userid='zhang' limit 200"; >>>> >>>> $sqlresult1=mysql_query($**sqlqu**ery1); >>>> >>>> $table=array(); >>>> //For testing- data is extracted and printed; without this while below, >>>> null values taken. >>>> /*while($t=mysql_fetch_assoc($****sqlresult1)){ >>>> $table[]=$t; >>>> } >>>> print json_encode($table);*/ >>>> $table['cols']=array( >>>> array('label'=> 'User ID', type=>'string'), >>>> array('label'=>'Group Name', type=>'string'), >>>> array('label'=>'Requested Nodes', type=>'number'), >>>> array('label'=>'Actual PE', type=>'number') >>>> ); >>>> >>>> $rows=array(); >>>> while($r=mysql_fetch_assoc($**sq**lresult1)){ >>>> $temp=array(); >>>> $temp[]=array('v' => $r['column1']); >>>> $temp[]=array('v' => $r['column2']); >>>> $temp[]=array('v' => $r['column3']); >>>> $temp[]=array('v' => $r['column4']); >>>> >>>> $rows[]=array('c' => $temp); >>>> } >>>> >>>> $table['rows']=$rows; >>>> >>>> $jsonTable = json_encode($table); >>>> print $jsonTable; >>>> //print json_encode($table); >>>> ?> >>>> ------------------------------****------------------------------**** >>>> ------------------------------****------------------------------**** >>>> ------------------------------****------------------- >>>> //chartDraw.php >>>> <html> >>>> <head> >>>> <!--Load the AJAX API --> >>>> <script type="text/javascript" >>>> src="https://www.google.com/**js**api<https://www.google.com/jsapi> >>>> "></script> >>>> <script src="https://ajax.googleapis.**c**om/ajax/libs/jquery/1.8.3/** >>>> jque**ry.min.js<https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js>" >>>> type="text/javascript"></**scrip**t> >>>> >>>> <script type="text/javascript"> >>>> >>>> //Load the visualization API and the piechart package >>>> google.load('visualization','**1**',{'packages':['corechart']})**; >>>> >>>> //Set a callback to run when the google visualization API is loaded >>>> google.setOnLoadCallback(**drawc**hart); >>>> >>>> function drawChart(){ >>>> var jsonData = $.ajax({ >>>> url:"getData.php", >>>> dataType:"json", >>>> async:false >>>> }).responseText; >>>> >>>> alert(jsonData); >>>> //Create our data table out of JSON data loaded from server >>>> var data=new google.visualization.**DataTable**(jsonData); >>>> >>>> //Instantiate and draw our chart, passing in some options >>>> var chart=new google.visualization.PieChart(**** >>>> document.getElementById('**chart**_div')); >>>> chart.draw(data,{width:400,**hei**ght:240}); >>>> } >>>> >>>> </script> >>>> </head> >>>> >>>> <body> >>>> <!--Div that will hold the pie chart --> >>>> <div id="chart_div"></div> >>>> </body> >>>> </html> >>>> >>>> >>>> Thanks >>>> Akshita >>>> >>>> >>>> On Mon, Feb 25, 2013 at 4:19 PM, asgallant <[email protected]>wrote: >>>> >>>>> You have to format the data returned by your query into the JSON >>>>> format expected by the DataTable constructor. Here's a basic PHP script >>>>> that you can work from: >>>>> >>>>> <?php >>>>> /* $server = the IP address or network name of the server >>>>> * $userName = the user to log into the database with >>>>> * $password = the database account password >>>>> * $databaseName = the name of the database to pull data from >>>>> */ >>>>> $con = mysql_connect($server, $userName, $password) or die('Error >>>>> connecting to server'); >>>>> >>>>> mysql_select_db($databaseName, $con); >>>>> >>>>> // write your SQL query here (you may use parameters from $_GET or >>>>> $_POST if you need them) >>>>> $query = mysql_query('SELECT column1, column2, column3 FROM myTable'); >>>>> >>>>> $table = array(); >>>>> $table['cols'] = array( >>>>> /* define your DataTable columns here >>>>> * each column gets its own array >>>>> * syntax of the arrays is: >>>>> * label => column label >>>>> * type => data type of column (string, number, date, datetime, >>>>> boolean) >>>>> */ >>>>> array('label' => 'Label of column 1', 'type' => 'string'), >>>>> array('label' => 'Label of column 2', 'type' => 'number'), >>>>> array('label' => 'Label of column 3', 'type' => 'number') >>>>> // etc... >>>>> ); >>>>> >>>>> $rows = array(); >>>>> while($r = mysql_fetch_assoc($query)) { >>>>> $temp = array(); >>>>> // each column needs to have data inserted via the $temp array >>>>> $temp[] = array('v' => $r['column1']); >>>>> $temp[] = array('v' => $r['column2']); >>>>> $temp[] = array('v' => $r['column3']); >>>>> // etc... >>>>> // insert the temp array into $rows >>>>> $rows[] = array('c' => $temp); >>>>> } >>>>> >>>>> // populate the table with rows of data >>>>> $table['rows'] = $rows; >>>>> >>>>> // encode the table as JSON >>>>> $jsonTable = json_encode($table); >>>>> >>>>> // set up header; first two prevent IE from caching queries >>>>> header('Cache-Control: no-cache, must-revalidate'); >>>>> header('Expires: Mon, 26 Jul 1997 05:00:00 GMT'); >>>>> header('Content-type: application/json'); >>>>> >>>>> // return the JSON data >>>>> echo $jsonTable; >>>>> ?> >>>>> >>>>> On Monday, February 25, 2013 3:58:55 PM UTC-5, akshita gupta wrote: >>>>>> >>>>>> Hello.. I am unable to display chart. Please help. I am unable to >>>>>> figure out the problem. >>>>>> >>>>>> getdata.php >>>>>> >>>>>> <?php >>>>>> >>>>>> mysql_connect('localhost','**aks****hita','123456'); >>>>>> mysql_select_db('rcusers'); >>>>>> >>>>>> $sqlquery1="select userid,group_name,req_nodes,**ac****tualPE from jobs >>>>>> <http://stackoverflow.com/questions/15073654/unable-to-extract-data-to-get-google-chart-nothing-is-being-displayed-but-getda#> >>>>>> where userid='zhang' limit 200"; >>>>>> >>>>>> $sqlresult1=mysql_query($**sqlqu****ery1); >>>>>> >>>>>> $rows=array(); >>>>>> while($r=mysql_fetch_assoc($**sq****lresult1)){ >>>>>> $rows[]=$r;}print json_encode($rows);?> >>>>>> >>>>>> chartDraw.php >>>>>> <html><head><!--Load the AJAX API --><script type="text/javascript" >>>>>> src="https://www.google.com/**js****api >>>>>> <https://www.google.com/jsapi>"></script><script >>>>>> src="https://ajax.googleapis.**c****om/ajax/libs/jquery/1.8.3/**jque****ry.min.js >>>>>> <https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js>" >>>>>> type="text/javascript"></**scrip****t> >>>>>> <script type="text/javascript"> >>>>>> //Load the visualization API and the piechart package >>>>>> google.load('visualization','**1****',{'packages':['corechart']})**; >>>>>> //Set a callback to run when the google visualization API is loaded >>>>>> google.setOnLoadCallback(drawc******hart); >>>>>> function drawChart(){ >>>>>> var jsonData = $.ajax({ >>>>>> url:"getData.php", >>>>>> dataType:"json", >>>>>> async:false >>>>>> }).responseText; >>>>>> //Create our data table out of JSON data loaded from servervar data=new >>>>>> google.visualization.DataTable******(jsonData); >>>>>> //Instantiate and draw our chart >>>>>> <http://stackoverflow.com/questions/15073654/unable-to-extract-data-to-get-google-chart-nothing-is-being-displayed-but-getda/15073745#>, >>>>>> passing in some optionsvar chart=new >>>>>> google.visualization.PieChart(******document.getElementById('**chart****_div')); >>>>>> chart.draw(data,{width:400,hei******ght:240});} >>>>>> </script></head> >>>>>> <body> >>>>>> <!--Div that will hold the pie chart --> >>>>>> <div id="chart_div"></div></body></html> >>>>>> >>>>>> >>>>>> >>>>>> On Tuesday, 26 July 2011 15:24:36 UTC-4, GerBen wrote: >>>>>>> >>>>>>> Hello Colleagues, >>>>>>> How can I read data from an external database (say, MS SQL Server or >>>>>>> MySQL) and show it in a Google Chart? >>>>>>> Thank you. >>>>>> >>>>>> -- >>>>> You received this message because you are subscribed to a topic in the >>>>> Google Groups "Google Visualization API" group. >>>>> To unsubscribe from this topic, visit https://groups.google.com/d/**to >>>>> **pic/google-visualization-**api/**UdOFybnvFo0/unsubscribe?**hl=en<https://groups.google.com/d/topic/google-visualization-api/UdOFybnvFo0/unsubscribe?hl=en> >>>>> . >>>>> To unsubscribe from this group and all its topics, send an email to >>>>> google-visualization-api+**unsub**[email protected]. >>>>> >>>>> To post to this group, send email to google-visua...@**googlegroups.** >>>>> com. >>>>> >>>>> Visit this group at http://groups.google.com/**group** >>>>> /google-visualization-**api?hl=**en<http://groups.google.com/group/google-visualization-api?hl=en> >>>>> . >>>>> For more options, visit >>>>> https://groups.google.com/**grou**ps/opt_out<https://groups.google.com/groups/opt_out> >>>>> . >>>>> >>>>> >>>>> >>>> >>>> >>>> >>>> -- >>>> Akshita Gupta >>>> Graduate CS Student >>>> University Of Florida, United States >>>> >>> -- >>> You received this message because you are subscribed to the Google >>> Groups "Google Visualization API" group. >>> To unsubscribe from this group and stop receiving emails from it, send >>> an email to google-visualization-api+**[email protected]. >>> >>> To post to this group, send email to google-visua...@**googlegroups.com. >>> Visit this group at http://groups.google.com/** >>> group/google-visualization-**api?hl=en<http://groups.google.com/group/google-visualization-api?hl=en> >>> . >>> For more options, visit >>> https://groups.google.com/**groups/opt_out<https://groups.google.com/groups/opt_out> >>> . >>> >>> >>> >> >> >> >> -- >> Akshita Gupta >> Graduate CS Student >> University Of Florida, United States >> > -- > You received this message because you are subscribed to a topic in the > Google Groups "Google Visualization API" group. > To unsubscribe from this topic, visit > https://groups.google.com/d/topic/google-visualization-api/UdOFybnvFo0/unsubscribe?hl=en > . > To unsubscribe from this group and all its topics, send an email to > [email protected]. > To post to this group, send email to > [email protected]. > Visit this group at > http://groups.google.com/group/google-visualization-api?hl=en. > For more options, visit https://groups.google.com/groups/opt_out. > > > -- Akshita Gupta Graduate CS Student University Of Florida, United States -- You received this message because you are subscribed to the Google Groups "Google Visualization API" group. To unsubscribe from this group and stop receiving emails from it, send an email to [email protected]. To post to this group, send email to [email protected]. Visit this group at http://groups.google.com/group/google-visualization-api?hl=en. For more options, visit https://groups.google.com/groups/opt_out.
