Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Post an Article
Welcome To Ask or Share your Answers For Others

Categories

php - Google radar chart not rendering when more than 2 columns of input is given

0 votes
257 views
in Technique[技术] by (71.8m points)

php - Google radar chart not rendering when more than 2 columns of input is given

Hi I am trying to use google radar charts in my android app my goal was I am trying to send the user name to PHP file and From PHP file I would like to retrieve the data from from the database and display the chart. I am do it sucessfully but my I am unable render the chart can any one tell me the problem to solve it.

I FOUND PROBLEM REGARDING RENDERING THE GRAPH WHEN I GIVE INPUT MORE THAN COLUMNS AS SHOWN BELONG I AM UNABLE TO RENDER THE GRAPH.

THIS INPUT IS WORKING [100,10], [80,20], [60,30], [30,40], [25,50], [20,60], [10,70],

THIS TYPE OF INPUT IS NOT WORKING

          [100,10,30],
          [80,20,30],
          [60,30,30],
          [30,40,30],
          [25,50,50],
          [20,60,60],
          [10,70,80],


<html>
 <head>
    <title></title>      
 </head>  
 <?php  $con=mysql_connect("localhost","root", "innernet") or die("Failed to connect with database!!!!");
        mysql_select_db("mobiledb", $con);       
        //$sth = mysql_query("SELECT `id`, `Q1`, `Q2` FROM `table2` WHERE `id`=8710058770");        
        $user= $_POST["user"];
        echo "$user";
        $response["cols"] = array();    
       // $news = array();
        //$news["id"] = "";
        //$news["label"] = "ID";                                           
        //$news["type"] = "string";                                           

        //array_push($response["cols"], $news);

        $news = array();

        $news["label"] = "Q1a";                                           
        //$news["type"] = "number";                                           

        array_push($response["cols"], $news);

        $news = array();

        $news["label"] = "Q1b";                                           
        //$news["type"] = "number";                                           

        array_push($response["cols"], $news);
        $news = array();

        $news["label"] = "Q2a";                                           
        //$news["type"] = "number";                                           

        array_push($response["cols"], $news);       
         $news = array();

        $news["label"] = "Q2b";                                           
        //$news["type"] = "number";                                           

        array_push($response["cols"], $news); 
        $news = array();

        $news["label"] = "Q3a";                                           
        //$news["type"] = "number";                                           

        array_push($response["cols"], $news);       
         $news = array();

        $news["label"] = "Q3b";                                           
        //$news["type"] = "number";                                           

        array_push($response["cols"], $news);
        $news = array();

        $news["label"] = "Q4a";                                           
        //$news["type"] = "number";                                           

        array_push($response["cols"], $news);       
         $news = array();

        $news["label"] = "Q4b";                                           
        //$news["type"] = "number";                                           

        array_push($response["cols"], $news);
        $news = array();

        $news["label"] = "Q5a";                                           
        //$news["type"] = "number";                                           

        array_push($response["cols"], $news);       
         $news = array();

        $news["label"] = "Q5b";                                           
        //$news["type"] = "number";                                           

        array_push($response["cols"], $news);
        $news = array();

        $news["label"] = "Q6a";                                           
        //$news["type"] = "number";                                           

        array_push($response["cols"], $news);       
         $news = array();

        $news["label"] = "Q6b";                                           
        //$news["type"] = "number";                                           

        array_push($response["cols"], $news);
        $news = array();

        $news["label"] = "Q7a";                                           
        //$news["type"] = "number";                                           

        array_push($response["cols"], $news);       
         $news = array();

        $news["label"] = "Q7b";                                           
        //$news["type"] = "number";                                           

        array_push($response["cols"], $news);
        $news = array();

        $news["label"] = "Q8a";                                           
        //$news["type"] = "number";                                           

        array_push($response["cols"], $news);       
         $news = array();

        $news["label"] = "Q8b";                                           
        //$news["type"] = "number";                                           

        array_push($response["cols"], $news);
        $news = array();

        $news["label"] = "Q9a";                                           
        //$news["type"] = "number";                                           

        array_push($response["cols"], $news);       
         $news = array();

        $news["label"] = "Q9b";                                           
        //$news["type"] = "number";                                           

        array_push($response["cols"], $news);
       // $news = array();
      //  $news["id"] = "";
        //$news["label"] = "ts";                                           
      //  $news["type"] = "number";                                           

       // array_push($response["cols"], $news);       


        $result = mysql_query("SELECT  `Q1a`, `Q1b`, `Q2a`, `Q2b`, `Q3a`, `Q3b`, `Q4a`, `Q4b`, `Q5a`, `Q5b`, `Q6a`, `Q6b`, `Q7a`, `Q7b`, `Q8a`, `Q8b`, `Q9a`, `Q9b` FROM goaltest WHERE id='test'") or die(mysql_error());

        if (mysql_num_rows($result) > 0)
        {       
            $response["rows"] = array();    $table = array();   $rows = array();  
            while ($row = mysql_fetch_array($result))
            {        
                $temp = array();           
                //$temp[] = array('v' => (string) $row['id']);          
                $temp[] = array('v' => (int) $row['Q1a']);
                $temp[] = array('v' => (int) $row['Q1b']);
                $temp[] = array('v' => (int) $row['Q2a']);
                $temp[] = array('v' => (int) $row['Q2b']);
                $temp[] = array('v' => (int) $row['Q3a']);
                $temp[] = array('v' => (int) $row['Q3b']);
                $temp[] = array('v' => (int) $row['Q4a']);
                $temp[] = array('v' => (int) $row['Q4b']);
                $temp[] = array('v' => (int) $row['Q5a']);
                $temp[] = array('v' => (int) $row['Q5b']);
                $temp[] = array('v' => (int) $row['Q6a']);
                $temp[] = array('v' => (int) $row['Q6b']);
                $temp[] = array('v' => (int) $row['Q7a']);
                $temp[] = array('v' => (int) $row['Q7b']);
                $temp[] = array('v' => (int) $row['Q8a']);
                $temp[] = array('v' => (int) $row['Q8b']);
                $temp[] = array('v' => (int) $row['Q9a']);
                $temp[] = array('v' => (int) $row['Q9b']);
                //$temp[] = array('v' => (int) $row['ts']);

                array_push($response["rows"], array('c' => $temp));                                      
            }            
            echo json_encode($response);             
        }



    ?>

    <!--Load the AJAX API -->
    <script type="text/javascript" src="http://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: ['imagechart']});
    </script>
    <script type="text/javascript">
      function drawVisualization() {


        var response = '<?php echo json_encode($response); ?>';     alert(' hi ' + response);            
        var obj = eval ("(" + response + ")");  
           var options = {cht: 'rs', chco: '00FF00,FF00FF', chg: '25.0,25.0,4.0,4.0', chm: 'B,FF000080,0,1.0,5.0|B,FF990080,1,1.0,5.0'};
            // Chart API chart type 'rs' is radar chart
            options.cht = 'rs';

            // set the line colors
            //options.colors = ['#00FF00' , '#FF00FF'];

            // fill the area under the lines
            options.fill = true;

            // create a grid for the chart
            //options.chg = '25.0,25.0,4.0,4.0';


            var dataTable = google.visualization.DataTable(response);


            var chart = new google.visualization.ImageChart(document.getElementById('visualization'));
            chart.draw(dataTable, options);
      }


      google.setOnLoadCallback(drawVisualization);
    </script>
