how to display the highchart data with data serialize from a form using button onclick?

Question

I have a problem here. I am trying to display my data in a highchart instance. The query for the data is contains WHERE clauses in there. Because of that where clause I need to serialize the data that needs to get into my PHP then call the function for showing the data to the highchart. I tried many code for doing that but none of my code is working for it.

I use this code for calling the data. For information the form for getting the value to the php I'm using #form_input10

$(function () {
   var chart;
   $(document).on('click','#display',function(e) {
    var json = $("#form_input10").serialize();
    $.getJSON("../php/termocouple/line_termocouple.php", function(json) {
    
     chart = new Highcharts.Chart({
      chart: {
       renderTo: 'chart1',
       type: 'line'
       
      },
      exporting: { 
      enabled: false 
      },
      title: {
       text: 'Termocouple Graph Result'
       
      },
      subtitle: {
       text: ''
      
      },
      xAxis: {
       title: {
        text: 'Sensor'
       },
       categories: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12']
      },
      yAxis: {
       title: {
        text: 'Temperature (°C)'
       },
       plotLines: [{
        value: 0,
        width: 1,
        color: '#808080'
       }]
      },
      tooltip: {
       formatter: function() {
         return '<b>'+ this.series.name +'</b><br/>'+
         this.x +': '+ this.y;
       }
      },
      legend: {
       layout: 'vertical',
       align: 'right',
       verticalAlign: 'top',
       x: -10,
       y: 120,
       borderWidth: 0
      },
      exporting: { 
      enabled: false 
      },
      series: json
     });
    });
   
   });
 
  });

<?php
include("../../Connections/koneksi.php");
$tgl1=$_POST['tanggal1'];
$tgl2=$_POST['tanggal2'];

// Data for Titik1
$sql = "SELECT * FROM termocouple where no ='1' and tanggal='$tgl1' and tanggal2='$tgl2'";
$query = mysqli_query($db,$sql);
$rows = array();
$rows['name'] = 'Titik 1';
while($tmp= mysqli_fetch_array($query)) {
    $rows['data'][] = $tmp['sensor1'];
 $rows['data'][] = $tmp['sensor2'];
 $rows['data'][] = $tmp['sensor3'];
 $rows['data'][] = $tmp['sensor4'];
 $rows['data'][] = $tmp['sensor5'];
 $rows['data'][] = $tmp['sensor6'];
 $rows['data'][] = $tmp['sensor7'];
 $rows['data'][] = $tmp['sensor8'];
 $rows['data'][] = $tmp['sensor9'];
 $rows['data'][] = $tmp['sensor10'];
 $rows['data'][] = $tmp['sensor11'];
 $rows['data'][] = $tmp['sensor12'];
}

// Data for Titik2
$sql = "SELECT * FROM termocouple where no ='2' and tanggal='$tgl1' and tanggal2='$tgl2'";
$query = mysqli_query($db,$sql);
$rows1 = array();
$rows1['name'] = 'Titik 2';
while($tmp = mysqli_fetch_array($query)) {
    $rows1['data'][] = $tmp['sensor1'];
 $rows1['data'][] = $tmp['sensor2'];
 $rows1['data'][] = $tmp['sensor3'];
 $rows1['data'][] = $tmp['sensor4'];
 $rows1['data'][] = $tmp['sensor5'];
 $rows1['data'][] = $tmp['sensor6'];
 $rows1['data'][] = $tmp['sensor7'];
 $rows1['data'][] = $tmp['sensor8'];
 $rows1['data'][] = $tmp['sensor9'];
 $rows1['data'][] = $tmp['sensor10'];
 $rows1['data'][] = $tmp['sensor11'];
 $rows1['data'][] = $tmp['sensor12'];
}

