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