Highcharts JS cu valori din baza de date

Discutii si intrebari legate de scripturi si functii JavaScript, jQuery si Ajax, cod JavaScript in general.
sterica
Mesaje:285

Highcharts JS cu valori din baza de date

Salutare,
Am urmatorul cod pentru chart de tip column chart_column.php:

Cod: Selectaţi tot

$(function () {
  $('#grafic_column').highcharts({
    chart: {
            type: 'column'
        },
    series: [{
      name: 'Population',
      data: [
        ['Shanghai', 23.7],
        ['Lagos', 16.1],
        ['Istanbul', 14.2],
      ]
    }]
  });
});
Am urmatorul cod pentru aducerea valorilor din baza de date query_chart_column.php:

Cod: Selectaţi tot

<?php
if(isset($_POST['get_luna_inceput'])){
  $ret =[['Tari','Valori livrare']];
  $sch_luna_inceput = $_POST['get_luna_inceput'];
  $sql = "SELECT
           ..... 
          ORDER BY TOTAL DESC";
          
  $result = $conn->query($sql);
  if ($result->num_rows > 0){
  while($row = $result->fetch_assoc()){
      $ret[] =[$row['JUDET'], floatval($row['TOTAL'])];
        }
  }
}
  //returneaza datele ca json
  echo json_encode($ret);
?>
Si fisierul index.php:

Cod: Selectaţi tot

<html>
<script type="text/javascript">
function fetch_select(){
  val_luna_inceput = $('#get_luna_inceput').val();
 $.ajax({
   type: 'POST',
   url: 'query_chart_column.php',
   data: { get_luna_inceput: val_luna_inceput,
   },
   success: function (response) {
     document.getElementById('grafic_column').innerHTML=response;
     drawChart( JSON.parse(response));
   }
 });
}
</script>
    <select id="get_luna_inceput" onchange="fetch_select(this.value);">
      <option disabled >-- Alege luna --</option>
    </select>
<div id="grafic_column"></div>
</html>
Fisierul index.php este intocmit cu ajutorul lui MarPlo, portiunea de js este adaptata pentru graficele de la google.
Am gasit un model de grafic mai dragut a celor de aici: ( highcharts.com/ ) si vreau sa introduc datele din baza de date in acest model de grafic.
Insa nu stiu cum pot adapta scriptul din index.php la cel din chart_column.php ca sa imi inlocuiasca portiunea asta de cod:

Cod: Selectaţi tot

['Shanghai', 23.7],
['Lagos', 16.1],
['Istanbul', 14.2],
Multumesc!
MarPlo Mesaje:4343
Salut
Incearca asa in 'index.php':

Cod: Selectaţi tot

<select id="get_luna_inceput" onchange="fetch_select();">
  <option disabled >-- Alege luna --</option>
</select>
<div id="grafic_column"></div>
<script>
function fetch_select(){
  val_luna_inceput = $('#get_luna_inceput').val();
  $.ajax({
    type: 'POST',
    url: 'query_chart_column.php',
    data: { get_luna_inceput: val_luna_inceput,
    },
    success: function (response) {
      document.getElementById('grafic_column').innerHTML=response;
      columnChart( JSON.parse(response));
    }
  });
}

function columnChart(data_v){
  if(data_v.length >0){
    $('#grafic_column').highcharts({
      chart: {
        type: 'column'
      },
      series: [{
        name: 'Population',
        data: data_v
      }]
    });
  }
}
</script>
- Iar in "query_chart_column.php" stergi datele din array-ul din $ret, sa ramana asa:

Cod: Selectaţi tot

if(isset($_POST['get_luna_inceput'])){
  $ret =[];
  //etc...
}
sterica Mesaje:285
functioneaza. multumesc multde ajutor!
sterica Mesaje:285
Salutare,
Am doua intrebari cu privire la codul de mai sus:
1. Este posibila spargerea functiei ajax si cea a chartul in doua ca ulterior sa fie unite intr-un singur fisier js? Vreau sa aplez ajax-ul pentru mai multe modele de chart.

