Sign In
Create Account
Back to top |
Second Opinion
Folosind serviciul second opinion ne puteți trimite RMN-uri, CT -uri, angiografii, fișiere .pdf, documente medicale. Astfel vă vom putea da o opinie neurochirurgicală, fără ca aceasta să poată înlocui un consult de specialitate. Răspunsurile vor fi date prin e-mail în cel mai scurt timp posibil (de obicei în mai putin de 24 de ore, dar nu mai mult de 48 de ore). Second opinion – Neurohope este un serviciu gratuit. www.neurohope.ro |
Grafic cu Apexcharts JS
Last Updated: Apr 11 2022 14:48, Started by
geotux
, Apr 08 2022 11:19
·
0
0
#1
Posted 08 April 2022 - 11:19
|
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
Posted 11 April 2022 - 14:48
|
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
▶ 0 user(s) are reading this topic
0 members, 0 guests, 0 anonymous users
-
- Change Theme
- English
- Mark Community Read
- Termene & conditii
- Confidentialitate
- Consimtamant
- Cookies
- Help
© 2001-2024 Softpedia. All rights reserved. Softpedia® and the Softpedia logo are registered trademarks of SoftNews Net SRL.
Ora implicita a Forumului Softpedia este ora standard a Romaniei (GMT+2). Mai multe informatii →
⚠ Postarile afisate pe Forumul Softpedia reprezinta o opinie subiectiva a membrilor care le-au publicat si nu a SoftNews Net SRL.