// Data for Titik3
$sql = "SELECT * FROM termocouple where no ='3' and tanggal='$tgl1' and tanggal2='$tgl2'";
$query = mysqli_query($db,$sql);
$rows2 = array();
$rows2['name'] = 'Titik 3';
while($tmp = mysqli_fetch_array($query)) {
    $rows2['data'][] = $tmp['sensor1'];
 $rows2['data'][] = $tmp['sensor2'];
 $rows2['data'][] = $tmp['sensor3'];
 $rows2['data'][] = $tmp['sensor4'];
 $rows2['data'][] = $tmp['sensor5'];
 $rows2['data'][] = $tmp['sensor6'];
 $rows2['data'][] = $tmp['sensor7'];
 $rows2['data'][] = $tmp['sensor8'];
 $rows2['data'][] = $tmp['sensor9'];
 $rows2['data'][] = $tmp['sensor10'];
 $rows2['data'][] = $tmp['sensor11'];
 $rows2['data'][] = $tmp['sensor12'];
}
// Data for Titik4
$sql = "SELECT * FROM termocouple where no ='4' and tanggal='$tgl1' and tanggal2='$tgl2'";
$query = mysqli_query($db,$sql);
$rows3 = array();
$rows3['name'] = 'Titik 4';
while($tmp = mysqli_fetch_array($query)) {
    $rows3['data'][] = $tmp['sensor1'];
 $rows3['data'][] = $tmp['sensor2'];
 $rows3['data'][] = $tmp['sensor3'];
 $rows3['data'][] = $tmp['sensor4'];
 $rows3['data'][] = $tmp['sensor5'];
 $rows3['data'][] = $tmp['sensor6'];
 $rows3['data'][] = $tmp['sensor7'];
 $rows3['data'][] = $tmp['sensor8'];
 $rows3['data'][] = $tmp['sensor9'];
 $rows3['data'][] = $tmp['sensor10'];
 $rows3['data'][] = $tmp['sensor11'];
 $rows3['data'][] = $tmp['sensor12'];
}
// Data for Titik 5
$sql = "SELECT * FROM termocouple where no ='5' and tanggal='$tgl1' and tanggal2='$tgl2'";
$query = mysqli_query($db,$sql);
$rows4 = array();
$rows4['name'] = 'Titik 5';
while($tmp = mysqli_fetch_array($query)) {
    $rows4['data'][] = $tmp['sensor1'];
 $rows4['data'][] = $tmp['sensor2'];
 $rows4['data'][] = $tmp['sensor3'];
 $rows4['data'][] = $tmp['sensor4'];
 $rows4['data'][] = $tmp['sensor5'];
 $rows4['data'][] = $tmp['sensor6'];
 $rows4['data'][] = $tmp['sensor7'];
 $rows4['data'][] = $tmp['sensor8'];
 $rows4['data'][] = $tmp['sensor9'];
 $rows4['data'][] = $tmp['sensor10'];
 $rows4['data'][] = $tmp['sensor11'];
 $rows4['data'][] = $tmp['sensor12'];
}
// Data for Titik 6
$sql = "SELECT * FROM termocouple where no ='6' and tanggal='$tgl1' and tanggal2='$tgl2'";
$query = mysqli_query($db,$sql);
$rows5 = array();
$rows5['name'] = 'Titik 6';
while($tmp = mysqli_fetch_array($query)) {
    $rows5['data'][] = $tmp['sensor1'];
 $rows5['data'][] = $tmp['sensor2'];
 $rows5['data'][] = $tmp['sensor3'];
 $rows5['data'][] = $tmp['sensor4'];
 $rows5['data'][] = $tmp['sensor5'];
 $rows5['data'][] = $tmp['sensor6'];
 $rows5['data'][] = $tmp['sensor7'];
 $rows5['data'][] = $tmp['sensor8'];
 $rows5['data'][] = $tmp['sensor9'];
 $rows5['data'][] = $tmp['sensor10'];
 $rows5['data'][] = $tmp['sensor11'];
 $rows5['data'][] = $tmp['sensor12'];
}
// Data for Titik 7
$sql = "SELECT * FROM termocouple where no ='7' and tanggal='$tgl1' and tanggal2='$tgl2'";
$query = mysqli_query($db,$sql);
$rows6 = array();
$rows6['name'] = 'Titik 7';
while($tmp = mysqli_fetch_array($query)) {
    $rows6['data'][] = $tmp['sensor1'];
 $rows6['data'][] = $tmp['sensor2'];
 $rows6['data'][] = $tmp['sensor3'];
 $rows6['data'][] = $tmp['sensor4'];
 $rows6['data'][] = $tmp['sensor5'];
 $rows6['data'][] = $tmp['sensor6'];
 $rows6['data'][] = $tmp['sensor7'];
 $rows6['data'][] = $tmp['sensor8'];
 $rows6['data'][] = $tmp['sensor9'];
 $rows6['data'][] = $tmp['sensor10'];
 $rows6['data'][] = $tmp['sensor11'];
 $rows6['data'][] = $tmp['sensor12'];
}
// Data for Titik 8
$sql = "SELECT * FROM termocouple where no ='8' and tanggal='$tgl1' and tanggal2='$tgl2'";
$query = mysqli_query($db,$sql);
$rows7 = array();
$rows7['name'] = 'Titik 8';
while($tmp = mysqli_fetch_array($query)) {
    $rows7['data'][] = $tmp['sensor1'];
 $rows7['data'][] = $tmp['sensor2'];
 $rows7['data'][] = $tmp['sensor3'];
 $rows7['data'][] = $tmp['sensor4'];
 $rows7['data'][] = $tmp['sensor5'];
 $rows7['data'][] = $tmp['sensor6'];
 $rows7['data'][] = $tmp['sensor7'];
 $rows7['data'][] = $tmp['sensor8'];
 $rows7['data'][] = $tmp['sensor9'];
 $rows7['data'][] = $tmp['sensor10'];
 $rows7['data'][] = $tmp['sensor11'];
 $rows7['data'][] = $tmp['sensor12'];
}
// Data for Titik 9
$sql = "SELECT * FROM termocouple where no ='9' and tanggal='$tgl1' and tanggal2='$tgl2'";
$query = mysqli_query($db,$sql);
$rows8 = array();
$rows8['name'] = 'Titik 9';
while($tmp = mysqli_fetch_array($query)) {
    $rows8['data'][] = $tmp['sensor1'];
 $rows8['data'][] = $tmp['sensor2'];
 $rows8['data'][] = $tmp['sensor3'];
 $rows8['data'][] = $tmp['sensor4'];
 $rows8['data'][] = $tmp['sensor5'];
 $rows8['data'][] = $tmp['sensor6'];
 $rows8['data'][] = $tmp['sensor7'];
 $rows8['data'][] = $tmp['sensor8'];
 $rows8['data'][] = $tmp['sensor9'];
 $rows8['data'][] = $tmp['sensor10'];
 $rows8['data'][] = $tmp['sensor11'];
 $rows8['data'][] = $tmp['sensor12'];
}
// Data for Titik 10
$sql = "SELECT * FROM termocouple where no ='10' and tanggal='$tgl1' and tanggal2='$tgl2'";
$query = mysqli_query($db,$sql);
$rows9 = array();
$rows9['name'] = 'Titik 10';
while($tmp = mysqli_fetch_array($query)) {
    $rows9['data'][] = $tmp['sensor1'];
 $rows9['data'][] = $tmp['sensor2'];
 $rows9['data'][] = $tmp['sensor3'];
 $rows9['data'][] = $tmp['sensor4'];
 $rows9['data'][] = $tmp['sensor5'];
 $rows9['data'][] = $tmp['sensor6'];
 $rows9['data'][] = $tmp['sensor7'];
 $rows9['data'][] = $tmp['sensor8'];
 $rows9['data'][] = $tmp['sensor9'];
 $rows9['data'][] = $tmp['sensor10'];
 $rows9['data'][] = $tmp['sensor11'];
 $rows9['data'][] = $tmp['sensor12'];
}// Data for Titik 11
$sql = "SELECT * FROM termocouple where no ='11' and tanggal='$tgl1' and tanggal2='$tgl2'";
$query = mysqli_query($db,$sql);
$rows10 = array();
$rows10['name'] = 'Titik 11';
while($tmp = mysqli_fetch_array($query)) {
    $rows10['data'][] = $tmp['sensor1'];
 $rows10['data'][] = $tmp['sensor2'];
 $rows10['data'][] = $tmp['sensor3'];
 $rows10['data'][] = $tmp['sensor4'];
 $rows10['data'][] = $tmp['sensor5'];
 $rows10['data'][] = $tmp['sensor6'];
 $rows10['data'][] = $tmp['sensor7'];
 $rows10['data'][] = $tmp['sensor8'];
 $rows10['data'][] = $tmp['sensor9'];
 $rows10['data'][] = $tmp['sensor10'];
 $rows10['data'][] = $tmp['sensor11'];
 $rows10['data'][] = $tmp['sensor12'];
}


