Question

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.

Answer 1

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.