function graph() {

  Highcharts.dateFormats = {
    W : function(timestamp) {
      var date = new Date(timestamp),
          day = date.getUTCDay() == 0 ? 7 : date.getUTCDay(),
          dayNumber;
      date.setDate(date.getUTCDate() + 4 - day);
      dayNumber = Math.floor((date.getTime() - new Date(date.getUTCFullYear(), 0, 1, -6)) / 86400000);
      return 1 + Math.floor(dayNumber / 7);

    }
  }
  
  var codes = "";

  codes += '<div class="row">';
  codes += '<div class="col s1 m3 l3">';
  codes += '</div>';
  codes += '<div class="col s2 m1 l1">';
  codes += '<button class="btn-floating waves-effect cyan darken-2" type="submit" name="action" onclick="load(0)">24h</button>';
  codes += '</div>';
  codes += '<div class="col s2 m1 l1">';
  codes += '<button class="btn-floating waves-effect cyan darken-2" type="submit" name="action" onclick="load(1)">48h</button>';
  codes += '</div>';
  codes += '<div class="col s2 m1 l1">';
  codes += '<button class="btn-floating waves-effect cyan darken-2" type="submit" name="action" onclick="load(2)">7g</button>';
  codes += '</div>';
  codes += '<div class="col s2 m1 l1">';
  codes += '<button class="btn-floating waves-effect cyan darken-2" type="submit" name="action" onclick="load(3)">28g</button>';
  codes += '</div>';
  codes += '<div class="col s2 m1 l1">';
  codes += '<button class="btn-floating waves-effect cyan darken-2" type="submit" name="action" onclick="load(4)">365g</button>';
  codes += '</div>';
  codes += '<div class="col s1 m3 l3">';
  codes += '</div>';
  codes += '<div class="row col s12 m12 l12">';
  codes += '</div>';
  codes += '<div class="col s12 m12 l6">';
  codes += '<div id="oone_"></div>';
  codes += '</div>';
  codes += '<div class="col s12 m12 l6">';
  codes += '<div id="ttwo_"></div>';
  codes += '</div>';
  codes += '<div class="col s12 m12 l6">';
  codes += '<div id="ttree_"></div>';
  codes += '</div>';
  codes += '<div class="col s12 m12 l6">';
  codes += '<div id="ffour_"></div>';
  codes += '</div>';
  codes += '<div class="col s12 m12 l6">';
  codes += '<div id="ffive_"></div>';
  codes += '</div>';
  codes += '<div class="col s12 m12 l6">';
  codes += '<div id="ssix_"></div>';
  codes += '</div>';
  codes += '<div class="col s12 m12 l6">';
  codes += '<div id="sseven_"></div>';
  codes += '</div>';
  codes += '<div class="col s12 m12 l6">';
  codes += '<div id="eeight_"></div>';
  codes += '</div>';
  codes += '</div>';
  $("#contpageg").hide("slow", function() {
    $('#contpage').html(codes).fadeIn("slow", function() {
      load(0);
    });
  });
}

function load(itvl) {
  var yTitles = {
    color : "#000000",
    fontWeight : "bold",
    fontSize : "10px"
  };
  var yLabels = {
    color : "#4682B4",
    fontWeight : "bold",
    fontSize : "9px"
  };
  var yLabelsBaro = {
    color : "#228B22",
    fontWeight : "bold",
    fontSize : "9px"
  };
  var yLabelsTemp = {
    color : "#000000",
    fontWeight : "bold",
    fontSize : "9px"
  };
  var yLabelsWind = {
    color : "#228B22",
    fontWeight : "bold",
    fontSize : "9px"
  };
  var yLabelsSol = {
    color : "#FFA500",
    fontWeight : "bold",
    fontSize : "9px"
  };
  var yLabelsUV = {
    color : "#640c64",
    fontWeight : "bold",
    fontSize : "9px"
  };

  var maxrain = 0,
      maxrainrate = 0;

  var parameter = "";
  var one_Options = [];
  one_Counter = 0;
  one_names = ['HeatI', 'WindC', 'DewP', 'TemP'];
  var two_Options = [];
  two_Counter = 0;
  two_names = ['Pressione', 'Umidità'];
  var tree_Options = [];
  tree_Counter = 0;
  tree_names = ['Vento', 'Raffica'];
  var four_Options = [];
  four_Counter = 0;
  four_names = ['Direzione del vento'];
  var five_Options = [];
  five_Counter = 0;
  five_names = ['Pioggia'];
  var six_Options = [];
  six_Counter = 0;
  six_names = ['RainRate'];
  var seven_Options = [];
  seven_Counter = 0;
  seven_names = [];
  var eight_Options = [];
  eight_Counter = 0;
  eight_names = [];
  var nine_Options = [];
  nine_Counter = 0;
  nine_names = [];
  var ten_Options = [];
  ten_Counter = 0;
  ten_names = [];

  switch(itvl) {
  case 0:
    var php = '76ab68f835f5da529.php';
    var datform = '%A %d %b %H:%M';
    var datformm = '%A %d %b %H:%M';
    break;
  case 1:
    var php = '5071c43583f97097662bf3ef3d2.php';
    var datform = '%A %d %b %H:%M';
    var datformm = '%A %d %b %H:%M';
    break;
  case 2:
    var php = '02d15d3e8b4218b85.php';
    var datform = '%A %d %b %H:%M';
    var datformm = '%A %d %b';
    break;
  case 3:
    var php = '2336e69c2e6ae078dcb7b.php';
    var datform = '%A %d %b %H:%M';
    var datformm = '%A %d %b';
    break;
  case 4:
    var php = '7d926d52aa6702f5b7aea50946.php';
    var datform = '%A %d %b';
    var datformm = '%Y %b %Wª settimana ';
    break;
  }

  $.getJSON('data/gph2show.php?station=' + jstation + '&callback=?', function(param) {

    if (param.radiation == 1) {
      seven_names = ['Rad. globale'];
      eight_names = ['Evapotraspirazione'];
    }
    if (param.UV == 1) {
      seven_names = ['Rad.UV'];
    }
    if (param.UV == 1 && param.radiation == 1) {
      seven_names = ['Rad. globale', 'Rad.UV'];
      eight_names = ['Evapotraspirazione'];
    }
    if (param.extraTemp1 == 1)
      nine_names = ['Extra Temp'];
    if (param.extraHumid1 == 1)
      ten_names = ['Extra UR'];
  });

  $.each(one_names, function(i, name) {
    if (name == "TemP") {
      parameter = "outTemp"
    }
    if (name == "DewP") {
      parameter = "dewpoint"
    }
    if (name == "WindC") {
      parameter = "windchill"
    }
    if (name == "HeatI") {
      parameter = "heatindex"
    }

    $.getJSON('data/' + php + '?station=' + jstation + '&paramtr=' + parameter + '&callback=?', function(data) {
      one_Options[i] = {
        name : name,
        data : data
      };

      // As we're loading the data asynchronously, we don't know what order it will arrive. So
      // we keep a counter and create the chart when all the data is loaded.
      one_Counter += 1;

      if (one_Counter === one_names.length) {
        one_Chart();
      }
    });
  });

  function one_Chart() {
    var one_Chart = new Highcharts.Chart({
      chart : {
        spacingTop : 5,
        spacingBottom : 10,
        height : 190,
        renderTo : 'oone_',
        defaultSeriesType : "spline",
        backgroundColor : 'rgba(255, 255, 255, 0)',
        style : {
          fontFamily : '"Roboto",sans-serif',
          fontSize : '11px'
        }
      },
      colors : ['#FFA500', '#00BFFF', '#A52A2A', '#4682B4'],
      credits : {
        enabled : false
      },
      title : {
        text : ''
      },
      legend : {
        borderWidth : 0,
        align : 'center',
        verticalAlign : 'top',
        rtl : true
      },
      yAxis : {
        lineWidth : 2,
        tickPixelInterval : 30,
        offset : 0,
        title : {
          text : "°C",
          rotation : 0,
          align : "high",
          offset : 0,
          x : -10,
          y : -20,
          style : yTitles
        },
        labels : {
          align : "right",
          x : -7,
          y : -5,
          style : yLabelsTemp
        }
      },
      xAxis : {
        type : 'datetime'
      },
      tooltip : {

        backgroundColor : "#A2D959",
        borderColor : "#fff",
        borderRadius : 3,
        borderWidth : 0,
        shared : true,
        crosshairs : {
          width : 0.5,
          color : "#666"
        },
        style : {
          lineHeight : "16px",
          fontSize : "10px",
          color : "#000"
        },
        formatter : function() {
          var s = Highcharts.dateFormat(datform, this.x);
          $.each(this.points, function(i, point) {
            var unit = {
            "HeatI": "°C",
            "WindC": "°C",
            "DewP": "°C",
            "TemP": "°C"
            }[point.series.name];
            if (point.series.name != " ") {
              s += "<br/>" + point.series.name + ": <b>" + point.y + unit + "</b>";
            }
          });
          return s;
        }
      },
      plotOptions : {
        series : {
          marker : {
            radius : 0,
            states : {
              hover : {
                enabled : true
              }
            }
          }
        },
        spline : {
          lineWidth : 1.5,
          shadow : false,
          cursor : "pointer",
          states : {
            hover : {
              enabled : false
            }
          }
        }
      },
      series : one_Options
    });

    l = 0;
    $.each(two_names, function(l, name) {
      if (name == "Pressione")
        parameter = "barometer";
      if (name == "Umidità")
        parameter = "outHumidity";

      $.getJSON('data/' + php + '?station=' + jstation + '&paramtr=' + parameter + '&callback=?', function(data) {
        two_Options[l] = {
          name : name,
          data : data,
          yAxis : l
        };

        // As we're loading the data asynchronously, we don't know what order it will arrive. So
        // we keep a counter and create the chart when all the data is loaded.
        two_Counter += 1;

        if (two_Counter === two_names.length) {
          two_Chart();
        }
      });
    });
  }

  function two_Chart() {
    var two_Chart = new Highcharts.Chart({
      chart : {
        spacingTop : 5,
        spacingBottom : 10,
        height : 190,
        renderTo : 'ttwo_',
        defaultSeriesType : "spline",
        backgroundColor : 'rgba(255, 255, 255, 0)',
        style : {
          fontFamily : '"Roboto",sans-serif',
          fontSize : '11px'
        }
      },
      colors : ['#228B22', '#4682B4'],
      credits : {
        enabled : false
      },
      title : {
        text : ''
      },
      legend : {
        borderWidth : 0,
        align : 'center',
        verticalAlign : 'top',
        rtl : true
      },
      yAxis : [{
        lineWidth : 2,
        tickPixelInterval : 30,
        offset : 0,
        title : {
          text : "hPa",
          rotation : 0,
          align : "high",
          offset : 0,
          x : -10,
          y : -20,
          style : yTitles
        },
        labels : {
          align : "right",
          x : -7,
          y : -5,
          style : yLabelsBaro
        }
      }, {
        tickPixelInterval : 30,
        min : 0,
        max : 100,
        offset : 0,
        title : {
          text : "%",
          rotation : 0,
          align : "high",
          offset : 0,
          x : 15,
          y : -20,
          style : yTitles
        },
        labels : {
          align : "left",
          x : 5,
          y : -5,
          style : yLabels
        }
      }],
      xAxis : {
        type : 'datetime'
      },
      tooltip : {

        backgroundColor : "#A2D959",
        borderColor : "#fff",
        borderRadius : 3,
        borderWidth : 0,
        shared : true,
        crosshairs : {
          width : 0.5,
          color : "#666"
        },
        style : {
          lineHeight : "16px",
          fontSize : "10px",
          color : "#000"
        },
        formatter : function() {
          var s = Highcharts.dateFormat(datform, this.x);
          $.each(this.points, function(i, point) {
            var unit = {
            "Umidità": "%",
            "Pressione": " hPa"
            }[point.series.name];
            if (point.series.name != " ") {
              s += "<br/>" + point.series.name + ": <b>" + point.y + unit + "</b>";
            }
          });
          return s;
        }
      },
      plotOptions : {
        series : {
          marker : {
            radius : 0,
            states : {
              hover : {
                enabled : true
              }
            }
          }
        },
        spline : {
          lineWidth : 1.5,
          shadow : false,
          cursor : "pointer",
          states : {
            hover : {
              enabled : false
            }
          }
        }
      },
      series : two_Options
    });

    l = 0;
    $.each(tree_names, function(l, name) {
      if (name == "Vento")
        parameter = "windSpeed";
      if (name == "Raffica")
        parameter = "windGust";

      $.getJSON('data/' + php + '?station=' + jstation + '&paramtr=' + parameter + '&callback=?', function(data) {
        tree_Options[l] = {
          name : name,
          data : data
        };

        // As we're loading the data asynchronously, we don't know what order it will arrive. So
        // we keep a counter and create the chart when all the data is loaded.
        tree_Counter += 1;

        if (tree_Counter === tree_names.length) {
          tree_Chart();
        }
      });
    });
  }

  function tree_Chart() {
    var tree_Chart = new Highcharts.Chart({
      chart : {
        spacingTop : 5,
        spacingBottom : 10,
        height : 190,
        renderTo : 'ttree_',
        defaultSeriesType : "spline",
        backgroundColor : 'rgba(255, 255, 255, 0)',
        style : {
          fontFamily : '"Roboto",sans-serif',
          fontSize : '11px'
        }
      },
      colors : ['#000000', '#A52A2A'],
      credits : {
        enabled : false
      },
      title : {
        text : ''
      },
      legend : {
        borderWidth : 0,
        align : 'center',
        verticalAlign : 'top',
        rtl : true
      },
      yAxis : {
        lineWidth : 2,
        tickPixelInterval : 30,
        offset : 0,
        title : {
          text : "km/h",
          rotation : 0,
          align : "high",
          offset : 0,
          x : -10,
          y : -20,
          style : yTitles
        },
        labels : {
          align : "right",
          x : -7,
          y : -5,
          style : yLabelsTemp
        }
      },
      xAxis : {
        type : 'datetime'
      },
      tooltip : {

        backgroundColor : "#A2D959",
        borderColor : "#fff",
        borderRadius : 3,
        borderWidth : 0,
        shared : true,
        crosshairs : {
          width : 0.5,
          color : "#666"
        },
        style : {
          lineHeight : "16px",
          fontSize : "10px",
          color : "#000"
        },
        formatter : function() {
          var s = Highcharts.dateFormat(datform, this.x);
          $.each(this.points, function(i, point) {
            var unit = {
            "Vento": " km/h",
            "Raffica": " km/h"
            }[point.series.name];
            if (point.series.name != " ") {
              s += "<br/>" + point.series.name + ": <b>" + point.y + unit + "</b>";
            }
          });
          return s;
        }
      },
      plotOptions : {
        series : {
          marker : {
            radius : 0,
            states : {
              hover : {
                enabled : true
              }
            }
          }
        },
        spline : {
          lineWidth : 1.5,
          shadow : false,
          cursor : "pointer",
          states : {
            hover : {
              enabled : false
            }
          }
        }
      },
      series : tree_Options
    });

    l = 0;
    $.each(four_names, function(l, name) {
      if (name == "Direzione del vento")
        parameter = "windDir";

      $.getJSON('data/' + php + '?station=' + jstation + '&paramtr=' + parameter + '&callback=?', function(data) {
        four_Options[l] = {
          name : name,
          data : data
        };

        // As we're loading the data asynchronously, we don't know what order it will arrive. So
        // we keep a counter and create the chart when all the data is loaded.
        four_Counter += 1;

        if (four_Counter === four_names.length) {
          four_Chart();
        }
      });
    });
  }

  function four_Chart() {
    var four_Chart = new Highcharts.Chart({
      chart : {
        spacingTop : 5,
        spacingBottom : 10,
        height : 190,
        renderTo : 'ffour_',
        defaultSeriesType : "scatter",
        backgroundColor : 'rgba(255, 255, 255, 0)',
        style : {
          fontFamily : '"Roboto",sans-serif',
          fontSize : '11px'
        }
      },
      colors : ['#4682B4'],
      credits : {
        enabled : false
      },
      title : {
        text : ''
      },
      legend : {
        borderWidth : 0,
        align : 'center',
        verticalAlign : 'top',
        rtl : true
      },
      yAxis : {
        min : 0,
        max : 360,
        tickInterval : 90,
        labels : {
          format : '{value}°',
          align : "right",
          x : -7,
          y : -5,
          style : yLabelsTemp
        },
        title : {
          text : null
        },
      },
      xAxis : {
        type : 'datetime'
      },
      plotOptions : {
        scatter : {
          marker : {
            radius : 1.5,
          },
          tooltip : {
            headerFormat : '<b>{point.key:%d %b %H:%M}</b><br>',
            pointFormat : 'Direzione: <b>{point.y}°</b>'
          }
        },
      },
      series : four_Options
    });

    l = 0;
    $.each(five_names, function(l, name) {
      if (name == "Pioggia") {
        parameter = "rain";
      }

      $.getJSON('data/' + php + '?station=' + jstation + '&paramtr=' + parameter + '&callback=?', function(data) {
        five_Options[l] = {
          name : name,
          data : data
        };
        // As we're loading the data asynchronously, we don't know what order it will arrive. So
        // we keep a counter and create the chart when all the data is loaded.
        five_Counter += 1;

        if (five_Counter === five_names.length) {
          maxrain = 0;
          $.each(five_Options[0].data, function(i) {
            if (five_Options[0].data[i][1] > maxrain)
              maxrain = five_Options[0].data[i][1];
            i++;
          });
          maxrain = Math.ceil(maxrain);
          if (maxrain == 0) {
            maxrain += 5
          };
          five_Chart();
        }
      });
    });
  }

  function five_Chart() {
    var five_Chart = new Highcharts.Chart({
      chart : {
        spacingTop : 5,
        spacingBottom : 10,
        height : 190,
        renderTo : 'ffive_',
        defaultSeriesType : "column",
        backgroundColor : 'rgba(255, 255, 255, 0)',
        style : {
          fontFamily : '"Roboto",sans-serif',
          fontSize : '11px'
        }
      },
      colors : ['#00BFFF'],
      credits : {
        enabled : false
      },
      title : {
        text : ''
      },
      legend : {
        borderWidth : 0,
        align : 'center',
        verticalAlign : 'top',
        rtl : true
      },
      yAxis : {
        lineWidth : 2,
        tickPixelInterval : 30,
        offset : 0,
        min : 0,
        max : maxrain,
        title : {
          text : "mm",
          rotation : 0,
          align : "high",
          offset : 0,
          x : -10,
          y : -20,
          style : yTitles
        },
        labels : {
          align : "right",
          x : -7,
          y : -5,
          style : yLabelsTemp
        }
      },
      xAxis : {
        type : 'datetime'
      },
      tooltip : {

        followTouchMove : false,
        backgroundColor : "#A2D959",
        borderColor : "#fff",
        borderRadius : 3,
        borderWidth : 0,
        shared : true,
        crosshairs : {
          width : 0.5,
          color : "#666"
        },
        style : {
          lineHeight : "16px",
          fontSize : "10px",
          color : "#000"
        },
        formatter : function() {
          var s = Highcharts.dateFormat(datformm, this.x);
          $.each(this.points, function(i, point) {
            var unit = {
            "Pioggia": " mm"
            }[point.series.name];
            if (point.series.name != " ") {
              s += "<br/>" + point.series.name + ": <b>" + point.y + unit + "</b>";
            }
          });
          return s;
        }
      },
      plotOptions : {
        column : {
          pointWidth : 10,
          borderWidth : 0.5
        }
      },
      series : five_Options,
    });

    l = 0;
    $.each(six_names, function(l, name) {
      if (name == "RainRate") {
        parameter = "rainRate";
      }

      $.getJSON('data/' + php + '?station=' + jstation + '&paramtr=' + parameter + '&callback=?', function(data) {
        six_Options[l] = {
          name : name,
          data : data
        };

        // As we're loading the data asynchronously, we don't know what order it will arrive. So
        // we keep a counter and create the chart when all the data is loaded.
        six_Counter += 1;

        if (six_Counter === six_names.length) {
          maxrainrate = 0;
          $.each(six_Options[0].data, function(i) {
            if (six_Options[0].data[i][1] > maxrainrate)
              maxrainrate = six_Options[0].data[i][1];
            i++;
          });
          maxrain = Math.ceil(maxrainrate);
          if (maxrainrate == 0) {
            maxrainrate += 5
          };
          six_Chart();
        }
      });
    });
  }

  function six_Chart() {
    var six_Chart = new Highcharts.Chart({
      chart : {
        spacingTop : 5,
        spacingBottom : 10,
        height : 190,
        renderTo : 'ssix_',
        defaultSeriesType : "scatter",
        backgroundColor : 'rgba(255, 255, 255, 0)',
        style : {
          fontFamily : '"Roboto",sans-serif',
          fontSize : '11px'
        }
      },
      colors : ['#A52A2A'],
      credits : {
        enabled : false
      },
      title : {
        text : ''
      },
      legend : {
        borderWidth : 0,
        align : 'center',
        verticalAlign : 'top',
        rtl : true
      },
      yAxis : {
        lineWidth : 2,
        tickPixelInterval : 30,
        offset : 0,
        min : 0,
        max : maxrainrate,
        title : {
          text : "mm/h",
          rotation : 0,
          align : "high",
          offset : 0,
          x : -10,
          y : -20,
          style : yTitles
        },
        labels : {
          align : "right",
          x : -7,
          y : -5,
          style : yLabelsTemp
        }
      },
      xAxis : {
        type : 'datetime'
      },
      plotOptions : {
        scatter : {
          marker : {
            radius : 1.5,
          },
          tooltip : {
            headerFormat : '<b>{point.key:%d %b %H:%M}</b><br>',
            pointFormat : 'Rate: <b>{point.y} mm/h</b>'
          }
        },
      },
      series : six_Options
    });

    l = 0;
    $.each(seven_names, function(l, name) {
      if (name == "Rad. globale") {
        parameter = "radiation";
      }
      if (name == "Rad.UV") {
        parameter = "UV";
      }

      $.getJSON('data/' + php + '?station=' + jstation + '&paramtr=' + parameter + '&callback=?', function(data) {
        seven_Options[l] = {
          name : name,
          data : data,
          yAxis : l
        };

        // As we're loading the data asynchronously, we don't know what order it will arrive. So
        // we keep a counter and create the chart when all the data is loaded.
        seven_Counter += 1;

        if (seven_Counter === seven_names.length) {
          if (seven_Counter == 2) {
            seven_Chart_bis();
          } else {
            if (seven_Options[0].name == "Rad. globale") {
              seven_Chart('#FFA500', 'W/m²', yLabelsSol);
            } else {
              seven_Chart('#640c64', 'idx', yLabelsUV);
            }

          }
        }
      });
    });
  }

  function seven_Chart(aa, bb, cc) {
    var seven_Chart = new Highcharts.Chart({
      chart : {
        spacingTop : 5,
        spacingBottom : 10,
        height : 190,
        renderTo : 'sseven_',
        defaultSeriesType : "spline",
        backgroundColor : 'rgba(255, 255, 255, 0)',
        style : {
          fontFamily : '"Roboto",sans-serif',
          fontSize : '11px'
        }
      },
      colors : [aa],
      credits : {
        enabled : false
      },
      title : {
        text : ''
      },
      legend : {
        borderWidth : 0,
        align : 'center',
        verticalAlign : 'top',
        rtl : true
      },
      yAxis : {
        lineWidth : 2,
        tickPixelInterval : 30,
        min : 0,
        offset : 0,
        title : {
          text : bb,
          rotation : 0,
          align : "high",
          offset : 0,
          x : -10,
          y : -20,
          style : yTitles
        },
        labels : {
          align : "right",
          x : -7,
          y : -5,
          style : cc
        }
      },
      xAxis : {
        type : 'datetime'
      },
      tooltip : {

        backgroundColor : "#A2D959",
        borderColor : "#fff",
        borderRadius : 3,
        borderWidth : 0,
        shared : true,
        crosshairs : {
          width : 0.5,
          color : "#666"
        },
        style : {
          lineHeight : "16px",
          fontSize : "10px",
          color : "#000"
        },
        formatter : function() {
          var s = Highcharts.dateFormat(datform, this.x);
          $.each(this.points, function(i, point) {
            var unit = {
            "Rad. globale": " W/m²",
            "Rad.UV": " index"
            }[point.series.name];
            if (point.series.name != " ") {
              s += "<br/>" + point.series.name + ": <b>" + point.y + unit + "</b>";
            }
          });
          return s;
        }
      },
      plotOptions : {
        series : {
          marker : {
            radius : 0,
            states : {
              hover : {
                enabled : true
              }
            }
          }
        },
        spline : {
          lineWidth : 1.5,
          shadow : false,
          cursor : "pointer",
          states : {
            hover : {
              enabled : false
            }
          }
        }
      },
      series : seven_Options
    });

    l = 0;
    $.each(eight_names, function(l, name) {
      if (name == "Evapotraspirazione") {
        parameter = "ET";
      }

      $.getJSON('data/' + php + '?station=' + jstation + '&paramtr=' + parameter + '&callback=?', function(data) {
        eight_Options[l] = {
          name : name,
          data : data
        };

        // As we're loading the data asynchronously, we don't know what order it will arrive. So
        // we keep a counter and create the chart when all the data is loaded.
        eight_Counter += 1;

        if (eight_Counter === eight_names.length) {
          eight_Chart();
        }
      });
    });
  }

  function seven_Chart_bis() {
    var seven_Chart = new Highcharts.Chart({
      chart : {
        spacingTop : 5,
        spacingBottom : 10,
        height : 190,
        renderTo : 'sseven_',
        defaultSeriesType : "spline",
        backgroundColor : 'rgba(255, 255, 255, 0)',
        style : {
          fontFamily : '"Roboto",sans-serif',
          fontSize : '11px'
        }
      },
      colors : ['#FFA500', '#640c64'],
      credits : {
        enabled : false
      },
      title : {
        text : ''
      },
      legend : {
        borderWidth : 0,
        align : 'center',
        verticalAlign : 'top',
        rtl : true
      },
      yAxis : [{
        tickPixelInterval : 30,
        min : 0,
        offset : 0,
        title : {
          text : "W/m²",
          rotation : 0,
          align : "high",
          offset : 0,
          x : 25,
          y : -20,
          style : yTitles
        },
        labels : {
          align : "left",
          x : 5,
          y : -5,
          style : yLabelsSol
        }
      }, {
        lineWidth : 2,
        tickPixelInterval : 30,
        min : 0,
        max : 12,
        offset : 0,
        title : {
          text : "idx",
          rotation : 0,
          align : "high",
          offset : 0,
          x : -10,
          y : -20,
          style : yTitles
        },
        labels : {
          align : "right",
          x : -7,
          y : -5,
          style : yLabelsUV
        }
      }],
      xAxis : {
        type : 'datetime'
      },
      tooltip : {

        backgroundColor : "#A2D959",
        borderColor : "#fff",
        borderRadius : 3,
        borderWidth : 0,
        shared : true,
        crosshairs : {
          width : 0.5,
          color : "#666"
        },
        style : {
          lineHeight : "16px",
          fontSize : "10px",
          color : "#000"
        },
        formatter : function() {
          var s = Highcharts.dateFormat(datform, this.x);
          $.each(this.points, function(i, point) {
            var unit = {
            "Rad. globale": " W/m²",
            "Rad.UV": " index"
            }[point.series.name];
            if (point.series.name != " ") {
              s += "<br/>" + point.series.name + ": <b>" + point.y + unit + "</b>";
            }
          });
          return s;
        }
      },
      plotOptions : {
        series : {
          marker : {
            radius : 0,
            states : {
              hover : {
                enabled : true
              }
            }
          }
        },
        spline : {
          lineWidth : 1.5,
          shadow : false,
          cursor : "pointer",
          states : {
            hover : {
              enabled : false
            }
          }
        }
      },
      series : seven_Options
    });

    l = 0;
    $.each(eight_names, function(l, name) {
      if (name == "Evapotraspirazione") {
        parameter = "ET";
      }

      $.getJSON('data/' + php + '?station=' + jstation + '&paramtr=' + parameter + '&callback=?', function(data) {
        eight_Options[l] = {
          name : name,
          data : data
        };

        // As we're loading the data asynchronously, we don't know what order it will arrive. So
        // we keep a counter and create the chart when all the data is loaded.
        eight_Counter += 1;

        if (eight_Counter === eight_names.length) {
          eight_Chart();
        }
      });
    });
  }

  function eight_Chart() {
    var eight_Chart = new Highcharts.Chart({
      chart : {
        spacingTop : 5,
        spacingBottom : 10,
        height : 190,
        renderTo : 'eeight_',
        defaultSeriesType : "column",
        backgroundColor : 'rgba(255, 255, 255, 0)',
        style : {
          fontFamily : '"Roboto",sans-serif',
          fontSize : '11px'
        }
      },
      colors : ['#00BFFF'],
      credits : {
        enabled : false
      },
      title : {
        text : ''
      },
      legend : {
        borderWidth : 0,
        align : 'center',
        verticalAlign : 'top',
        rtl : true
      },
      yAxis : {
        lineWidth : 2,
        tickPixelInterval : 30,
        offset : 0,
        min : 0,
        title : {
          text : "mm",
          rotation : 0,
          align : "high",
          offset : 0,
          x : -10,
          y : -20,
          style : yTitles
        },
        labels : {
          align : "right",
          x : -7,
          y : -5,
          style : yLabelsTemp
        }
      },
      xAxis : {
        type : 'datetime'
      },
      tooltip : {

        backgroundColor : "#A2D959",
        borderColor : "#fff",
        borderRadius : 3,
        borderWidth : 0,
        shared : true,
        crosshairs : {
          width : 0.5,
          color : "#666"
        },
        style : {
          lineHeight : "16px",
          fontSize : "10px",
          color : "#000"
        },
        formatter : function() {
          var s = Highcharts.dateFormat(datformm, this.x);
          $.each(this.points, function(i, point) {
            var unit = {
            "Evapotraspirazione": " mm"
            }[point.series.name];
            if (point.series.name != " ") {
              s += "<br/>" + point.series.name + ": <b>" + point.y + unit + "</b>";
            }
          });
          return s;
        }
      },
      plotOptions : {
        column : {
          pointWidth : 10,
          borderWidth : 0.5
        }
      },
      series : eight_Options
    });
  }
}