Problema passaggio valori numerici per jqPlot(plugin jquery)

**Dheed** · 24-06-2011, 13:25

Salve,dovrei realizzare un grafico con delle date e dei valori di temperatura,ma ho un problema con le prime,per tracciare il grafico jqplot ha bisogno di valori numerici,ma non risco a passarli...io salvo le date in un databse in questo formato:
giorno 0000-00-00
ora 00:00:00

quindi quale estraggo e le metto in un array salta fuori così:

codice:

[['2011-06-24 12:17:56', 31.25],['2011-06-24 11:17:45', 29.79],['2011-06-24 10:47:40', 29.3],['2011-06-23 23:50:32', 28.32],['2011-06-23 22:50:20', 28.81],['2011-06-23 19:49:54', 29.79],['2011-06-23 18:58:30', 28.32],['2011-06-23 18:28:25', 28.32],['2011-06-23 17:58:19', 28.32],['2011-06-23 17:28:14', 28.81]]

Solo che me li riconosce come caratteri e non numeri,quindi non funziona un grillo...ho provato con array.push,ma così non mi compare niente e non restituisce errori...
Questo è il mio codice:

Codice PHP:


<?php



define ("DB_HOST", "localhost:3306"); // set database host

define ("DB_USER", "x_x"); // set database user

define ("DB_PASS","x"); // set database password

define ("DB_NAME","x_x"); // set database name



echo'<html><head>  

  <link rel="stylesheet" type="text/css" href="../plugin/jquery.jqplot.css" />

  <link rel="stylesheet" type="text/css" href="../plugin/examples.css" />

  

      

    <script language="javascript" type="text/javascript" src="../plugin/jquery.min.js"></script>

    <script language="javascript" type="text/javascript" src="../plugin/jquery.jqplot.min.js"></script>

  

    <script language="javascript" type="text/javascript" src="../plugin/jqplot.logAxisRenderer.js"></script>

    <script language="javascript" type="text/javascript" src="../plugin/jqplot.canvasTextRenderer.js"></script>

    <script language="javascript" type="text/javascript" src="../plugin/jqplot.canvasAxisLabelRenderer.js"></script>

    <script language="javascript" type="text/javascript" src="../plugin/jqplot.canvasAxisTickRenderer.js"></script>

    <script type="text/javascript" src="../plugin/jqplot.canvasTextRenderer.min.js"></script>

    <script type="text/javascript" src="../plugin/jqplot.dateAxisRenderer.min.js"></script>    

    <script language="javascript" type="text/javascript" src="../plugin/jqplot.barRenderer.js"></script>

    

    <script type="text/javascript" src="../plugin/jqplot.cursor.min.js"></script>

        <script type="text/javascript" src="../plugin/jqplot.highlighter.min.js"></script>

    



    

    <style type="text/css">

      .jqplot-point-label {white-space: nowrap;}

          .jqplot { margin: 70px;}

    </style>

    

        </head><body background="images/bgpagina.jpg">';





$link = mysql_connect(DB_HOST, DB_USER, DB_PASS) or die("Couldn't make connection.");

$db = mysql_select_db(DB_NAME, $link) or die("Couldn't select database");

$con=0;

$line2=array();

$res = mysql_query("SELECT * FROM `tempreg` ORDER BY id DESC LIMIT 0,11",$link);



