Display two (or more) in one spline chart?

 

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...

  • 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...

  • 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 :-)

    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;
    链接地址: http://www.djcxy.com/p/31006.html

    上一篇: DevExtreme图表高度和不透明度问题

    下一篇: 在一个样条图中显示两个（或更多）？