<body style="font-family: Arial;border: 0 none;">
    <div id="visualization" style="width: 300px; height: 300px;"></div>
  </body>
</html>

Here is my javascript code which is rendered.

<html>
 <head>
    <title></title>      
 </head>  
 {"cols":[{"label":"Q1a"},{"label":"Q1b"},{"label":"Q2a"},{"label":"Q2b"},{"label":"Q3a"},{"label":"Q3b"},{"label":"Q4a"},{"label":"Q4b"},{"label":"Q5a"},{"label":"Q5b"},{"label":"Q6a"},{"label":"Q6b"},{"label":"Q7a"},{"label":"Q7b"},{"label":"Q8a"},{"label":"Q8b"},{"label":"Q9a"},{"label":"Q9b"}],"rows":[{"c":[{"v":12},{"v":34},{"v":132},{"v":3},{"v":23},{"v":23},{"v":13},{"v":13},{"v":13},{"v":13},{"v":14},{"v":14},{"v":13},{"v":21},{"v":12},{"v":12},{"v":12},{"v":23}]},{"c":[{"v":10},{"v":52},{"v":16},{"v":61},{"v":9},{"v":31},{"v":20},{"v":48},{"v":18},{"v":64},{"v":38},{"v":64},{"v":19},{"v":56},{"v":35},{"v":57},{"v":37},{"v":55}]}]}
    <!--Load the AJAX API -->
    <script type="text/javascript" src="http://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: ['imagechart']});
    </script>
    <script type="text/javascript">
      function drawVisualization() {


        var response = '{"cols":[{"label":"Q1a"},{"label":"Q1b"},{"label":"Q2a"},{"label":"Q2b"},{"label":"Q3a"},{"label":"Q3b"},{"label":"Q4a"},{"label":"Q4b"},{"label":"Q5a"},{"label":"Q5b"},{"label":"Q6a"},{"label":"Q6b"},{"label":"Q7a"},{"label":"Q7b"},{"label":"Q8a"},{"label":"Q8b"},{"label":"Q9a"},{"label":"Q9b"}],"rows":[{"c":[{"v":12},{"v":34},{"v":132},{"v":3},{"v":23},{"v":23},{"v":13},{"v":13},{"v":13},{"v":13},{"v":14},{"v":14},{"v":13},{"v":21},{"v":12},{"v":12},{"v":12},{"v":23}]},{"c":[{"v":10},{"v":52},{"v":16},{"v":61},{"v":9},{"v":31},{"v":20},{"v":48},{"v":18},{"v":64},{"v":38},{"v":64},{"v":19},{"v":56},{"v":35},{"v":57},{"v":37},{"v":55}]}]}';     alert(' hi ' + response);            
        var obj = eval ("(" + response + ")");  
           var options = {cht: 'rs', chco: '00FF00,FF00FF', chg: '25.0,25.0,4.0,4.0', chm: 'B,FF000080,0,1.0,5.0|B,FF990080,1,1.0,5.0'};
            //

与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)

You are loading the wrong chart library:

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

should be:

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

Also, you have a trailing comma at the end of your options array, which you should remove:

var options = {cht: 'rs', chco: '00FF00,FF00FF', chg: '25.0,25.0,4.0,4.0', chm: 'B,FF000080,0,1.0,5.0|B,FF990080,1,1.0,5.0'};

You can simplify your handling of the JSON as well, as there is no need to input it as a string and then eval it - you can just use the output as is:

var data = new google.visualization.DataTable(<?php echo json_encode($response); ?>);

Edit:

There are a few more things you should do. First, remove this line:

echo json_encode($response);

from the PHP section at the top, as it is printing out the json string into your HTML where you don't want it. Second, move the script tag for your javascript into either the <head> or <body> elements, as <script> is not a valid child of <html>. Third, you are missing the new keyword in front of the DataTable constructor:

var dataTable = new google.visualization.DataTable(response);

Those adjustments should fix it you.


与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界，一个免费开放的程序员编程交流平台！开放，进步，分享！让技术改变生活，让极客改变未来！ Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

Just Browsing Browsing

1.4m articles

1.4m replys

5 comments

57.0k users

Most popular tags

Snow Theme by Q2A Market
Powered by Question2Answer
...