Display two (or more) in one spline chart?

Question

I'm a newbie in Highcharts, and basically in developpement and coding... I spent now about one week to adapt some examples that I found on the web to make a standard chart that would display two series of data in one spline chart.

I managed to modify samples that I found in the web to make my chart working with one single serie, but as soon as I try to draw a second serie it does not work... Definitively, I did not understant the way it works... I'm pretty sure this is not so difficult, as my chart is really basic, but I really donnot know how to do it !

So let's begin with my situation...

1. I have done a file called "data3.php" that connects to a mysql database and returns 3 columns of data : the date, then 2 different temperatures (that I want to display). Basically, the data3.php seems to work correctely as the result seems correct (you can check it here : http://www.airone.ch/etienne/graph/high/data3.php) It returns all the datas for the current day, for each 10 minutes in the following format :

   Monday, October 28, 2013 00:00:00 14.0 32.7

Here is my code for generating the data3.php finle :

<?php

$con = mysql_connect("localhost","username","password");


if (!$con) {
  die('Could not connect: ' . mysql_error());
}

mysql_select_db("database", $con);
$result = mysql_query("SELECT *
FROM pouleto
WHERE (
date( id ) = curdate( )
)
AND extract(
MINUTE FROM `id` )
IN ( 0, 10,20, 30, 40, 50 );");


while($row = mysql_fetch_array($result)) {
$uts=strtotime($row['id']); //convertir a Unix Timestamp
  $date=date("l, F j, Y H:i:s",$uts);
  //  echo $valor3 . "\t" . $row['Temperature sensor 1']. "\n";
echo $date . "\t" . $row['Temperature sensor 1']. "\t" . $row['Temperature sensor 3']. "\n";

}


/*
 while($row = mysql_fetch_array($result)) {
   echo $row['id'] . "\t" . $row['Temperature sensor 1']. "\n";
}
*/
mysql_close($con);

?>

let's assume that this part is working correctely as the data returned is what I need to draw in my graph...

1. I have now a file called "index2.php" that is used to display the chart (visible here : http://www.airone.ch/etienne/graph/high/index2.php). I managed to modify the code I found to make it work with the "data3.php", but my problem is that it only display the first temperature and not dhe second. In other owrds, how can I modify my index2.php to make it draw the two lines, or basically even more (I plan to draw up to 6 different temperatures) ??? Here is my index2.php code :

   Using Highcharts with PHP and MySQL

   var chart; $(document).ready(function() { var options = { chart: { renderTo: 'container', defaultSeriesType: 'spline', marginRight: 130, marginBottom: 25 }, title: { text: 'Temperature du capteur', x: -20 //center }, subtitle: { text: '', x: -20 }, xAxis: { type: 'datetime', tickInterval: 3600 * 1000, // one hour tickWidth: 0, gridLineWidth: 1, labels: { align: 'center', x: -3, y: 20, formatter: function() { return Highcharts.dateFormat('%H', this.value); } } }, yAxis: { title: { text: 'Degres' },

                   },
                   tooltip: {
                       formatter: function() {
                         return Highcharts.dateFormat('%H:%M', this.x-(1000*3600)) +' - <b>'+ this.y + ' degres</b>';
                       }
                   },
                   legend: {
                       layout: 'vertical',
                       align: 'right',
                       verticalAlign: 'top',
                       x: -10,
                       y: 100,
                       borderWidth: 0
                   },
                   series: [{
                       name: 'Degres',
                   shadow : true,
               tooltip : {
                            valueDecimals : 2}
                   }]
               }
               // Load data asynchronously using jQuery. On success, add the data
               // to the options and initiate the chart.
               // This data is obtained by exporting a GA custom report to TSV.
               // http://api.jquery.com/jQuery.get/
               jQuery.get('data3.php', null, function(tsv) {
                   var lines = [];
                   traffic = [];
                   try {
                       // split the data return into lines and parse them
                       tsv = tsv.split(/\n/g);
                       jQuery.each(tsv, function(i, line) {
                           line = line.split(/\t/);
                           date = Date.parse(line[0] +' UTC');
                           traffic.push([
                               date,
                               parseInt(line[1].replace(',', ''), 10)
                           ]);
                       });
                   } catch (e) {  }
                   options.series[0].data = traffic;
                   chart = new Highcharts.Chart(options);
               });
           });
   

So now... does someone could help me to make my chart work with more that one serie ????

Thanks in advance, I muss say I'm a little bit loss in all this...

Regards and bravo for having read everything :-)

Answer 1

To add second line:

series: [{
  name: 'Degres',
  shadow: true,
  tooltip: {
      valueDecimals: 2
  }
}, {
  name: 'Second value',
  shadow: true,
  tooltip: {
      valueDecimals: 2
  }
}]

Then define more series data:

var lines = [],
    traffic = [], 
    secondSeries = [];

Add points:

traffic.push([
  date,
  parseInt(line[1].replace(',', ''), 10)
]);
secondSeries.push([
  date,
  parseInt(line[2].replace(',', ''), 10)
]);

And last thing, add data to options:

options.series[0].data = traffic;
options.series[1].data = secondSeries;