$result = array();
array_push($result,$rows);
array_push($result,$rows1);
array_push($result,$rows2);
array_push($result,$rows3);
array_push($result,$rows4);
array_push($result,$rows5);
array_push($result,$rows6);
array_push($result,$rows7);
array_push($result,$rows8);
array_push($result,$rows9);
array_push($result,$rows10);


print json_encode($result, JSON_NUMERIC_CHECK);

mysqli_close($db);
?>

i try to use this code too but my data still not displaying

$(function () {
   
   $(document).on('click','#display',function(e) {
    var data = $("#form_input10").serialize();
   
          $.ajax({
       data: data,
                type: "Get",
    dataType: 'JSON',
                url: "../php/termocouple/line_termocouple1.php",
                success: function(data){     
      var list = JSON.parse(data);
    chart = new Highcharts.Chart({
      chart: {
       renderTo: 'chart1',
       type: 'line'
       
      },
      title: {
       text: 'Termocouple Graph Result'
       
      },
      subtitle: {
       text: ''
      
      },
      xAxis: {
       title: {
        text: 'Sensor'
       },
       categories: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12']
      },
      yAxis: {
       title: {
        text: 'Temperature (°C)'
       },
       plotLines: [{
        value: 0,
        width: 1,
        color: '#808080'
       }]
      },
      tooltip: {
       formatter: function() {
         return '<b>'+ this.series.name +'</b><br/>'+
         this.x +': '+ this.y;
       }
      },
      legend: {
       layout: 'vertical',
       align: 'right',
       verticalAlign: 'top',
       x: -10,
       y: 120,
       borderWidth: 0
      },
      
      exporting: { 
      enabled: false 
      },
      series: data
    
     });}
      }); 
       });
        });

