Javascript Disabled Detected

You currently have javascript disabled. Several functions may not work. Please re-enable javascript to access full functionality.

« 1 / 5 »

Dade, dade

Parola la lock screen

Deparazitare externa pisici fara ...

Seriale turcesti/coreene online H...

Merita un Termostat Smart pentru ...

Sfat achizitie MTB Devron Riddle

Problema mare cu parintii= nervi ...

switch microtik

Permis categoria B la 17 ani

Sfaturi pentru pregatirea de eval...

Crapaturi placa

cum imi accesez dosarul electroni...

Momentul Aprilie 1964

Sursa noua - zgomot ?

A fost lansat Ubuntu 24.04 LTS

Pareri apartament in zona Berceni?

View New Content

Grafic interactiv cu Chart.js si Vue.js

Last Updated: Mar 27 2020 20:21, Started by geotux , Mar 23 2020 19:49

·

0

Please log in to reply

1 reply to this topic

#1
geotux

Posted 23 March 2020 - 19:49

Junior Member

Grup: Junior Members
Posts: 49
Înscris: 12.07.2019

Salutare !

1)Am un select din care poti alege o specie; dupa ce se face selectia, folosesc axios.post ca sa trimit specia selectata catre "data_plot.php"

2)Dupa ce se da click pe "Generare plot" se executa codul din "chart-area-demo.js"; aici preiau un array din "data_plot.php", si il plotez cu Chart.js

Problema este aici la pasul 2, pentru ca in fisierul "data_plot.php" nu am specia selectata initial.

grafic.php :

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<title>Plot</title>
<!-- Custom fonts for this template-->
<link href="vendor/fontawesome-free/css/all.min.css" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Nunito:200,200i,300,300i,400,400i,600,600i,700,700i,800,800i,900,900i" rel="stylesheet">

<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
<div class="col-xl-8 col-lg-7">
			 <div class="card shadow mb-4" id="sp_nume">
			 <!-- Card Header - Dropdown -->
			 <div class="card-header py-3 d-flex flex-row align-items-center justify-content-between" >
				 <h6 class="m-0 font-weight-bold text-primary">Specia: {{ selected }}</h6>
				 </div>
				 <?php
				 $conn = new mysqli('localhost', 'root', 'geo777', 'regime_shift');
				 $sql3 = "SELECT DISTINCT `DENUM` FROM `fpk20082018` WHERE 1";
			 $result = mysqli_query($conn,$sql3);
			 ?>
				 <form>
<div class="form-group">

<select class="form-control" id="exampleFormControlSelect1" v-model="selected" name="select_specie" @change="onchange($event)">
	 <option disabled value="">Please select one</option>
	 <?php while ($row = mysqli_fetch_array($result)) {
						 echo "<option value='" . $row['DENUM'] ."' >" . $row['DENUM'] ."</option>";
			 }
			 ?>

</select>
			
	

</div>

<button type="submit" class="btn btn-primary">Generare Plot</button>
</form>
			 <!-- Card Body -->
			 <div class="card-body">
				 <div class="chart-area">
				 <canvas id="canvas"></canvas>
				 </div>
			 </div>
			 </div>
<script>

var app=new Vue({
	 el: '#sp_nume',
data: {
selected: ''
},
methods: {
		 onchange(event) {
			 console.log(event.target.value);
			

let select_specie=event.target.value;


axios.post('data_plot.php', select_specie)
.then( function(response) {
				 console.log(response.data)
			 });

		 }
	 }
})
</script>
		 </div>
		
<!-- Bootstrap core Javascript-->
<script src="vendor/jquery/jquery.min.js"></script>
<script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
<!-- Core plugin Javascript-->
<script src="vendor/jquery-easing/jquery.easing.min.js"></script>
<!-- Page level plugins -->
<script src="vendor/chart.js/Chart.min.js"></script>
<!--<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>-->
<!-- Page level custom scripts -->
<script src="chart-area-demo.js"></script>
</body>
</html>

Fisierul data_plot.php :

