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ᴇᴌᴀ
– Sᴀᴍ Onᴇᴌᴀ, Commented Jul 31, 2017 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
– Minervaz Mine, Commented Aug 1, 2017 at 6:37
Possible duplicate of How to use getJSON, sending data with post method? — Sᴀᴍ Onᴇᴌᴀ
– Sᴀᴍ Onᴇᴌᴀ, Commented Aug 1, 2017 at 11:56
@SamOnela i've see that.. I try to modified it now. i hope it works ^^ can i change this $.post("<?php echo $_SERVER['PHP_SELF']; ?>",json, function(json) { into $.post("myurl.php",json, function(json) {. — Minervaz Mine
– Minervaz Mine, Commented Aug 4, 2017 at 2:00

Sᴀᴍ Onᴇᴌᴀ · Accepted Answer · 2017-08-10 13:04:07Z

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, 2017 at 13:04

answered Aug 1, 2017 at 11:50

Sᴀᴍ Onᴇᴌᴀ

8,3028 gold badges38 silver badges61 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Minervaz Mine Over a year ago

i have try that code for get request. but still not working T_T

Minervaz Mine Over a year ago

i try to check the eror function at inspect element and it say's like this Uncaught ReferenceError: json is not defined at HTMLDocument.<anonymous>

Minervaz Mine Over a year ago

and the eror targeting the jquery.min.js at line 4

Sᴀᴍ Onᴇᴌᴀ Over a year ago

Perhaps you should read more about debugging AJAX requests - e.g. with chrome, firefox - and ensure you know the difference between a GET and a POST request... Also see the updated explanation above.

Collectives™ on Stack Overflow

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

1 Answer 1

Demo

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Demo

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related