Generare grafici con Google Chart selezionando il file .csv da un menu a tendina.

**tototer** · 23-03-2017, 15:06

Buongiorno a tutti, ho realizzato partendo da svariati esempi, il seguente script che partendo da alcuni dati contenuti all'interno di un file .csv genera un grafico utilizzando google charts. Il file in cui sono contenuti tutti i dati è il seguente

codice:

dati/today_log.csv

, ogni giorno mi viene generato a mezzanotte un file con il nome del giorno corrente ad esempio 24_03_17_log.csv e andrà in una cartella con tutti gli altri file dei giorni precedenti.

Vorrei creare un sistema che legge i file contenuti della cartella, e che li mostri in un menu a tendina, con tutti i nomi dei file che sono presenti in cartella e poi selezionando il file del giorno desiderato mi sviluppi il grafico.

qualcuno mi da una mano? posto a seguire il codice che ho utilizzo fin ora. saluti e grazie a tutti

codice:

<!DOCTYPE html>
<head>
 <meta charset="utf-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->


 <meta name="HandheldFriendly" content="True">
 <meta name="MobileOptimized" content="320"> 
 <meta name="description" content="test">


 <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
 <script src="jquery.csv-0.71.min.js"></script>
 <script type="text/javascript" src="http://www.google.com/jsapi"></script>


<script type="text/javascript"> 
	
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);


function drawChart() {


   $.get("dati/today_log.csv", function(csvString) {
  
      var arrayData = $.csv.toArrays(csvString, {onParseValue: $.csv.hooks.castToScalar});


      var data = new google.visualization.arrayToDataTable(arrayData);


      var view = new google.visualization.DataView(data);
      
      view.setColumns([12,0,1]);


	  var options = {
        title: "Temperatura (°C)",
   
        legend: 'none'
     };


     var chart = new google.visualization.LineChart(document.getElementById("chart"));
     chart.draw(view, options);
  })
}


</script>


 </head>
 
  <body>
    <div id="chart" </div>
  </body>
</html>

**tototer** · 23-03-2017, 17:52

codice:

<?php

$path = "dati/"; //change this if the script is in a different dir that the files you want
$show = array( '.csv', '.html' ); //Type of files to show


$select = "<select name=\"content\" id=\"content\">";


$dh = @opendir( $path );


while( false !== ( $file = readdir( $dh ) ) ){
    $ext=substr($file,-4,4);
        if(in_array( $ext, $show )){       
            $select .= "<option value='$path/$file'>$file</option>\n";
    }
}  


$select .= "</select>";
closedir( $dh );


echo "$select";
?>

Ho trovato questo codice in php che va vedere perfettamente i file contenuti nella cartella. sarebbe interessante selezionane il file e mandarlo su:

$.get("FILE.csv", function(csvString) {
in modo che google chart richiede prima il file e poi elebora il grafico.

saluti

Discussione: Generare grafici con Google Chart selezionando il file .csv da un menu a tendina.

Strumenti discussione

Ricerca discussione

Visualizza

Generare grafici con Google Chart selezionando il file .csv da un menu a tendina.

Permessi di invio