Are you expecting the serialized form to get sent to the PHP call (i.e. with `var json = $("#form_input10").serialize(); $.getJSON("../php/termocouple/line_termocouple.php", function(json) {`) ? That doesn't appear to pass the serialized form, which makes me believe `$_POST` in PHP won't contain what is expected (i.e. `$tgl1=$_POST['tanggal1']; $tgl2=$_POST['tanggal2'];`)... — Sᴀᴍ Onᴇᴌᴀ, Jul 31 '17 at 16:30
@SamOnela yes i want to pas `$("#form_input10").serialize()` to my php function @ `$tgl1=$_POST['tanggal1']; $tgl2=$_POST['tanggal2'];`. i use serialize because `$tgl1=$_POST['tanggal1']; $tgl2=$_POST['tanggal2'];` contain string from the `id's in the #form_input10. can you show me the correct way to do that? im stuck in there — Minervaz Mine, Aug 01 '17 at 06:37
Possible duplicate of [How to use getJSON, sending data with post method?](https://stackoverflow.com/questions/751218/how-to-use-getjson-sending-data-with-post-method) — Sᴀᴍ Onᴇᴌᴀ, Aug 01 '17 at 11:56
@SamOnela i've see that.. I try to modified it now. i hope it works ^^ can i change this `$.post("",json, function(json) {` into `$.post("myurl.php",json, function(json) {`. — Minervaz Mine, Aug 04 '17 at 02:00
Yes of course- like I stated in the answer explanation, I had to do that because I couldn't have multiple, separate files in the phpfiddle — Sᴀᴍ Onᴇᴌᴀ, Aug 04 '17 at 02:10
ehehehhe.. ok i will try it 1st. sorry im late answering you. because i have some work to do last 2 days ago. — Minervaz Mine, Aug 04 '17 at 02:11

Sᴀᴍ Onᴇᴌᴀ · Answer 1 · 2017-08-10T13:04:07.387

0

$.getJSON() performs a GET request. In order to have POST data, use $.post().

$.post("../php/termocouple/line_termocouple.php", json, function(json) {

Similarly, the second code snippet is sending a GET request. In order to have it send a POST request, change the type:

$.ajax({
    data: data,
    type: "POST",

Demo

I happened to look at your other similar question last week and was ready to show a demonstration of it working. I kept my tentative PHP code for it and can show an example of the changes described above. Take a look at this PHPFiddle. Notice that:

the PHP code was simplified to 2 calls to array_map(), to generate numbers. I don't have access to your database so I can't run the queries.
The URL of the AJAX request was updated to ` because PHPFiddle only allows a single PHP file
I added the line header('Content-Type: application/json'); before the call to json_encode() to ensure the response is interpreted as JSON by the jQuery code.

Click the button labeled Run - F9 to see the page, and click the button labeled 'Display data' to trigger the form serialization and AJAX request.

Below is a screenshot where I opened the Network tab in Firefox and observed the POST request with the parameters (i.e. POST data).

edited Aug 10 '17 at 13:04

answered Aug 01 '17 at 11:50

Sᴀᴍ Onᴇᴌᴀ

7,491
8
27
56

i have try that code for get request. but still not working T_T – Minervaz Mine Aug 01 '17 at 12:34
i try to check the eror function at inspect element and it say's like this `Uncaught ReferenceError: json is not defined at HTMLDocument.` – Minervaz Mine Aug 01 '17 at 12:39
and the eror targeting the `jquery.min.js at line 4` – Minervaz Mine Aug 01 '17 at 12:44
Perhaps you should read more about debugging AJAX requests - e.g. [with chrome](http://blog.bcdsoftware.com/2323/how-to-use-chrome-developer-tools-to-debug-ajax/), [firefox](https://developer.mozilla.org/en-US/docs/Tools/Network_Monitor) - and ensure you know [the difference between a GET and a POST request](https://stackoverflow.com/q/3477333/1575353)... Also see the updated explanation above. – Sᴀᴍ Onᴇᴌᴀ Aug 01 '17 at 15:57

how to display the highchart data with data serialize from a form using button onclick?

1 Answers1

Demo