line chart

122 views
Skip to first unread message

Marco Gennaro

unread,
Sep 22, 2016, 9:32:35 AM9/22/16
to Google Visualization API

Hello, I'm working on a project to draw a line chart whose values ​​are taken from a php / mysql database ; In the x -axis are represented the dates in format 2016-09-22 12:40:00;
the Y -axis represent measurements with different C such as temperature , wind speed , irradiation , and many other ... Via a selector I can activate or deactivate the measures to display. So far so good , but I can not constrain some measures on the axis of the right and others on the left , you know if you can do ?


for example : if the axis of the right represent the ambient temperature and on the left represent the temperature of an electric motor should I use scales with the auto focus , it can happen that a Y-axis has values ​​between 15 and 30 degrees , the other Y axis has values ​​between 20 and 40 , this could cause the line with the lowest temperatures is erroneously represented above the one with higher temperatures . I hope I have explained well proble and I apologize for my bad English .





Daniel LaLiberte

unread,
Sep 22, 2016, 10:03:57 AM9/22/16
to Google Visualization API
Hi Marco,

If I understand your question, you should probably use the viewWindow min and max options for both the left and right axes to constrain the range of each axis to the same values and use the same scale.

--
You received this message because you are subscribed to the Google Groups "Google Visualization API" group.
To unsubscribe from this group and stop receiving emails from it, send an email to google-visualization-api+unsub...@googlegroups.com.
To post to this group, send email to google-visualization-api@googlegroups.com.
Visit this group at https://groups.google.com/group/google-visualization-api.
To view this discussion on the web visit https://groups.google.com/d/msgid/google-visualization-api/d4ff9366-3c62-44b2-92e7-97aef614df93%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.



--

Marco Gennaro

unread,
Sep 27, 2016, 2:40:36 PM9/27/16
to Google Visualization API

Hi Daniel,
I wish I could fix some series on (Y) 0 axis and other series axis on (Y) 1 axis,

Can I set some columns of google.visualization.DataTable in the 0 series and other in the 1 series?