2. In functia ajax cum pot adauga mai multe url-uri?

Cod: Selectaţi tot

function fetch_select(){
  val_luna_inceput = $('#get_luna_inceput').val();
  $.ajax({
    type: 'POST',
    url: 'Query_sql/query_chart_column.php',
    data: { get_luna_inceput: val_luna_inceput
    },
    success: function (response) {
      document.getElementById('column_chart').innerHTML=response;
      columnChart( JSON.parse(response));
    }
  });
}
Multumesc mult!
MarPlo Mesaje:4343
Se poate folosi aceeasi functie pentru apelari diferite, definind functia cu parametri. Acei parametri sunt variabile ce pot avea valori diferite.
De exemplu functia aceea ar putea fi asa:

Cod: Selectaţi tot

/*
url = adresa script php
data = datele transmise la php
id_resp = id tag unde afisaza raspunsul
callback = functie care va fi apelata cu raspunsul de la server
*/
function fetch_select(url, data, id_resp, callback){
  $.ajax({
    type: 'POST',
    url: url,
    data: data,
    success: function (response) {
      document.getElementById(id_resp).innerHTML=response;
      callback( JSON.parse(response));
    }
  });
}
La apelare se tine cont de parametri:

Cod: Selectaţi tot

//apelare 1
var data_ajx = {get_luna_inceput: $('#get_luna_inceput').val() };
fetch_select('Query_sql/query_chart_column.php', data_ajx, 'column_chart', columnChart);

//apelare 2
var data_ajx = {prop: $('#id_elm').val() };
fetch_select('file2.php', data_ajx, 'other_id', otherFunction);
- Pentru explicatii mai detaliate si exemple despre functii, vezi si lectiile de pe site.
sterica Mesaje:285
multumesc mult,
Am o mica neplacere. Pana sa imi apara chart-ul, browserul afiseaza pentru o fractiune de secunda array cu datele pentru chart. Acest lucru apare cand sql are de procesat un volum mare de date. Cum pot elimina aceata neplacere.
Multumesc!
MarPlo Mesaje:4343
Ca idee:
1. Setezi cu css ca acel element html sa nu fie vizibil initial.
2. In codul javascript ajax care apeleaza scriptul php pt chart poti ascunde acel tag html, apoi, in functia care adauga chart-ul in pagina faci acel element vizibil (dupa adaugare).
Cam asa:

Cod: Selectaţi tot

<div id="divid" style="display:none;">Some data..</div>
<script>
// functia ajax
function fAjax(){
  document.getElementById('divid').style.display ='none';  //ascunde #divid

  //codul ajax..
}

// functia care adauga chart-ul
function fChart(chart_data){
  //adauga chart-ul..

  //afiseaza #divid
  document.getElementById('divid').style.display ='block';
}
</script>
sterica Mesaje:285
Functioneaza partea cu ascunsul si reafisarea insa tot imi arata array-ul cu datele pentru chart pentru o fractiune de secunda. In loc de blank ii pot adauga un preloader ca acesta: s600.photobucket.com/user/ugmhemhe/media/preloader.gif.html ?

Multumesc mult!
MarPlo Mesaje:4343
Identifica cand anume e adaugat acel array in pagina, si inainte de acel proces faci elementul ascuns; il re-afisezi dupa codul care adauga chart-ul.

Poti sa folosesti innerHTML ca sa adaugi sau sa stergi /schimbi continutul dintr-un element html.
De exemplu, ca sa adaugi o imagine:

Cod: Selectaţi tot

document.getElementById('divid').innerHTML ='<img src="adresa_img.jpg" width="200" height="200" />';
- In loc de <img> poti sa folosesti orice alt cod html, cu class si id.

Subiecte similare