How to use MySQL DB data inside JavaScript function? - php

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>

Answer 1

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.

Answer 2

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?