show graph on using google chart api

Question

I am trying to create pie chart using google chart api. It has no issue, and shows perfectly when testing on localhost.

But when I put entire code on my ec2 linux instance. It create chart box, gives title but chart is not drawn. What can be the mistake?

data is taken from mysql databaase. I checked table and it's content, but it is same as on my localhost.

url.php

<html>
   <head>
      <title>ThenWat</title>

    <meta content="text/html;charset=utf-8" http-equiv="Content-Type" />
    <meta content="utf-8" http-equiv="encoding" />
     <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>   
     <script type="text/javascript" src="https://www.google.com/jsapi"></script>
     <script type="text/javascript">
    google.load('visualization', '1', {'packages':['corechart']});
    google.setOnLoadCallback(drawChart);    


    function drawVisualization(dataFromAjax) {

    var jsonData = $.ajax({
          url: "ajax_graph_temp.php",
          dataType:"json",
          async: false
          }).responseText;
    var data = new google.visualization.DataTable(jsonData);
        var options = {
           title: 'Index analysis',
          is3D: 'true',
          width: 800,
          height: 600
        };
        alert("");
        var chart = new google.visualization.PieChart(document.getElementById('txtHint'));
        chart.draw(data, options);
         }
function makeAjaxCall() {
      $.ajax({url:'url.php',
              data: {},
              success: function(responseData) {
                         drawVisualization();
                       }
        });
    }
     </script>
   </head>
   <body style="height: 560px">
           <img alt="" src= "3.png" style="top: 38px; right: 689px; position: absolute; height: 91px; width: 417px"/>
               <form action="data.php" method="POST" onsubmit="showUser(this, event)">
            <div style="z-index: 1; left: 470px; top: 100px; position: absolute; margin-top: 0px">              
               <label>Enter URL: <input type="text" name="sent"></label><br/>
            </div>
            <div style="z-index: 1; left: 420px; top: 160px; position: absolute; margin-top: 0px">  <button> Fire me </button>      
            </div>
         </form>
         <div style="z-index: 1; left: 660px; top: 160px; position: absolute; margin-top: 0px"> 
            <button onclick="makeAjaxCall(); return false;" value="View Graph" > View Graph </button>
         </div>

         <div id="txtHint" style="z-index: 1; left: 220px; top: 250px; position: absolute; margin-top: 0px">        
         </div>

   </body>
</html>

ajax_graph_temp.php

<?php
$mysqli =mysqli_connect('127.0.0.1:3306', 'root', 'root', 'test');
if (mysqli_connect_errno()) {
    echo "Failed to connect to MySQL: ".mysqli_connect_error();
}
  $result = $mysqli->query('SELECT * FROM view_name');

  $rows = array();
  $table = array();
  $table['cols'] = array(
    array('label' => 'pcount', 'type' => 'string'),
    array('label' => 'ncount', 'type' => 'number')
);
    /* Extract the information from $result */
    foreach($result as $r) {
      $temp = array();
      $temp[] = array('v' => (string) $r['ind_type']); 
      $temp[] = array('v' => (int) $r['Index_val']); 
      $rows[] = array('c' => $temp);
    }

$table['rows'] = $rows;

// convert data into JSON format
$jsonTable = json_encode($table);
echo $jsonTable;
?>

asgallant · Accepted Answer · 2013-09-18 15:07:40Z

1

The way that you have your code set up, you are making two AJAX calls, the first of which doesn't seem to accomplish anything:

function makeAjaxCall() {
    $.ajax({url:'url.php',
        data: {},
        success: function(responseData) {
            drawVisualization();
        }
    });
}

Do you have a "url.php" for that AJAX call to query? If not, then your success function will never fire, and thus never call drawVisualization. Unless you have other plans for this function, you could simplify your code like this:

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

function drawVisualization(dataFromAjax) {
    var data = new google.visualization.DataTable(dataFromAjax);
    var options = {
        title: 'Index analysis',
        is3D: 'true',
        width: 800,
        height: 600
    };
    var chart = new google.visualization.PieChart(document.getElementById('txtHint'));
    chart.draw(data, options);
}
function makeAjaxCall() {
    $.ajax({
        url: "ajax_graph_temp.php",
        dataType:"json",
        success: drawVisualization
    });
}

answered Sep 18, 2013 at 15:07

asgallant

26.4k6 gold badges75 silver badges91 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

davidkonrad Over a year ago

Should it not be success: function(json) { drawVisualization(json);} ? - or success : drawVisualization(json) ?

asgallant Over a year ago

You could do the first, but not the second. success: drawVisualization(json) would call the drawVisualization function and pass its return value to success. It would work only if drawVisualization returned a function.

Collectives™ on Stack Overflow

show graph on using google chart api

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related