CODEWITHSUNDEEP
javascriptphpjqplot
Shuvo Shams
Shuvo Shams

Reputation: 653

Passing values for JQPlot from PHP

As a novice js and jqplot programmer, I need guidance on passing an array of value from php to an external javascript for plotting (using jqplot). I am confused about the order and how html, php & external js, jqplot is called. A short sample code structure will be very helpful to follow. We may use the following sample codes as guide. Thanks

$(document).ready(function(){
  var plot1 = $.jqplot ('chart1',[[3,7,9,1,4,6,8,2,5]],{title: 'Plot'});
});

Instead of the fixed data points above, I want them to dynamically loaded via an array from the following php script.

<?php
  $Start_Value = $_POST['Start'];
  $End_Value = $_POST['End'];

  for($i=$Start_Value;$i<=$End_Value;$i+++)
     $Plot_Val[$i] = $i + 2;
  json_encode($Plot_Val);
?>

Upvotes: 0

Views: 417

Answers (2)

Traveling Tech Guy
Traveling Tech Guy

Reputation: 27811

You have several options. Here are the 2 easiest:

  1. Just 'paste' the array from PHP as a JavaScript global variable.
    Add <script>var myData = <%= json_encode($Plot_Val); %>;</script> at the top of your page and then use myData in place of the data array.
  2. Even better option is to use Ajax to call the PHP page from JavaScript and get the results , separating front-end and back-end code.

Upvotes: 1

tomca32
tomca32

Reputation: 1140

Best way is to use AJAX, something like this in JS:

$.ajax({
type:'POST',
url:'path/to/your.php',
data: {start: startValue, end: endValue}, //passing params to php
success: function (response) {
  console.log(response) // check what kind of stuff you got back :)
  var values = JSON.parse(response);
  // do stuff with this data
}
});

Update: To get your values from a form, you cannot put form action to js, but rather use js to get the values from a form. So the form itself shouldn't do a POST request, but rather the js should take the values from a form and send the POST.

Something like this:

<form>
<input type="text" id="start">
<input type="text" id="end">
<button id="submitButton">Submit Me!</button>
</form>

JS, we will wrap the above AJAX code into a function:

function submitValues(startValue, endValue) {
  $.ajax({
  type:'POST',
  url:'path/to/your.php',
  data: {start: startValue, end: endValue}, //passing params to php
  success: function (response) {
    console.log(response) // check what kind of stuff you got back :)
    var values = JSON.parse(response);
    // do stuff with this data
  }
  });
}

$(document).on('click', '#submitButton', function(){
  var start = Number($('#start').val());
  var end = Number($('#end').val());
  //I guess you need numbers instead of text, that's why they are wrapped inside Number()
  submitValues(start, end);
});

This should work. Keep in mind that I have no idea what your form looks like, this is just a dummy example, but it should be similar enough. You get the form values with the jQuery's .val() method and then give those values to the ajax function.

Upvotes: 0

Related Questions