title: Combination of Jquery and SQL
body: <p>I am looking to build a website which has a page, upon which there are some jChartFX charts, which are driven by a MySQL query.  The query is driven by a date selected on a drop down on the main page.</p>
  
  <p>I am struggling to structure the code properly (all completely self taught so fraught with poor practice!) so that the graph will update when a different option is selected.</p>
  
  <p>The code is listed below, however my question is; where should the code sit for the drawing the chart to make this work.  Should the function loadChart exist on the main page and echo the data in from the query from another page, or should I have the whole function on a separate page, which is loaded by the jquery, or option 3 - am I completely wide of the mark?</p>
  
  <p>The code for the chart is; &lt;> The echo $data is the section which echos the MySQL output, and works fine when the code and the SQL query is fixed.</p>
  
  <pre><code>&lt;script&gt;
      var chart1;
      function loadChart()
        {        
             chart1 = new cfx.Chart();
              chart1.getData().setSeries(1);
                  chart1.getAxisY().setMin(100);
                  chart1.getAxisY().setMax(1000);
                  var series1 = chart1.getSeries().getItem(0);                     series1.setGallery(cfx.Gallery.Lines);
  
              var data = &lt;?php echo json_encode($temp, JSON_NUMERIC_CHECK); ?&gt;;
                  chart1.setDataSource(data);
                  var divHolder = document.getElementById('ChartDiv');
              chart1.create(divHolder);            
           }
  &lt;/script&gt;
  </code></pre>
  
  <p>The SQL Query is</p>
  
  <pre><code>SELECT COUNT(`column_Date`) AS 'Count' FROM Dates WHERE `column_Date` &gt; date('2013-06-01')
  </code></pre>
  
  <p>Note: Where the date is above 2013-06-01, I want this to change based on the drop down from the main page.</p>
  
  <pre><code>    &lt;head&gt;
      &lt;script src="js/jquery-1.7.1.min.js"&gt;&lt;/script&gt; 
      &lt;script&gt;
          $(document).ready(function(){
              $("#optionschosenid").click(function(){
                  if($("#optionsid").val() == "OptionA" ){
                      $("#chart").load("weeks.php");
                  }
                  else {
                      $("#chart").load("text_test.php");
                  }
  
              });
          });
   &lt;/script&gt;
  &lt;/head&gt;
  &lt;body onload="loadChart()"&gt;
  &lt;div id="row"&gt;
      &lt;form method="post" id="weekcommencing" name="dateselector"&gt;
          &lt;select id="optionsid" name="optionsname"&gt;
              &lt;option value="2013-06-01"&gt;June&lt;/option&gt;
              &lt;option value="2013-01-01"&gt;January&lt;/option&gt;
          &lt;/select&gt;
          &lt;button name="optionschosenname" id="optionschosenid"&gt; Select Additional Option &lt;/button&gt;
      &lt;/form&gt;
  &lt;/div&gt; 
      &lt;div id="chart" name="chart"&gt;
      &lt;?php echo $data;
          echo 'hello'; ?&gt;    
      &lt;br /&gt; --&gt;
      Test 0.11
     &lt;/div&gt;
     &lt;button id="testId"&gt;click me&lt;/button&gt;
  
     &lt;br /&gt;
     &lt;br /&gt;
     &lt;div id="ChartDiv"&gt;
  
     &lt;/div&gt;
     &lt;/body&gt;
  </code></pre>