Highcharts JS cu Ajax
Discutii si intrebari legate de scripturi si functii JavaScript, jQuery si Ajax, cod JavaScript in general.
-
sterica
- Mesaje: 285
Highcharts JS cu Ajax
Salutare,
Am un codul pentru chart de tip column.
Fisierul php care extrage datele din baza de date:
Cod: Selectaţi tot
<?php
include 'bd_cnx.php';
$sql = "SELECT
...";
$result = $conn->query($sql);
if ($result->num_rows > 0){
while($row = $result->fetch_assoc()){
$ret[] =[$row['NUME_J'], floatval($row['TOTAL'])];
}
}
echo json_encode($ret);
?>
Vreau ca datele extrase de fisierul php sa le introduc in fisierul js cu chart-ul. Am facut o varianta cu AJAX insa nu functioneaza, arata formatul graficul insa fara valori, codul arata asa:
Cod: Selectaţi tot
var data ;
$.ajax({
method:"POST",
url:"query.php",
data:{},
success:
function(response){
data=response;
$('#container').highcharts({
chart: {
type: 'column'
},
xAxis: {
type: 'category',
},
yAxis: {
min: 0,
},
...
series: [{
data: data,
}]
});
},
});
Unde am gresit in codul meu?
Multumesc
MarPlo
Mesaje: 4343
Salut
In php, variabila $ret ar trebui definita inainte de while() in care se adauga date in ea.
Cod: Selectaţi tot
<?php
include 'bd_cnx.php';
$ret =[];
$sql = "SELECT ...";
$result = $conn->query($sql);
//...
In Ajax datele sunt primite ca un sir in format JSON, daca Highcharts foloseste valori tip obiect, raspunsul ar tebui transformat in obiect, cu JSON.parse().
Cod: Selectaţi tot
function(response){
data=JSON.parse(response);
//...
}
- Poti sa folosesti consola din browser (F12) ca sa vezi daca sunt erori in JS.
sterica
Mesaje: 285
Invart de cateva ore bune codul js si nu reusesc sa ii dau de capat. In fisierul php am definit variabila, functioneaza perfect. Am incercat si sub forma asta cu codul js insa fara rezultat:
Cod: Selectaţi tot
$.ajax({
type: 'POST',
url: 'query_stoc_grafic_1.php',
data: {},
success: function (response) {
document.getElementById('container').innerHTML=response;
columnChart( JSON.parse(response));
}
});
function columnChart(data_v){
if(data_v.length >0){
$(function () {
$('#container').highcharts({
chart: {
type: 'column'
},
series: [{
data: data_v,
}]
});
});
}
}
Nu imi aduce deloc graficul in div cu id="container". Unde gresesc?
Multumesc!
MarPlo
Mesaje: 4343
Incearca asa codul din functia columnChart():
Cod: Selectaţi tot
function columnChart(data_v){
if(data_v.length >0){
$('#container').highcharts({
chart: {
type: 'column'
},
series: [{
data: data_v,
}]
});
}
}
Daca nu functioneaza, verifica in Consola daca e vreo eroare JavaScript. Si vezi daca "response" e asa cum trebuie pt highcharts.
sterica
Mesaje: 285
A functionat, m-am prins de eroare cu ajutorul consolei (daca cunosti un plug-in care ma poate ajuta mult mai usor in identificarea erorilor, mi-ar prinde foarte bine). Era o problema de url:
fisierul index.php se afla in fisierul_0
fisierul chart.js se afla in fisierul_0 -> fisierul_1
fisierul query.php se afla in fisierul_0 -> fisierul_2 -> fisierul_2.1
Calea in url, am dat-o din fisierul .js catre query.php, defapt calea trebuia data ca si cum ar fi in index.php.
Ca si observatie si nelamurire: in fisierul index.php fisierelul importat code.js care la randul sau are importate fisiere, calea trebuie sa fie data in fisierul .js ca si cum codul s-ar afla in index.php?
Scuze pentru exprimare.
MarPlo
Mesaje: 4343
La adaugarea adreselor relative (fara "http") in "href" sau in cod JS inclus in pagina catre alte fisiere din acelasi site se tine cont de adresa din browser a paginii respective.
sterica
Mesaje: 285
Multumesc mult de explicatii si de ajutor
Subiecte similare
-
Post cu Ajax in modal
JavaScript - jQuery - Ajax
Primul mesaj
Bună ziua,
Vreau să trimit în aceeași pagină dar în modal două id-uri. Prin alert(id) îmi arată conținutul postului trimis dar în modal nu imi...
Ultimul mesaj
Nu prea inteleg mecanismul si ce anume nu functioneaza.
Oricum, daca functioneaza cand pui manual id-ul, poate ca problema e de la php.
Trebuie sa...
-
Ordine de executie cu jQuery-AJAX
JavaScript - jQuery - Ajax
Primul mesaj
Am acest cod (ajax este asincron):
function echoHello(){
return $.ajax({
//this will return hello ;
});
}
function echoWorld(){
return world...
Ultimul mesaj
Ajax face un apel către serverul web și este asincron. Nu știi cât va dura pana la raspuns. Este la fel ca:
setTimeout(_ => {...
-
Ajax fade mesaj si redirect dupa un timp
JavaScript - jQuery - Ajax
Primul mesaj
Am codul asta si vreau in loc de input type=button sa fie submit, dar sa imi dea fade la fel in 5 secunde de cand apare eroarea.
Daca schimb cu...
Ultimul mesaj
Am rezolvat,multumesc frumos de ajutor