if($res && mysql_num_rows($res)>0){

        echo "<center><div id='graf'  style='height:97%; width:98.5%'></div></center>";

    echo'</body></html>';

    echo "<script>"; 

    //echo "instem=new Array();indate=new Array();inora=new Array();inf=new Array();infor=new Array;";

    

     while($row=mysql_fetch_assoc($res)){  

        $instem[$con]=$row['valore'];

        $indate[$con]=$row['giorno'];

        $inora[$con]=$row['orario'];

        $con+=1;

     }

     $con-=1;

    $line2_push('[');

       $line2_push('[\'',intval($indate[0]),' ',intval($inora[0]),'\'',',',' ',floatval($instem[0]),'],');

       for($i=1;$i<$con;$i++){

       if($i!=$con-1)

           $line2_push('[\'',intval($indate[0]),' ',intval($inora[0]),'\'',',',' ',floatval($instem[0]),'],');

       else

          $line2_push('[\'',intval($indate[0]),' ',intval($inora[0]),'\'',',',' ',floatval($instem[0]),']');

           }

       $line2_push(']');

    echo"<script>alert(".$line2.");</script>";



    echo"

$(document).ready(function(){    

      $.jqplot.config.enablePlugins = true;

     /* for(i=0;i<".$con.";i++)

           inf[i].push(parseFloat(indate[i]),' ',parseFloat(inora[i]),',',' ',parseFloat(instem[i]));

       line2=inf;*/

       //line2=[['2011-06-24 12:17:56', 31.25],['2011-06-24 11:17:45', 29.79],['2011-06-24 10:47:40', 29.3],['2011-06-23 23:50:32', 28.32],['2011-06-23 22:50:20', 28.81],['2011-06-23 19:49:54', 29.79],['2011-06-23 18:58:30', 28.32],['2011-06-23 18:28:25', 28.32],['2011-06-23 17:58:19', 28.32],['2011-06-23 17:28:14', 28.81]]

       line2=".$line2."

       alert(line2);

    plot2 = $.jqplot('graf', [line2], {

    series: [{ 

            renderer: $.jqplot.OHLCRenderer,

            rendererOptions: {

                candleStick: true,

            }

        }], 

      axes: {

        xaxis: {

          renderer: $.jqplot.DateAxisRenderer,

          label: 'Date',

          labelRenderer: $.jqplot.CanvasAxisLabelRenderer,

          tickRenderer: $.jqplot.CanvasAxisTickRenderer,

              tickInterval: '30 minutes', 

             /* min:'2011-06-23 12:00:00',

              max:'2011-06-24 12:00:00',*/

              tickOptions:{formatString:'%Y-%m-%d %H:%M:%S',angle: -30,},      

        },

        

        yaxis: {

          label: 'Temperature',

          labelRenderer: $.jqplot.CanvasAxisLabelRenderer,

          min:'0',

          max:'40',

        }

        

      },

      

      highlighter:{show:true,showTooltipUnitPosition: false,followMouse: false,showTooltipGridPosition: false,},

        cursor:{show: true,zoom:true,showTooltip:false,}

    });



});



</script>";

} else{



     echo "<center>Valori Insufficenti</center>";



     }

     

die($query);

?>

Questa è una risposta che ho trovato in giro per internet

Hi Giuseppe, You are concatenating a string and then pushing that onto your line array. So your line array is an array of strings. You need arrays of numbers in your line array. Something like: line.push([parseFloat(d[index].data), parseFloat(d[index].value)]);

Se ho fatto qualche errore stupido perdonatemi,non sono molto bravo

Mi era venuto anche un dubbio:devo per caso separare i diversi valori nel database?

**Santino83_02** · 24-06-2011, 14:21

ma il grafico che vuoi realizzare che valori vuole? perchè da come ti hanno risposto, sembrerebbe che x e y debbano essere numerici, quindi se gli passi una data penso che sbagli (non so in javascript parsefloat di una data che tiri fuori)... prova a rileggere bene la documentazione del grafico in questione...

e poi fatidica domanda: ma che centra in tutto questo php? se php stampa come ti aspetti l'html, il problema è di javascript quindi dovresti chiedere nel forum javascript

**Dheed** · 24-06-2011, 14:35

Il grafico deve risultare così:
sito del plugn

L'ho girato un attimo,effettivamente non centra tanto,ma se il problema è che salvo nel database le date con i trattini e i due punti,allora devo cambiare il formato e quindi con javascript ha poco che vedere...comunque ho girato un attimo il codice:

Codice PHP:


<?php



define ("DB_HOST", "localhost:3306"); // set database host

define ("DB_USER", "oxoc_sirdhee"); // set database user

define ("DB_PASS","Farebury"); // set database password

define ("DB_NAME","oxoc_utentiregi"); // set database name



echo'<html><head>  

  <link rel="stylesheet" type="text/css" href="../plugin/jquery.jqplot.css" />

  <link rel="stylesheet" type="text/css" href="../plugin/examples.css" />

  

      

    <script language="javascript" type="text/javascript" src="../plugin/jquery.min.js"></script>

    <script language="javascript" type="text/javascript" src="../plugin/jquery.jqplot.min.js"></script>

  

    <script language="javascript" type="text/javascript" src="../plugin/jqplot.logAxisRenderer.js"></script>

    <script language="javascript" type="text/javascript" src="../plugin/jqplot.canvasTextRenderer.js"></script>

    <script language="javascript" type="text/javascript" src="../plugin/jqplot.canvasAxisLabelRenderer.js"></script>

    <script language="javascript" type="text/javascript" src="../plugin/jqplot.canvasAxisTickRenderer.js"></script>

    <script type="text/javascript" src="../plugin/jqplot.canvasTextRenderer.min.js"></script>

    <script type="text/javascript" src="../plugin/jqplot.dateAxisRenderer.min.js"></script>    

    <script language="javascript" type="text/javascript" src="../plugin/jqplot.barRenderer.js"></script>

    

    <script type="text/javascript" src="../plugin/jqplot.cursor.min.js"></script>

        <script type="text/javascript" src="../plugin/jqplot.highlighter.min.js"></script>

    



    

    <style type="text/css">

      .jqplot-point-label {white-space: nowrap;}

          .jqplot { margin: 70px;}

    </style>

    

        </head><body background="images/bgpagina.jpg">';





