Forum

Cursuri online, tutoriale, jocuri si anime - gratuite
https://marplo.net/forum/

Highcharts JS cu valori din baza de date

https://marplo.net/forum/viewtopic.php?f=34&t=2354

Pagina 1 din 1

Highcharts JS cu valori din baza de date

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

Highcharts JS cu valori din baza de date

Scris: Joi Sep 01, 2016
de MarPlo
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...
}

Highcharts JS cu valori din baza de date

Scris: Joi Sep 01, 2016
de sterica
functioneaza. multumesc multde ajutor!

Highcharts JS cu valori din baza de date

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

Highcharts JS cu valori din baza de date

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

Highcharts JS cu valori din baza de date

Scris: Sâm Sep 10, 2016
de sterica
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!

Highcharts JS cu valori din baza de date

Scris: Sâm Sep 10, 2016
de MarPlo
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>

Highcharts JS cu valori din baza de date

Scris: Sâm Sep 10, 2016
de sterica
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!

Highcharts JS cu valori din baza de date

Scris: Dum Sep 11, 2016
de MarPlo
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.
Ora este UTC+03:00 UTC+3
Pagina 1 din 1
Powered by phpBB® Forum Software © phpBB Limited
https://www.phpbb.com/