<?php
header('Content-Type: application/json');
error_reporting(E_ALL);
$conn = new mysqli('localhost', 'root', 'geo777', 'regime_shift');
if ($conn->connect_error) {
	 die("Connection failed: " . $conn->connect_error);
}

$select_specie=$_POST["selected_specie"];
//query to get data from the table
$query = 'SELECT AVG(`CARBON`) AS MedieCarbon, `Year` FROM `fpk20082018` where DENUM="'.$select_specie.'" GROUP BY `Year`';
//execute query
$result = $conn->query($query);
//loop through the returned data
$jsonfile = array();
foreach ($result as $row) {
$jsonfile[] = $row;
}
//free memory associated with result
$result->close();
//close connection
$conn->close();
$output = json_encode(['jsonarray' => $jsonfile]);
//now print the data
print $output;
//var_dump($output);
?>

Fisierul chart-area-demo.js :

$(document).ready(function(){

$("form").submit(function(){

$.ajax({
url: "data_plot.php",
method: "GET",
success: function(output) {
	 console.log(output);
var labels = output.jsonarray.map(function(e) {
return e.Year;
});
var data = output.jsonarray.map(function(e) {
return e.MedieCarbon;
});
var ctx = canvas.getContext('2d');
	
var config = {
type: 'line',
data: {
	 labels: labels,
	 datasets: [{
		 label: 'Medie anuala Carbon',
		 data: data,		
		 backgroundColor: "rgba(78, 115, 223, 0.05)",
		 borderColor: "rgba(78, 115, 223, 1)",
		 pointRadius: 3,
		 pointBackgroundColor: "rgba(78, 115, 223, 1)",
		 pointBorderColor: "rgba(78, 115, 223, 1)",
		 pointHoverRadius: 3,
		 pointHoverBackgroundColor: "rgba(78, 115, 223, 1)",
		 pointHoverBorderColor: "rgba(78, 115, 223, 1)",
		 pointHitRadius: 10,
		 pointBorderWidth: 2
	 }]
}
};
var chart = new Chart(ctx, config);
	
},
error: function(data) {
	 console.log(data);
}
}); // end ajax
}); // end submit
});

Arrayul json ar trebui sa arate cam asa:
{"jsonarray":[{"MedieCarbon":"0.5194997435897436","Year":"2008"},{"MedieCarbon":"0.04090933333333334","Year":"2010"},{"MedieCarbon":"0.01656","Year":"2011"},{"MedieCarbon":"0.009573333333333335","Year":"2012"},{"MedieCarbon":"0.020583333333333332","Year":"2017"}]}

Back to top

#2
geotux

Posted 27 March 2020 - 20:21

Junior Member

Grup: Junior Members
Posts: 49
Înscris: 12.07.2019

REZOLVAT !

Cu doar 2 fisiere:

"plot.php" :

Spoiler

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<title>Plot</title>
<link href="vendor/fontawesome-free/css/all.min.css" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Nunito:200,200i,300,300i,400,400i,600,600i,700,700i,800,800i,900,900i" rel="stylesheet">
<script src="http://demo.itsolutionstuff.com/plugin/jquery.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue-select/2.5.1/vue-select.js"></script>
<script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>

<script src="vendor/chart.js/Chart.min.js"></script>
</head>
<body>
<form>
<?php
include 'conn.php';
				 $sql3 = "SELECT DISTINCT `DENUM` FROM `fpk20082018` WHERE 1";
			 $result = mysqli_query($conn,$sql3);
			 ?>
			 <select class="form-control dropdown" id="dd" v-model="selected" name="select_specie">
	 <option disabled value="">Please select one</option>
	 <?php while ($row = mysqli_fetch_array($result)) {
						 echo "<option value='" . $row['DENUM'] ."' >" . $row['DENUM'] ."</option>";
			 }
			 ?>

</select>

<div class="card-body">
				 <div class="chart-area" style="width:450px;height:400px;">
				 <canvas id="myChart2"></canvas>
				 </div>
			 </div>
			 </div>
