display google chart only after you click button

64 views
Skip to first unread message

anvesh reddy

unread,
May 21, 2017, 5:58:29 PM5/21/17
to Google Visualization API
I had created a google chart which i would like to use it in my webpage. i want it to be displayed only when i click a button.I have no idea how to do it and tried my best to make it possible but failed.Can anyone suggest me the propable answer?
 
here is my code:


 

<html>
<head>
<title>Google Charts </title>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
   <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

   <script>

 google.charts.load('current', {packages: ['corechart']});
    google.charts.setOnLoadCallback(drawChart);                 
 
$(document).ready(function() {
  $("#btn").on("click", function() {
    drawChart();
  });
});

<?php
$sql = mysql_connect("localhost","root","");
if(!$sql)
{
    echo "Connection Not Created";
}
$con = mysql_select_db("PRJ");
if(!$sql)
{
    echo "Database Not Connected";
}
$sql = "select * from LF";
$result = mysql_query($sql);

$count=0;
while($row = mysql_fetch_array($result))
{
$a[]=$row['x'];
$b[]=$row['y'];
$count++;
 }
  
$totx=0;
$toty=0;
$xsqtot=0;
$xytot=0;

for($i=0;$i<$count;$i++)
{
$z[]=log($a[$i]);
/*echo "$z[$i]</br>";*/
}

for($i=0;$i<$count;$i++)
{
$totx=$totx+$z[$i];
$xpow[]=$z[$i]*$z[$i];
$xsqtot=$xsqtot+$xpow[$i];
/*echo "<br>$xpow[$i]</br>";*/
}

/*echo $xsqtot;*/

for($i=0;$i<$count;$i++)
{
$g[]=log($b[$i]);
/*$h[]=round($g[$i],2);
echo"$g[$i]</br>";*/
}


for($i=0;$i<$count;$i++)
{
$toty=$toty+$g[$i];
$product[]=$g[$i]*$z[$i];
/*echo "$product[$i]</br>";*/
}

/*echo $totx;
echo $toty;*/

for($i=0;$i<$count;$i++)
{
$xytot=$xytot+$product[$i];
}

/*echo $xytot;*/



$qnr=($count*$xytot)-($totx*$toty);
$qdr=($count*$xsqtot)-($totx*$totx);
$ct2=$qnr/$qdr;
$pnr=($toty)-($ct2*$totx);
$ct1=$pnr/$count;
/*
echo"<br>$ct1</br>";
echo"<br>$ct2</br>";*/
$r=exp($ct1);
/*echo "$r</br>";

*/

for($i=0;$i<$count;$i++)
{
$s[]=pow($a[$i],$ct2);
/*echo"<br>$s[$i]</br>";*/
}

for($i=0;$i<$count;$i++)
{
$cfty[]=$r*$s[$i];
/*echo"<br>$cfty[$i]</br>";*/
}






?>

var x=new Array();
<?php 

for($i=0;$i<$count;$i++){

                     echo "x[$i]=".$a[$i].";\n";}
                     
             ?>
var y=new Array();
<?php 

for($i=0;$i<$count;$i++){

                     echo "y[$i]=".$b[$i].";\n";}
                     
             ?>
var z=new Array();
<?php 

for($i=0;$i<$count;$i++){

                     echo "z[$i]=".$cfty[$i].";\n";}
                     
             ?>

function drawChart() 
{
   var data = new google.visualization.DataTable();
   data.addColumn('number', 'independent');
 data.addColumn('number', 'Dependent');
data.addColumn('number', 'TL');
           
for(var i=0;i<x.length;i++)
{
   data.addRows([[x[i],y[i],z[i]]]);
}      
   
     var options = {
backgroundColor: {strokeWidth:2},
'title':'LAT VS LONG ',
 vAxis: {title: 'Y'},
      hAxis: {title: 'X',

viewWindowMode:'explicit',
              viewWindow:{
           min:0,
              }

},
      'width':550,
      'height':400,
pointSize:4,

series:{
0:{lineWidth:0},
1:{curveType:'function',pointSize:0,lineWidth:3.5}
}
 };

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

</script>

</head>
<body>
<button id="btn" type="button" class="btn btn-primary">Primary</button>
 <div id="chart" style="width: 900px; height: 500px;"></div>

 
</body>
</html>
Reply all
Reply to author
Forward
0 new messages