Databases
StackOverflow2013
Postsdbo
POPHP to JavaScript Chart; display w/button
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POPHP to JavaScript Chart; display w/button
    primarykey
    data
    text
    <p>The charts I am using are written in JavaScript, so I need to transfer mysql query arrays to JavaScript, creating the charts. The mysql queries are generated by drop down menus. On the web page is a button that, when clicked, should display the chart. All should be displayed on the same page.</p> <p>I have two drop down menus with names of runners in each. through onChange, each drop down menu calls the same JavaScript function - </p> <p>home.php</p> <pre><code>&lt;form id='awayPick'&gt; &lt;select name='awayRunner' id='awayRunner' onchange='Javascript: getitdone(this);/&gt; ...multiple options &lt;/form&gt; &lt;form id='homePick'&gt; &lt;select name='homeRunner' id='homeRunner' onchange='Javascript: getitdone(this);/&gt; ...multiple options &lt;/form&gt; </code></pre> <p>Js.js</p> <pre><code>function getitdone(str) { if (str=="") { document.getElementById("midSpa").innerHTML=""; return; } if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp11=new XMLHttpRequest(); } else {// code for IE6, IE5 xmlhttp11=new ActiveXObject("Microsoft.XMLHTTP"); } xmlhttp11.onreadystatechange=function() { if (xmlhttp11.readyState==4 &amp;&amp; xmlhttp11.status==200) { document.getElementById("midSpa").innerHTML=xmlhttp11.responseText; } } var awayRunner = document.getElementById('awayRunner').value; var homeRunner = document.getElementById('homeRunner').value; var queryString = "?awayRunner=" + awayRunner + "&amp;homeRunner=" + homeRunner; xmlhttp11.open("GET","getRunners.php" + queryString,true); xmlhttp11.send(null); } </code></pre> <p>getRunners.php</p> <pre><code>$home=$_GET['homeRunner']; $away=$_GET['awayRunner']; $db = db; $homeRunner=array(); $awayRunner = array(); $leagueRunner = array(); $getHome="select ... from $db where ... = '$home'"; $result2 = mysql_query($getHome); while($row = mysql_fetch_array($result2)){ $homeRunner[]= $row['...']; } $getAway="select ... from $db where ... ='$away'"; $result22 = mysql_query($getAway); while($row2 = mysql_fetch_array($result22)){ $awayRunner[]= $row2['...']; } $week = 0; while($week&lt;20){ $week++; $getLeague = "select ... from $db where ... = $week"; $resultLeague = mysql_query($getLeague); while($row3 = mysql_fetch_array($resultLeague)){ $leagueRunner[]=$row3['...']; } } </code></pre> <p>home.php</p> <pre><code>&lt;script type="text/javascript"&gt; function chartOne(){ $(document).ready(function() { var chart = new Highcharts.Chart({ chart: { renderTo:'container', zoomType:'xy' }, title: { text: 'title' }, xAxis: { categories: [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19] }, yAxis: [{ // Primary yAxis labels: { formatter: function() { return this.value + 'pts' }, style: { color: '#89A54E' } }, title: { text: 'text', style: { color: '#89A54E' } } }, { // Secondary yAxis title: { text:null, }, }], tooltip: { formatter: function() { return '' + this.y + (this.series.name == ' ' ? ' mm' : 'pts'); } }, legend: { layout: 'horizontal', backgroundColor: '#FFFFFF', align: 'left', verticalAlign: 'top', x: 69, y: 20, floating: true, shadow: true, }, plotOptions: { column: { pointPadding: 0.2, borderWidth: 0 } }, series: [ { name:'adfg', data: [ &lt;?php echo join($awayRunner, ',');?&gt;], type: 'column', pointStart: 0 //pointInterval }, { name:'fghtrht', data: [&lt;?php echo join($homeRunner, ',');?&gt;], type: 'column', pointStart: 0 //pointInterval }, { name: 'League Avg', data: [ &lt;?php echo join($leagueRunner, ',');?&gt;], type:'spline', pointStart: 0 //pointInterval }, ] }); }); } &lt;/script&gt; &lt;input type='submit' value='chart One' onclick='chartOne()'&gt;&lt;/input&gt; &lt;div id='container' style='width: 50%; height: 200px; float: left;'&gt;&lt;/div&gt; </code></pre> <p>How do I get the php arrays back to the home page into the javascript? Should I place the JavaScript somewhere else?</p> <p>The thing is, I have gotten all of this to run on separate pages when I didnt try to pass the runners names through. If I explicitly stated the runners names on the getRunners.php page, everything works great. I can not get the the php variables to insert into the JavaScript to generate the charts.</p> <p>I've tried to assign the js code to a php variable in the getRunners.php page then echo the variable on the home.php page which didnt work. </p> <p>It seems, once the home page is loaded, the JS remains the same. How do I pass through the PHP variables after the drop down options have been selected, allowing the chart to be displayed only after the button is clicked? </p> <p>Thank you. I hope this is more clear than my previous question. </p>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. USbrandon-estrella-dev
    1. USbrandon-estrella-dev
    plurals
    1. PL
      singulars
      1. LTLinked
    2. PL
      singulars
      1. LTLinked
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. COAre you referring to [`heredoc`](http://www.tuxradar.com/practicalphp/2/6/3)?
      singulars
      1. POPHP to JavaScript Chart; display w/button
      1. USMatt
    2. COI re-read this and I'm not sure if it is very clear. I, more or less, want a button to call a java function only after a dropdown menu has queried a DB which creates the javascript I need the button to call. All of this needs to be displayed on the same web page. The problem is I can't get the javascript to be "re-written" after the web page is initially compiled.
      singulars
      1. POPHP to JavaScript Chart; display w/button
      1. USbrandon-estrella-dev
    3. COI have a feeling you may be writing your javascript function in a way that's not extensible or flexible. If you do it right, you should only need to pass parameters to the function; not write it dynamically.
      singulars
      1. POPHP to JavaScript Chart; display w/button
      1. USMatt
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload