CODEWITHSUNDEEP
phpgoogle-visualization
Bilal
Bilal

Reputation: 2673

Google chart API is not displaying the chart using javascript/ajax

What I am doing is to display a graph when a user clicks a button. The chart is being fetched from a PHP file using javascript. Here is the code what i am actually doing.

This is the javascript function that fetches graph and attaches it to HTML DOM

function draw_graph(num) {

   var xmlhttp;
   if (window.XMLHttpRequest) { // code for IE7+, Firefox, Chrome, Opera, Safari
       xmlhttp=new XMLHttpRequest();
   } else { // code for IE6, IE5
       xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
   }

   xmlhttp.onreadystatechange = function() {
       if (xmlhttp.readyState==4 && xmlhttp.status==200) {
        var output = xmlhttp.responseText;
        document.getElementById('script_content').innerHTML = output;
       }
   }
   xmlhttp.open("GET","includes/getgraphdata.php?type="+num+"&mode=day",true);
   xmlhttp.send();

}

This is the PHP code, I am trying to draw a simple graph with dummy data

    <?php

echo "
    <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 drawChart() {
                            var data = new google.visualization.DataTable();
                            data.addColumn('string', 'Date');
                            data.addColumn('number', 'Sell');
                            data.addColumn('number', 'Purchase');
                            data.addRows([
                              ['12-03-2012', 150, 300],
                              ['12-04-2012', 250, 500]
                            ]);

                            var options = {
                              title: 'Graph'
                            };
                            var chart = new google.visualization.LineChart.(document.getElementById('temp'));
                            chart.draw(data, options);
                        }
                    </script>
    ";

The above code attached with the HTML DOM correctly, but graph is not displaying.

Upvotes: 0

Views: 985

Answers (2)

Bim
Bim

Reputation: 531

I've tried that before, you can't include text javascript code using ajax.

If you really want to do it that way you have to eval() the responseText string or have the javascript do something based on the string returned.

eg.

if(responseText == '1'){
 function1();
}else{
 function2();
}

Is there any reason you can't just include the php file instead?

<?php
require_once 'googleapi.php';
?>

Upvotes: 0

jmishra
jmishra

Reputation: 2081

this line

 var chart = new google.visualization.LineChart.(document.getElementById('temp'));

Remove . after LineChart. Hence, it is LineChart(document.getElementById('temp'));

Also place an alert("statement reached"); between the above line and the next line to track the error. If the error takes place, next line may not get executed, and thus use it as a debug advantage.

Upvotes: 1

Related Questions