<script type="text/javascript">
var datasets = [];
var ctx = document.getElementById('myChart2').getContext('2d');
var chart = new Chart(ctx, {
// The type of chart we want to create
type: 'line',
// The data for our dataset
data: {
	 labels: ["2008","2009","2010","2011","2012","2013","2014","2015","2016","2017","2018"],
	 datasets: [{
		 label: "Medie anuala Carbon",		
		 backgroundColor: "rgba(78, 115, 223, 0.05)",
		 borderColor: "rgba(78, 115, 223, 1)",
		 pointRadius: 3,
		 pointBackgroundColor: "rgba(78, 115, 223, 1)",
		 pointBorderColor: "rgba(78, 115, 223, 1)",
		 pointHoverRadius: 3,
		 pointHoverBackgroundColor: "rgba(78, 115, 223, 1)",
		 pointHoverBorderColor: "rgba(78, 115, 223, 1)",
		 pointHitRadius: 10,
		 pointBorderWidth: 2,
		 data: datasets
	 }]
},
// Configuration options go here
options: {
	 scales: {
		 yAxes: [{
			 display: true,
			 ticks: {
				 suggestedMin: 0,
				 suggestedMax: 100
			 }
		 }]
	 }
}
});
$( ".dropdown" ).change(function() {
$.ajax({
url: "data_plot.php",
method: "GET",
data: { select_specie: document.getElementById("dd").options[document.getElementById("dd").selectedIndex].value},
success: function(output) {
	 console.log(output);

	
var jsonobj = $.parseJSON(output);
console.log(jQuery.type(jsonobj));
	
chart.data.datasets[0].data = [];
var e = document.getElementById("dd");
var selected = e.options[e.selectedIndex].value;

dps = jsonobj["jsonarray2"];
for(var i in dps) {
	 chart.data.datasets[0].data.push({x: dps[i].Year, y: dps[i].MedieCarbon});
	 //chart.data.labels[0].data.push(dps[i].Year);
}


chart.update();
}
});
});
</script>
</body>
</html>

"data_plot.php" :

Spoiler

<?php
//header('Content-Type: application/json');
error_reporting(E_ALL);
$conn = new mysqli('localhost', 'root', 'geo777', 'regime_shift');
if ($conn->connect_error) {
	 die("Connection failed: " . $conn->connect_error);
}
$select_specie=$_GET["select_specie"];
//$select_specie="Chaetoceros curvisetus";

//query to get data from the table
$query = 'SELECT AVG(`CARBON`) AS MedieCarbon, `Year` FROM `fpk20082018` where DENUM="'.$select_specie.'" GROUP BY `Year`';
//execute query
$result = $conn->query($query);
//loop through the returned data
$jsonfile = array();
foreach ($result as $row) {
$jsonfile[] = $row;
}
//free memory associated with result
$result->close();
//close connection
$conn->close();
//$output = json_encode([$select_specie => $jsonfile]);
$output = json_encode(['jsonarray2' => $jsonfile]);

print $output;
?>

Edited by MarianG, 27 March 2020 - 20:27.
spoilers

Back to top

Anunturi

Chirurgia cranio-cerebrală minim invazivă

Tehnicile minim invazive impun utilizarea unei tehnologii ultramoderne.

Endoscoapele operatorii de diverse tipuri, microscopul operator dedicat, neuronavigația, neuroelectrofiziologia, tehnicile avansate de anestezie, chirurgia cu pacientul treaz reprezintă armamentarium fără de care neurochirurgia prin "gaura cheii" nu ar fi posibilă. Folosind tehnicile de mai sus, tratăm un spectru larg de patologii cranio-cerebrale.

www.neurohope.ro

Back to Scripting Languages

▶ 0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users

© 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.

Grafic interactiv cu Chart.js si Vue.js

#1 geotux Posted 23 March 2020 - 19:49

#2 geotux Posted 27 March 2020 - 20:21

Anunturi

▶ 0 user(s) are reading this topic

Sign In

#1
geotux

Posted 23 March 2020 - 19:49

#2
geotux

Posted 27 March 2020 - 20:21