Jump to content

SUBIECTE NOI
« 1 / 5 »
RSS
Adaptor pt casti

În UE, permis digital de conducato...

Spalatorie auto profesionala in I...

Anxietate si Safety behaviors OCD.
 Conducta DN 800 pe teren construi...

placa video buna pentru redare ca...

in cat timp se activeaza un abona...

Dilema dupa facultate
 Reciclare metale - merita?

Renault Arkana sh sau Sang Yong K...

La multi ani @ceanu1980!

La multi ani @KiloW!
 ChatGPT - Certificat de rezidenta...

Page numbers in Google Docs, dar ...

Prenadez dubios

WhatsApp pe cartela din routerul ...
 

Grafic cu Apexcharts JS

- - - - -
  • Please log in to reply
1 reply to this topic

#1
geotux

geotux

    Junior Member

  • Grup: Junior Members
  • Posts: 49
  • Înscris: 12.07.2019
Salut !

Incerc sa fac un grafic de tip heatmap cu Apexcharts si PHP; valorile le preiau dintr-o baza de date Mysql.

Valori pe axa x (console.log(ora)) : 1 dec,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,2 dec,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,3 dec,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23

Valori pe axa y pentru 1m (console.log(d1)) : 22,77,91,33,16,31,78,61,22,22,7,81,13,23,4,17,24,92,13,2,46,46,4,89,84,84,69,89,95,37,53,28,56,65,89,6,1,21,15,71,88,77,86,93,52,13,87,25,22,82,78,13,42,74,38,14,2,140,9,7,139,54,8,32,38,33,58,5,58,78,72,33

Valori pe axa y pentru 2m (console.log(d2)) :
21,71,28,57,2,54,84,22,92,54,89,89,31,15,9,4,3,42,66,96,3,26,2,9,69,46,87,96,33,35,54,281,49,48,12,67,23,66,95,18,18,33,75,99,86,4,150,56,1,69,54,5,22,26,37,56,45,139,29,65,138,1,37,41,15,77,31,99,14,69,27,97


Codul :

<?php
error_reporting(E_ALL);
include 'connection.php';
//$select_days=$_GET["select_specie"];
$select_specie="1,2,3";
$numetb = 'current_direction_2017_dec';
$sqlQuery = 'SELECT `Hour`, `Depth1m`, `Depth2m` FROM `'.$numetb.'` WHERE `Day` in ('.$select_days.')';
$result = mysqli_query($conn,$sqlQuery) or trigger_error("Query Failed! SQL: - Error: ".mysqli_error($conn), E_USER_ERROR);
$hour1=[];
$depth1=[];
$depth2=[];
while($rel=mysqli_fetch_array($result, MYSQLI_ASSOC)) {
$hour1[]=$rel['Hour'];
$depth1[]=$rel['Depth1m'];
$depth2[]=$rel['Depth2m'];
}
$hour1=implode(',',$hour1);
$depth1=implode(',',$depth1);
$depth2=implode(',',$depth2);
mysqli_close($conn);
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Grafic cu Apexcharts JS + PHP + MySQL</title>
<style>
#chart {
max-width: 650px;
margin: 35px auto;
}
* {
font-family: Arial;
}
body {
height: 100vh;
background: #f9f9f9;
}
#chart, .chart-box {
padding-top: 20px;
padding-left: 10px;
background: #fff;
border: 1px solid #ddd;
box-shadow: 0 22px 35px -16px rgba(0,0,0, 0.1);
}
.apexcharts-canvas {
margin: 0 auto;
}
#html {
display: none;
}
</style>
<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
<div id="chart"></div>
<script>
var ora = <?php echo json_encode($hour1);?>;
var d1 = <?php echo json_encode($depth1);?>;
var d2 = <?php echo json_encode($depth2);?>;
console.log(ora);
console.log(d1);
console.log(d2);
var options = {
series: [
{
name: "1m",
data: [{
	 x: ora,
	 y: d1
}]
},
	 {
	 name: "2m",
	 data: [{
		 x: ora,
		 y: d2
	 }]
	 }
],
chart: {
height: 350,
type: 'heatmap',
},
dataLabels: {
enabled: false
},
title: {
text: 'Apexchart - Heatmap',
},
colors: ["#008FFB"]

};
var chart = new ApexCharts(document.querySelector("#chart"), options);
chart.render();
</script>

</body>
</html>


Valorile nu sunt afisate corect pe grafic; arata doar 2 valori: 21 si 22; si nici etichetele de pe axa y nu sunt corecte
Trebuia sa folosesc xaxis ?
Daca vreau sa adaug interactivitate, de exemplu utilizatorul sa aleaga zilele dintr-un select, si valoarea sa se trimita cu post/get catre $select_days, ar fi dificil ?

Atasez rezultatul interogarii din baza de date, in format json; am schimbat extensia fisierului pentru ca nu imi permitea sa il atasez.

Attached Files



#2
geotux

geotux

    Junior Member

  • Grup: Junior Members
  • Posts: 49
  • Înscris: 12.07.2019
Am rezolvat asa:

series: [
  {	name: "1m",  data: [<?= $depth1 ?>]	},
  {	name: "2m",  data: [<?= $depth2 ?>]	} 
	]
xaxis: {
		  type: 'category',
		  categories: [<?= $hour1 ?>],
		  tickPlacement: 'on',
		  labels: {
			rotate: -45,
			rotateAlways: true,
			style: {
			  colors: [],
			  fontSize: '10px',
			  fontFamily: 'Helvetica, Arial, sans-serif',
			  fontWeight: 400,
			  cssClass: 'apexcharts-xaxis-label',
		  }
		  }
		}



Anunturi

Chirurgia endoscopică a hipofizei Chirurgia endoscopică a hipofizei

"Standardul de aur" în chirurgia hipofizară îl reprezintă endoscopia transnazală transsfenoidală.

Echipa NeuroHope este antrenată în unul din cele mai mari centre de chirurgie a hipofizei din Europa, Spitalul Foch din Paris, centrul în care a fost introdus pentru prima dată endoscopul în chirurgia transnazală a hipofizei, de către neurochirurgul francez Guiot. Pe lângă tumorile cu origine hipofizară, prin tehnicile endoscopice transnazale pot fi abordate numeroase alte patologii neurochirurgicale.

www.neurohope.ro

0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users

Forumul Softpedia foloseste "cookies" pentru a imbunatati experienta utilizatorilor Accept
Pentru detalii si optiuni legate de cookies si datele personale, consultati Politica de utilizare cookies si Politica de confidentialitate