in the following example I would like to fix "myData.addColumn('number', 'Temperatura Parete');  " and "myData.addColumn('number', 'Temperatura Inverter'); " to 0 series that will draw on the axis 0, also "myData.addColumn('number', 'Ventilatore 1');" and "myData.addColumn('number', 'Ventilatore 2');" should be set to the series 1 which will draw on axis 1                  


 function drawChartTwoAxis(uno, due){

         var ass_axis = new Array(\"asse\", \"Temperatura Parete\", \"Temperatura Inverter\", \"Ventilatore 1\", \"Ventilatore 2\");

                   var myData = new google.visualization.DataTable();  
                   var mySolarimetro = new google.visualization.DataTable(); 
   
  myData.addColumn('datetime', 'data');  
  myData.addColumn('number', 'Temperatura Parete');   
  myData.addColumn('number', 'Temperatura Inverter'); 
  myData.addColumn('number', 'Ventilatore 1');
myData.addColumn('number', 'Ventilatore 2');
  
                                myData.addRows([ "


[ farther down in the script ]
 legend: 'none',
series: {
  0: {targetAxisIndex: 0},
  1: {targetAxisIndex: 1},
    },
vAxes: {
 // Adds titles to each axis.
 0: {title: ass_axis[uno]
},
 1: {title: ass_axis[uno],
 
 },
                                 2: {title: ass_axis[due] , ticks: [{v:0, f:'OFF'}, {v:1, f:'ON'}] 
                                          }
},




I hope I have written something comprehensible this time, thanks for your patience and I apologize again for my bad english

Marco


Il giorno giovedì 22 settembre 2016 16:03:57 UTC+2, Daniel LaLiberte ha scritto:
Hi Marco,

If I understand your question, you should probably use the viewWindow min and max options for both the left and right axes to constrain the range of each axis to the same values and use the same scale.
On Thu, Sep 22, 2016 at 6:59 AM, Marco Gennaro <marr...@gmail.com> wrote:

Hello, I'm working on a project to draw a line chart whose values ​​are taken from a php / mysql database ; In the x -axis are represented the dates in format 2016-09-22 12:40:00;
the Y -axis represent measurements with different C such as temperature , wind speed , irradiation , and many other ... Via a selector I can activate or deactivate the measures to display. So far so good , but I can not constrain some measures on the axis of the right and others on the left , you know if you can do ?


for example : if the axis of the right represent the ambient temperature and on the left represent the temperature of an electric motor should I use scales with the auto focus , it can happen that a Y-axis has values ​​between 15 and 30 degrees , the other Y axis has values ​​between 20 and 40 , this could cause the line with the lowest temperatures is erroneously represented above the one with higher temperatures . I hope I have explained well proble and I apologize for my bad English .





--
You received this message because you are subscribed to the Google Groups "Google Visualization API" group.
To unsubscribe from this group and stop receiving emails from it, send an email to google-visualization-api+unsub...@googlegroups.com.
To post to this group, send email to google-visua...@googlegroups.com.



--

Daniel LaLiberte

unread,
Sep 27, 2016, 2:46:07 PM9/27/16
to Google Visualization API
Marco,

It appears you are specifying the 'series' options correctly, using the targetAxisIndex option.  One other concern is whether you are using corecharts or one of the new material charts.  If the latter, note that they don't support the same options as the corecharts.

It would be best if you could give us a full example.  Hopefully, point to a web page that shows the chart you are working with.  Then, draw a picture of what you want it to look like instead.

To unsubscribe from this group and stop receiving emails from it, send an email to google-visualization-api+unsubscr...@googlegroups.com.



--

--
You received this message because you are subscribed to the Google Groups "Google Visualization API" group.
To unsubscribe from this group and stop receiving emails from it, send an email to google-visualization-api+unsub...@googlegroups.com.
To post to this group, send email to google-visualization-api@googlegroups.com.

Visit this group at https://groups.google.com/group/google-visualization-api.
To view this discussion on the web visit https://groups.google.com/d/msgid/google-visualization-api/9cdbeab0-793f-47a2-af81-6094e239fb03%40googlegroups.com.

For more options, visit https://groups.google.com/d/optout.



--

Marco Gennaro

unread,
Sep 28, 2016, 8:12:49 AM9/28/16
to Google Visualization API
Daniel,

I confirm to you that I use the corechart;
following the link below you can see an example of what I described in the previous email


as you can see the line " temperatura inverter " is drawn up to the line "temperatura parete" even if the rendered data in "temperatura parete" are greater than "temperatura inverter"
This is because the axis scales 1 is not fixed to the axis scale 0. If I set the max and min values ​​as suggested I can not see the lines of the "Ventilatore 1" and "Ventilatore 2" which can only have values ​​of 0 or 1 as they draw the status of the fan switch.
if use the bottom rotary switch to activate one or two lines of the fans, both temperatures are hooked to the axis 0, but unfortunately also the fans are hooked to the axis 0. This generates a very wide scale from 0 to 40 or more. This is incorrect because in other charts I have the same problem with scales much larger since some series have values ​​on the order of tens and other series on the order of thousands.
If you use the bottom rotary switch to activate a line for the temperatures and a line for fans, you finally see what I would get: the temperatures set on the axis 0 and the fans (switch state) fixed on axis 1.

I post below the code of my scripts PHP/MySql + javascript.
thanks again for the help.    
<?php

require_once('header.php'); 
require_once('menu.php');
require_once('menudinamico.php');

    //connessione al database
    $connessione = mysql_connect("xxx.xxx.xxx.xxx","x","x");
    $database = "x";

    //$datainizio_s = new DateTime();
    //$datafine_s = new DateTime();

    //$datainizio_sql = $datainizio_s->format('Y-m-d 00:i:s');
    //$datafine_sql = $datafine_s->format('Y-m-d H:i:s');

    //if(isset($_GET['inverter']))
      $sens_cab_FV = 1;
    //else
     // $inverter_post = 101;
 
    if(isset($_GET['datainizio']) && isset($_GET['datafine'])){

           $datainizio_sql =  str_replace("/", "-", $_GET['datainizio']);
           $datafine_sql =  str_replace("/", "-", $_GET['datafine']);//;$_POST['datafine'];

           $datainizio_sql = $datainizio_sql." 00:00:00";
           $datafine_sql = $datafine_sql." 23:59:59";
    }  

   // $datainizio_sql=date_format($datainizio,"d-m-Y");
   // $datafine_sql=date_format($datafine,"d-m-Y");
   
    mysql_select_db($database,$connessione);

    if($datainizio_sql ==  $datafine_sql){
         $sql = "SELECT * FROM `SensoriCabinaFV` WHERE `dataora = '" . $datainizio_sql . "'";
    }
else{

    $sql = "SELECT * FROM `SensoriCabinaFV` WHERE `dataora` >= '" . $datainizio_sql . "' AND `dataora` <= '" . $datafine_sql . "'";

 $sql_irr = "SELECT * FROM `new_dati_sensori` WHERE  `datetime` >= '" . $datainizio_sql . "' AND `datetime` <= '" . $datafine_sql . "'";

}
$i =0; 
    //prendermi i valori 101
    $risultato = mysql_query($sql);
    $erroresql = mysql_error();
  
 
       

  
    if (!$erroresql){
       //script visualizzazione
       $script = " <script type=\"text/javascript\"
          src=\"https://www.google.com/jsapi?autoload={
            'modules':[{
              'name':'visualization',
              'version':'1',
              'packages':['controls' , 'corechart', 'bar']
            }]
          }\"></script>";
       
        $script = $script. "<script type=\"text/javascript\">

                  

                   var visible = new Array(0,1,2);
                   google.setOnLoadCallback(drawChartTwoAxis(1,2));
 
                  function drawChart(){ 


                   var mySolarimetro = new google.visualization.DataTable(); 

                   var myData = new google.visualization.DataTable();  
                                myData.addColumn('datetime', 'data');  
                                myData.addColumn('number', 'Temperatura Parete');   
                                myData.addColumn('number', 'Temperatura Inverter'); 
                                myData.addColumn('number', 'Ventilatore 1');
                                myData.addColumn('number', 'Ventilatore 2');
                        


                                myData.addRows([ ";


        while($row = mysql_fetch_array($risultato)){
                $data = $row['dataora'];
        $temp1 = $row['temperatura1']/10;
                $temp2 = $row['temperatura2']/10;       
                $rele1 = $row['rele1'];
                $rele2 = $row['rele2'];
        
        

                 //"2015/06/01 00:12:00";
                $data_split = split(" " , $data);
                //ottengo solo la data 2015/06/01 
                $date =  $data_split[0];
                //ottengo solo l'ora 00:12:00
                $ora = $data_split[1];
                //l'obbiettivo è mettere i secondi a 00
                $ora_split = split(":" , $ora);
                $data = $date." ". $ora_split[0].":". $ora_split[1].":00"; 

                //if( $consumo_en_reale != -99)
                     $script2 = $script2 . "[new Date( '".str_replace("-","/", $data)."'),".$temp1.",".$temp2.",".$rele1.",".$rele2."],";

        }//fine while

        $script =  $script.$script2 . "]);";
        $script = $script. " //var chart = new google.visualization.LineChart(document.getElementById('curve_chart'));
                             //chart.draw(myData, options); 

                                 
 mySolarimetro.addColumn('datetime', 'data');  
   mySolarimetro.addColumn('number', 'Irragiamento');  

    mySolarimetro.addRows([ "; 

    //QUI

        $risultatoirr = mysql_query($sql_irr);
        
        while($row = mysql_fetch_array($risultatoirr)){
                $data = $row['datetime'];
                $irraggiamento = $row['irraggiamento'];
                //echo  "solar:"        .$data . $irraggiamento;
                //"2015/06/01 00:12:00";
                $data_split = split(" " , $data);
                //ottengo solo la data 2015/06/01 
                $date =  $data_split[0];
                //ottengo solo l'ora 00:12:00
                $ora = $data_split[1];
                //l'obbiettivo è mettere i secondi a 00
                $ora_split = split(":" , $ora);
                $data = $date." ". $ora_split[0].":". $ora_split[1].":00";
 
                if($irraggiamento<0)$irraggiamento=0;

                     $script3 = $script3 . "[new Date( '".str_replace("-","/", $data)."'),".$irraggiamento."],";

        }//fine while

        $script =  $script.$script3 . "]);";
        $script = $script. "

 var dash_container = document.getElementById('curve_chart');
  myDashboard = new google.visualization.Dashboard(dash_container);

  // Create a date range slider
  var myDateSlider = new google.visualization.ControlWrapper({
    'controlType': 'ChartRangeFilter',
    'containerId': 'control_div',
    'options': {
      'filterColumnLabel': 'data', 'height' : 80 
    
        
        }
  });


 // Line chart visualization
  var myLine = new google.visualization.ChartWrapper({
    'chartType' : 'LineChart',
    'containerId' : 'chart_div',
  });
  

 var opzioniGraficoLinee = { 
    title: 'Sensori Cabina FV ";

//momentaneamente stiamo indicando solo un impianto con id 1,
//quindi possiamo dividere per 100
// se si aggiungo impianti si deve modificare
$script = $script.(intval($sens_cab_FV)%100).
"', 
    focusTarget : 'category'
                                

    } // fine options

myLine.setOptions(opzioniGraficoLinee);

newData = google.visualization.data.join(myData, mySolarimetro, 'left', [[0,0]], [1, 2, 3, 4], [1]);

var view = new google.visualization.DataView(newData);
view.setColumns(visible); //here you set the columns you want to display

//Visualization Go draw!
//visualizationPlot.draw(view, options);

  // Bind myLine to the dashboard, and to the controls
  // this will make sure our line chart is update when our date changes
  myDashboard.bind(myDateSlider, myLine );

  myDashboard.draw(view); 


} //fine drawchart


 function drawChartTwoAxis(uno, due){   

                  var ass_axis = new Array(\"asse\", \"Temperatura Parete\", \"Temperatura Inverter\", \"Ventilatore 1\", \"Ventilatore 2\");

                   var myData = new google.visualization.DataTable();  
                   var mySolarimetro = new google.visualization.DataTable(); 
   
                                myData.addColumn('datetime', 'data');  
                                myData.addColumn('number', 'Temperatura Parete');   
                                myData.addColumn('number', 'Temperatura Inverter'); 
                                myData.addColumn('number', 'Ventilatore 1');
                                myData.addColumn('number', 'Ventilatore 2');
                                   
                                myData.addRows([ ";

        $script =  $script .$script2 . "]);";
        $script = $script. 
"

                       //var chart = new google.visualization.LineChart(document.getElementById('curve_chart'));
                      // chart.draw(myData, options); 

 mySolarimetro.addColumn('datetime', 'data');  
           mySolarimetro.addColumn('number', 'Irragiamento');  

            mySolarimetro.addRows([ "; 

 $script =  $script .$script3 . "]);";
        $script = $script. 
"
                                // Create a dashboard.
                  var dash_container = document.getElementById('curve_chart');
                  myDashboard = new google.visualization.Dashboard(dash_container);

                  // Create a date range slider
                  var myDateSlider = new google.visualization.ControlWrapper({
                    'controlType': 'ChartRangeFilter',
                    'containerId': 'control_div',
                    'options': {
                      'filterColumnLabel': 'data', 'height' : 80 
                    }
                  });   
        


                 // Line chart visualization
                  var myLine = new google.visualization.ChartWrapper({
                    'chartType' : 'LineChart',
                    'containerId' : 'chart_div',
                  });

                 var opzioniGraficoLinee = { 
                    focusTarget : 'category',
title: 'Sensori Cabina FV ";

//momentaneamente stiamo indicando solo un impianto con id 1,
//quindi possiamo dividere per 100
// se si aggiungo impianti si deve modificare
$script = $script.(intval($sens_cab_FV)%100).
"', 

                    legend: 'legenda',

                        series: {
                                  0: {targetAxisIndex: 0},
                                  1: {targetAxisIndex: 1}
                                },
                                vAxes: {
                                  // Adds titles to each axis.
                                  0: {title: ''
                                          },
                                  1: {title: '',

                                         ticks: [{v:0, f:'OFF'}, {v:1, f:'ON'}] 
                                         }
                                
                                }
                    } // fine options

                myLine.setOptions(opzioniGraficoLinee);
newData = google.visualization.data.join(myData, mySolarimetro, 'left', [[0,0]], [1, 2, 3, 4], [1]);
                var view = new google.visualization.DataView(newData);

                view.setColumns([0,uno,due]); //here you set the columns you want to display

                //Visualization Go draw!
                //visualizationPlot.draw(view, options);

                  // Bind myLine to the dashboard, and to the controls
                  // this will make sure our line chart is update when our date changes
                  myDashboard.bind(myDateSlider, myLine);

                  myDashboard.draw(view);

//$('#myPleaseWait').modal('hide');
        } 


// per il terzo asse Y

function drawChartThreeAxis(uno, due, tre){     


                  var ass_axis = new Array(\"asse\", \"Temperatura Parete\", \"Temperatura Inverter\", \"Ventilatore 1\", \"Ventilatore 2\");

                   var myData = new google.visualization.DataTable();  
                   var mySolarimetro = new google.visualization.DataTable(); 
                        
                        
                                myData.addColumn('datetime', 'data');  
                                myData.addColumn('number', 'Temperatura Parete');   
                                myData.addColumn('number', 'Temperatura Inverter'); 
                                myData.addColumn('number', 'Ventilatore 1');
                                myData.addColumn('number', 'Ventilatore 2');

                                myData.addRows([ ";

        $script =  $script .$script2 . "]);";
        $script = $script. 
"

                       //var chart = new google.visualization.LineChart(document.getElementById('curve_chart'));
                      // chart.draw(myData, options); 
 mySolarimetro.addColumn('datetime', 'data');  
           mySolarimetro.addColumn('number', 'Irragiamento');  

            mySolarimetro.addRows([ "; 

 $script =  $script .$script3 . "]);";
        $script = $script. 
"
                                // Create a dashboard.
                  var dash_container = document.getElementById('curve_chart');
                  myDashboard = new google.visualization.Dashboard(dash_container);

                  // Create a date range slider
                  var myDateSlider = new google.visualization.ControlWrapper({
                    'controlType': 'ChartRangeFilter',
                    'containerId': 'control_div',
                    'options': {
                      'filterColumnLabel': 'data', 'height' : 80 
                    }
                  });   
        


                 // Line chart visualization
                  var myLine = new google.visualization.ChartWrapper({
                    'chartType' : 'LineChart',
                    'containerId' : 'chart_div',
                  });

                 var opzioniGraficoLinee = { 
                    focusTarget : 'category',
title: 'Sensori Cabina FV ";

//momentaneamente stiamo indicando solo un impianto con id 1,
//quindi possiamo dividere per 100
// se si aggiungo impianti si deve modificare
$script = $script.(intval($sens_cab_FV)%100).
"', 


                    legend: 'none',
                        series: {
                                   0: {targetAxisIndex: 0},
                                   1: {targetAxisIndex: 1},
                   2: {targetAxisIndex: 1}

                                },
                                vAxes: {
                                  // Adds titles to each axis.
                                  0: {title: ass_axis[uno]
                                         },
                                  1: {title: ass_axis[due], ticks: [{v:0, f:'OFF'}, {v:1, f:'ON'}] 
                                          
                                          },
                  2: {title: ass_axis[uno]+' / '+ass_axis[due] , ticks: [{v:0, f:'OFF'}, {v:1, f:'ON'}] 
                      }
                                },

                        vAxis:{
         baselineColor: '#fff',
         gridlineColor: '#fff',
         textPosition: 'none'
                
           }
                    } // fine options

                myLine.setOptions(opzioniGraficoLinee);
newData = google.visualization.data.join(myData, mySolarimetro, 'left', [[0,0]], [1,2,3,4 ], [1]);
                var view = new google.visualization.DataView(newData);

                view.setColumns([0,uno,due,tre]); //here you set the columns you want to display

                //Visualization Go draw!
                //visualizationPlot.draw(view, options);

                  // Bind myLine to the dashboard, and to the controls
                  // this will make sure our line chart is update when our date changes
                  myDashboard.bind(myDateSlider, myLine);

                  myDashboard.draw(view);
        } 

//################################# aggiungo gli eventi ai check #######################
/*Array.prototype.remove = function(from, to) {
  var rest = this.slice((to || from) + 1 || this.length);
  this.length = from < 0 ? this.length + from : from;
  return this.push.apply(this, rest);
};
*/
Array.prototype.remove = function(value) {
var idx = this.indexOf(value);
if (idx != -1) {
    return this.splice(idx, 1); // The second parameter is the number of elements to remove.
}
return false;
}

Array.prototype.insert = function (index, item) {
  this.splice(index, 0, item);
};

//per la Temperatura Parete
document.addEventListener('DOMContentLoaded', function () {
      document.querySelector('#uno').addEventListener('change', changeHandler1);
});
function changeHandler1(){
  
   if(uno.checked){
     visible.insert(1,1);
   }
   else{
     visible.remove(1);
   }
    controlloArray();
}


// per la Temperatura Inverter
document.addEventListener('DOMContentLoaded', function () {

      document.querySelector('#due').addEventListener('change', changeHandler2);
});
function changeHandler2(){

   if(due.checked){
       visible.insert(2,2);
   }
   else{
     visible.remove(2);
   }
 controlloArray();
}


//per Ventilatore 1
document.addEventListener('DOMContentLoaded', function () {

      document.querySelector('#tre').addEventListener('change', changeHandler3);
});
function changeHandler3(){
   if(tre.checked){
       visible.insert(3,3);
   }
   else{
     visible.remove(3);
   }
 controlloArray();
}

// per Ventilatore 2
document.addEventListener('DOMContentLoaded', function () {
      document.querySelector('#quattro').addEventListener('change', changeHandler4);
});
function changeHandler4(){

   if(quattro.checked){
       visible.insert(4,4);
   }
   else{
     visible.remove(4);
   }
 controlloArray();
}

// per il solarimetro
document.addEventListener('DOMContentLoaded', function () {
      document.querySelector('#cinque').addEventListener('change', changeHandler5);
});
function changeHandler5(){

   if(quattro.checked){
       visible.insert(5,5);
   }
   else{
     visible.remove(5);
   }
 controlloArray();
}

function controlloArray(){
        if(visible.length == 3){
           //passo direttamente il numero delle misure che mi servono
           drawChartTwoAxis(visible[1],visible[2]);
        }
        else if(visible.length == 1){}
        else
           drawChart();
}


function checkchecked(visible, check){
        checkname = new Array('zero', 'uno', 'due', 'tre', 'quattro');

      if(visible.length > 4){
        alert(\"Massimo 4 selezioni\");
        document.getElementById(checkname[check]).checked = false;
                return 1;
        }
        return 0; 
}

</script>
";

    } //fine if

$body=
"
<!-- <div class=\"well\"> 
<span>Benvenuto</span>
</div> -->
<div class=\"well well-lg\"> 

<div class=\"row\">
  <div class=\"col-md-2\"> 

";

$body = $body . $dynamicMenu .

"
</div>

<!-- Modal Start here-->
<div id=\"loading-div-background\">
    <div id=\"loading-div\" class=\"ui-corner-all\" >
      <img style=\"height:80px;margin:30px;\" src=\"img/loading.gif\" alt=\"Loading..\"/>
      <h2 style=\"color:gray;font-weight:normal;\">Please wait....</h2>
     </div>
</div>
<!-- Modal ends Here -->


  <div class=\"col-md-10\"> <div id=\"curve_chart\" style=\"width:100%;\">";


$selettore = 
"<p id=\"selettoregiorno\" style=\"margin-bottom: 0.1em; margin-top: -0.1em; font-family:orbitron;color: #000;font-weight: bold;font-size: 0.8em;text-align: center;\">
   Dal 
    <input form=\"main-menu\" type=\"text\" id=\"selezionadatainizio\" name=\"datainizio\" value=\""; 


//se non c'e' precedentemente impostata imposta oggi se c'e' imposta
$datainizio = date("Y-m-d");
$datafine = date("Y-m-d");

// converte la stringa data in un oggetto data
$datainizio = date_create_from_format("Y-m-d",$datainizio);
$datafine = date_create_from_format("Y-m-d",$datafine);

if(isset($_GET['datainizio']) && isset($_GET['datafine'])){

           $datainizio_sql =  str_replace("/", "-", $_GET['datainizio']);
           $datafine_sql =  str_replace("/", "-", $_GET['datafine']);//;$_POST['datafine'];

           $datainizio = date_create_from_format("Y-m-d",$datainizio_sql);
           $datafine = date_create_from_format("Y-m-d",$datafine_sql);
    } 

$selettore = $selettore . date_format($datainizio,"Y-m-d") . "\" style=\"width: 9em; font-family:monospace\">
    Al 
    <input form=\"main-menu\" type=\"text\" id=\"selezionadatafine\" name=\"datafine\" value=\"".date_format($datafine,"Y-m-d")."\" style=\"width: 9em; font-family:monospace\">";      

$selettore = $selettore ."
   

    <input form=\"main-menu\" type=\"hidden\" id=\"type\" name=\"type\" value=\"".$type."\" style=\"width: 9em; font-family:monospace\">
    <button style=\"font:inherit; color:white; text-shadow:0 0 3px #000;\" form=\"main-menu\" type=\"submit\">esegui</button>
</p>";


$body = $body.$selettore.
"<div id=\"chart_div\" style=\"width:100%; height: 412px\"> </div>
        <div id=\"control_div\" style=\"width:100%; height: 62px;\"> </div>

</div> 

<!--  parte relativa ai check -->   
 <div class=\"input-group\">

      <span class=\"input-group-addon\">
        <input type=\"checkbox\" id=\"uno\" name=\"temp1\" checked> 
        <label for=\"temp1\"><nobr>Temperatura Parete</nobr></label>
      </span>

      <span class=\"input-group-addon\">
        <input type=\"checkbox\" id=\"due\" name=\"temp2\" checked> 
        <label for=\"temp2\"><nobr>Temperatura Inverter</nobr></label>
      </span>

      <span class=\"input-group-addon\">
        <input type=\"checkbox\" id=\"tre\" name=\"rele1\" unchecked> 
        <label for=\"rele1\"><nobr> Ventilatore 1 (On/Off) </nobr></label>
      </span>

      <span class=\"input-group-addon\">
        <input type=\"checkbox\" id=\"quattro\" name=\"rele2\" unchecked> 
        <label for=\"rele2\"><nobr>Ventilatore 2 (On/Off) </nobr></label>
      </span>
          
        

</div>


<!-- fine parte relativa ai check -->

</div>
</div>

</div>
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src=\"https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js\"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src=\"js/bootstrap.min.js\"></script>
  </body>
</html>
";

$datepicker = 
"<link rel=\"stylesheet\" href=\"//code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css\">
       
<script src=\"//code.jquery.com/jquery-1.10.2.js\"></script>
<script src=\"//code.jquery.com/ui/1.11.1/jquery-ui.js\"></script>
<script>

    var opzioniselettoredata = {
        showOtherMonths: true,
        selectOtherMonths: true,
        changeMonth: true,
        changeYear: true,
        dateFormat: \"yy-mm-dd\",

        minDate: new Date(\"2012\"),
        maxDate: new Date(),

        clearText: 'Svuota',
        clearStatus: '',
        clearStatus: 'Cancella la data corrente',
        closeText: 'Chiudi',
        closeStatus: '',
        closeStatus: 'Chiudi senza cambiamenti',
        prevText: '&lt;Prec',
        prevStatus: '',
        prevStatus: 'Mostra il mese precedente',
        nextText: 'Succ&gt;',
        nextStatus: '',
        nextStatus: 'Mostra il mese successivo',
        currentText: 'Oggi', 
        currentStatus: '',
        currentStatus: 'Mostra il mese corrente',
        monthNames: ['Gennaio','Febbraio','Marzo','Aprile','Maggio','Giugno','Luglio','Agosto','Settembre','Ottobre','Novembre','Dicembre'],
        monthNamesShort: ['Gen','Feb','Mar','Apr','Mag','Giu','Lug','Ago','Set','Ott','Nov','Dic'],
        monthStatus: 'Mostra un altro mese',
        yearStatus: 'Mostra un altro anno',
        weekHeader: 'Sm',
        weekStatus: '',
        weekStatus: 'Settimana dell\'anno',
        dayNames: ['Domenica','Luned&#236','Marted&#236','Mercoled&#236','Gioved&#236','Venerd&#236','Sabato'],
        dayNamesShort: ['Dom','Lun','Mar','Mer','Gio','Ven','Sab'],
        dayNamesMin: ['Do','Lu','Ma','Me','Gio','Ve','Sa'],
        dayStatus: 'Imposta DD come primo giorno della settimana',
        dateStatus: 'Seleziona DD, M d',
        dateFormat: 'yy-mm-dd', firstDay: 1,
        initStatus: 'Seleziona una data',
        isRTL: false
        };


    $(function () {

        $.datepicker.setDefaults(opzioniselettoredata);
        $(\"#selezionadatainizio\").datepicker({ onClose: function (selectedDate) { $(\"#selezionadatafine\").datepicker(\"option\", \"minDate\", selectedDate); } });
        $(\"#selezionadatafine\").datepicker({ onClose: function (selectedDate) { $(\"#selezionadatainizio\").datepicker(\"option\", \"maxDate\", selectedDate); } });


 //$(\"#loading-div-background\").show();
     //   $(\"#loading-div-background\").css({ opacity: 0 });
 
    });

</script>
";

$body = $body . $datepicker;

echo $header.$nav.$body.$script;

?>











 Daniel LaLiberte ha scritto:
To unsubscribe from this group and stop receiving emails from it, send an email to google-visualization-api+unsub...@googlegroups.com.



--

--
You received this message because you are subscribed to the Google Groups "Google Visualization API" group.
To unsubscribe from this group and stop receiving emails from it, send an email to google-visualization-api+unsub...@googlegroups.com.
To post to this group, send email to google-visua...@googlegroups.com.
Visit this group at https://groups.google.com/group/google-visualization-api.



--

Daniel LaLiberte

unread,
Sep 28, 2016, 10:44:26 AM9/28/16
to Google Visualization API
Your code is rather confusing, but I managed to put together a working jsfiddle: https://jsfiddle.net/dlaliberte/6qu2r7kL/

Note that you were calling setOnLoadCallback with a function call rather than a function.  
I also changed the loader use the new loader.

I changed the options in the function that appears to be used when you add the 3rd and 4th series.  For that one, you had not been using the series option to set up the targetAxisIndex.  With my change, the 3rd and 4th series are targeted at the right side axis.

I hope this clarifies what is going on.  


To unsubscribe from this group and stop receiving emails from it, send an email to google-visualization-api+unsubscr...@googlegroups.com.



--

--
You received this message because you are subscribed to the Google Groups "Google Visualization API" group.
To unsubscribe from this group and stop receiving emails from it, send an email to google-visualization-api+unsubscr...@googlegroups.com.

To post to this group, send email to google-visua...@googlegroups.com.
Visit this group at https://groups.google.com/group/google-visualization-api.



--

--
You received this message because you are subscribed to the Google Groups "Google Visualization API" group.
To unsubscribe from this group and stop receiving emails from it, send an email to google-visualization-api+unsub...@googlegroups.com.
To post to this group, send email to google-visualization-api@googlegroups.com.

Visit this group at https://groups.google.com/group/google-visualization-api.
To view this discussion on the web visit https://groups.google.com/d/msgid/google-visualization-api/c1e65926-8abd-4d1f-8ebe-b8772cab6967%40googlegroups.com.

For more options, visit https://groups.google.com/d/optout.



--

marrco

unread,
Sep 30, 2016, 5:06:05 AM9/30/16
to google-visua...@googlegroups.com
Thank you!!!!!!!  
Now it is a little better, but still can not get the desired result when active only two series of  data:  
if fixed them both on the axis 0 and active two measurement units far apart the axis scale is too large,  
if they fixed one to the axis 0 and one on the  axis 1  risk of having the lines arranged incorrectly ....

There is no way to decide which column allocated to axis 1 regardless of the order in which I make visible?

Anyway, thank you so much for the help you have given me up to now, has been very useful.








--

--
You received this message because you are subscribed to a topic in the Google Groups "Google Visualization API" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/google-visualization-api/xqLb8KsjzN0/unsubscribe.
To unsubscribe from this group and all its topics, send an email to google-visualization-api+unsub...@googlegroups.com.
Reply all
Reply to author
Forward
0 new messages