-1

I am trying to build a web page where a chart will be displayed and the data will be loaded from a drop down menu. I have 2 data sets but cannot perform the correct MySql request I think. The 2 data sets a stored in the same database but different tables. I cannot place them in the same table because they are not the same length and not the same frequency.(one is monthly data and the other weekly)

Here's the code. Any help would be very much appreciated!

<?php

 mysql_connect('xxxxxxxxxxxx.com', 'xxxxx', 'xxxxxx') or die(mysql_error());
 mysql_select_db("database123") or die(mysql_error());


 $result1 = mysql_query("SELECT * FROM table1")
 or die(mysql_error());  

 $data1  = array();


 while ($row1 = mysql_fetch_array( $result1)) {

  extract($row1);

    $datetime1 = date('Y, n, j', strtotime($table1_date )); 

    $datetime2 = 'Date.UTC('.$datetime1.')'; 


     $data[] = "[$datetime2, $table1_data]";


    }

  ?>

 <?php

 mysql_connect('xxxxxxxxxxxx.com', 'xxxxx', 'xxxxxx') or die(mysql_error());
 mysql_select_db("database123") or die(mysql_error());


 $result2 = mysql_query("SELECT * FROM table2")
 or die(mysql_error());  

 $data2  = array();


 while ($row2 = mysql_fetch_array( $result2)) {

  extract($row2);

    $datetime3 = date('Y, n, j', strtotime($table2_date )); 

    $datetime4 = 'Date.UTC('.$datetime3.')'; 


    $data2[] = "[$datetime4, $table2_data]";


    }

   ?>




   <!DOCTYPE html>
   <html lang="en-US">
  <head>

<meta charset="utf-8" />


     <script type="text/javascript"  src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>


    <script type="text/javascript">

      $(function () {

      var options = {
     chart: {
     renderTo: 'container',
     defaultSeriesType: 'column'
    }, 
     series: [{name: 'A', data: [<?php echo join($data, ',') ?>]}]
    };
    var chart = new Highcharts.Chart(options);

            });


     $("#list").on('change', function(){
  //alert('f')
  var selVal = $("#list").val();
  if(selVal == "A" || selVal == '')
     {
    options.series = [{name: 'A', data: [<?php echo join($data, ',') ?>]}]
     }
     else
     {
     options.series = [{name: 'D', data: [<?php echo join($data2, ',') ?>]}]
     }  
     var chart = new Highcharts.Chart(options);    
     });

     </script>


     </head>
     <body id="index" class="home">



     <SELECT id="list">
     <option VALUE="A">Data Set A</option>
     <option VALUE="B">Data Set B</option>

     </SELECT>
     <button id="change">Refresh Table</button>

     <div id="container" style="min-width: 350px; height: 400px; margin: 0 auto"></div>



     <script src="http://code.highcharts.com/highcharts.js"></script>
    <script src="http://code.highcharts.com/modules/exporting.js"></script>



     </body>
     </html>
user3460059
  • 7
  • 1
  • 2
  • First off, you don't need to connect to the database twice, you need to store it into its own variable and use it for each query. Second, using `extract()` is [bad practice](http://stackoverflow.com/questions/829407/what-is-so-wrong-with-extract) which will clutter your symbol table. – Sunny Patel Mar 27 '14 at 19:10

1 Answers1

0

I advice to prepare php script which will get parameter form url (like $_GET['table']), and call database query. After that, return correct array, by json_encode(). In javascript you can use $.getJSON() and load data from php as json, then use highcharts.

Sebastian Bochan
  • 37,348
  • 3
  • 49
  • 75