$link = mysql_connect(DB_HOST, DB_USER, DB_PASS) or die("Couldn't make connection.");

$db = mysql_select_db(DB_NAME, $link) or die("Couldn't select database");

$con=0;



$res = mysql_query("SELECT * FROM `tempreg` ORDER BY id DESC LIMIT 0,11",$link);



if($res && mysql_num_rows($res)>0){

        echo "<center><div id='graf'  style='height:97%; width:98.5%'></div></center>";

    echo'</body></html>';

    echo "<script>"; 

    echo "instem=new Array();indate=new Array();inora=new Array();inf=new Array();infor=new Array;";

    

     while($row=mysql_fetch_assoc($res)){  

        echo "instem[".$con."]"."=".floatval($row['valore']).";";

        echo "indate[".$con."]"."='".intval($row['giorno'])."';";

        echo "inora[".$con."]='".intval($row['orario'])."';";

        //echo "inf[".$con."]=''['+indate[".$con."]+' '+ inora[".$con."]+','+instem[".$con."] +']'';";

        //echo "alert(inf[".$con."]);";

        $con+=1;

     }

     $con-=1;

    

    



    echo"



$(document).ready(function(){    

      $.jqplot.config.enablePlugins = true;

     /* for(i=0;i<".$con.";i++)

           inf[i].push(parseFloat(indate[i]),' ',parseFloat(inora[i]),',',' ',parseFloat(instem[i]));

       line2=inf;*/

       //line2=[['2011-06-24 12:17:56', 31.25],['2011-06-24 11:17:45', 29.79],['2011-06-24 10:47:40', 29.3],['2011-06-23 23:50:32', 28.32],['2011-06-23 22:50:20', 28.81],['2011-06-23 19:49:54', 29.79],['2011-06-23 18:58:30', 28.32],['2011-06-23 18:28:25', 28.32],['2011-06-23 17:58:19', 28.32],['2011-06-23 17:28:14', 28.81]]

       line2='[';

       line2+='[\''+indate[0]+' '+(inora[0])+'\''+','+' '+instem[0]+'],';

       for(i=1;i<".$con.";i++){

       if(i!=".$con."-1)

           line2+='[\''+indate[i]+' '+inora[i]+'\''+','+' '+instem[i]+'],';

       else

          line2+='[\''+indate[i]+' '+inora[i]+'\''+','+' '+instem[i]+'],';

           }

       line2+=']';

       

       alert(line2);

    plot2 = $.jqplot('graf', [line2], {

    series: [{ 

            renderer: $.jqplot.OHLCRenderer,

            rendererOptions: {

                candleStick: true,

            }

        }], 

      axes: {

        xaxis: {

          renderer: $.jqplot.DateAxisRenderer,

          label: 'Date',

          labelRenderer: $.jqplot.CanvasAxisLabelRenderer,

          tickRenderer: $.jqplot.CanvasAxisTickRenderer,

              tickInterval: '30 minutes', 

             /* min:'2011-06-23 12:00:00',

              max:'2011-06-24 12:00:00',*/

              tickOptions:{formatString:'%Y-%m-%d %H:%M:%S',angle: -30,},      

        },

        

        yaxis: {

          label: 'Temperature',

          labelRenderer: $.jqplot.CanvasAxisLabelRenderer,

          min:'0',

          max:'40',

        }

        

      },

      

      highlighter:{show:true,showTooltipUnitPosition: false,followMouse: false,showTooltipGridPosition: false,},

        cursor:{show: true,zoom:true,showTooltip:false,}

    });



});



</script>";

} else{



     echo "<center>Valori Insufficenti</center>";



     }

     

die($query);

?>

Discussione: Problema passaggio valori numerici per jqPlot(plugin jquery)

Strumenti discussione

Ricerca discussione

Visualizza

Problema passaggio valori numerici per jqPlot(plugin jquery)

Permessi di invio