How to use MySQL DB data inside JavaScript function?

Question

I need to populate the chart created by the JavaScript function. The chart should be populated with MySQL DB data. I have SQL query defined in myquery.php. This php code returns an array that should be used to create the chart. The question is how to execute myquery.php and get the output array that I can further use inside the JavaScript function createChartControl?

<script type="text/javascript" language="JavaScript">
function createChartControl(htmlDiv1)
{
   // Draw chart
}
(function(){
    createChartControl('schedule');
})();
</script>

http://www.w3.org/TR/XMLHttpRequest/ and just google it for uses: https://www.google.com/search?q=xmlhttprequest — TheZ, Aug 10 '12 at 18:21
Do you need to populate the chart after the initial page load, or do you want to populate the data at the initial page load (i.e., use PHP to echo out some javascript variable or object declarations?) — Mike Brant, Aug 10 '12 at 18:24
First of all, I need to know how are your sources. You want to get the data with ajax, right?! Do you use any ajax framework on Javascript side? On PHP side do you use any view framework (like smarty)? — RicardoS, Aug 10 '12 at 18:24

score 1 · Accepted Answer · answered Aug 10 '12 at 18:44

jQuery will make your life so much easier when it comes to AJAX. If you are really against using a library, you can look at examples for xmlhttprequest, which can be used in plain javascript.

jQuery would look something like:

function ajaxCall(){

    $.ajax({
         url: 'myquery.php',
         type: 'POST',
         data: {any_var: var_value},
         success: function(data) {
                  var returned_array = $.parseJSON(data)
                  createChartControl(htmlDiv1, returned_array)
                  }
    })
}

Basically you send any data you want to myquery.php in the any_var, retrieve that value in myquery.php with the $_POST['any_var'], run your query, then json_encode the array you want to be passed back to your javascript, and finally parse your returned data in the success function to be a usable javascript object. Now you can do what you want with it, but in my example you can see I send that returned_array to your createChartControl() function (which needs to have an added parameter for your array.

Tada, ajax magic.

score 1 · Answer 2 · edited May 23 '17 at 12:12

I strongly suggest to you to use jQuery library on JS side. ( http://jquery.com/ )

1 - Without Ajax:(If your data will be available when the page is loaded):

<script type="text/javascript" language="JavaScript">
var myData = <?php echo json_encode($myArray); ?>;

function createChartControl(htmlDiv1)
{
   // your code to draw chart
   // read myData a fill the chart
}
(function(){
    createChartControl('schedule');
})();
</script>

2 - With ajax (using jQuery):

function loadMyData(){
 $.getJSON('ajax/myquery.php', function(data) {
  var items = [];

  $.each(data, function(key, val) {
    items.push(val);
  });

  $('<ul/>', {
    'class': 'my-new-list',
    html: items.join('')
  }).appendTo('body');
 });
}

Useful sites: http://php.net/manual/pt_BR/function.json-encode.php
http://api.jquery.com/jQuery.getJSON/
Parse JSON in JavaScript?

How to use MySQL DB data inside JavaScript function?

2 Answers2