Pagina 1 din 1

Highcharts JS cu Ajax

Scris: Mar Sep 13, 2016
de sterica
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

Highcharts JS cu Ajax

Scris: Mar Sep 13, 2016
de MarPlo
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.

Highcharts JS cu Ajax

Scris: Mar Sep 13, 2016
de sterica
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!

Highcharts JS cu Ajax

Scris: Mie Sep 14, 2016
de MarPlo
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.

Highcharts JS cu Ajax

Scris: Mie Sep 14, 2016
de sterica
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.

Highcharts JS cu Ajax

Scris: Mie Sep 14, 2016
de MarPlo
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.

Highcharts JS cu Ajax

Scris: Joi Sep 15, 2016
de sterica
Multumesc mult de explicatii si de ajutor