Faire une courbe depuis vos enregistrements


Pour cela nous allons utiliser le module Highcharts voir chapitre ici.


Les fichier seront installés dans le répertoire js.




Les données sont dans le fichier cpu.txt que nous avons créé dans le chapitre précédent. En voici la forme:


Temps;cpu;temp

5;0.0;50.8

10;50.0;51.4

15;1.0;50.8

20;0.0;50.8

25;47.9;50.8

30;1.0;50.8

35;0.0;50.8

40;52.6;51.9


Premier étape:


Création du fichier HTML avec les bons chemins:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>

       <head>

               <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

               <title>Courbes d'&eacute;tat de la CPU</title>

                       

               <!-- 1. Add these JavaScript inclusions in the head of your page -->

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

               <script type="text/javascript" src="./js/highcharts.js"></script>

               <script src="./js/modules/exporting.js"></script>

               <!--[if IE]>

                       <script type="text/javascript" src="./js/excanvas.compiled.js"></script>

               <![endif]-->


Deuxième étape:


Lecture des données et ajout dans la série:


               <!-- 2. Add the JavaScript to initialize the chart on document ready -->

               <script type="text/javascript">

               $(document).ready(function() {

                       

                       var options = {

                       credits: {

           text: 'CARON WEATHER STATION',

           href: 'http://www.caron.ws'

       },

                               chart: {

                                       renderTo: 'container',

                                       defaultSeriesType: 'spline'

                               },

                               title: {

                                       text: 'Courbes'

                               },

                               xAxis: {

                                       reversed: true,

                               title: {

                   enabled: true,

                   text: 'Temps'

               },

               labels: {

                               rotation: -45,

                               align: 'right',

                   formatter: function() {

                       return this.value +'mn';

                   }

               },

                               

                                       categories: []

                               },

                               yAxis: [{ // Primary yAxis

               labels: {

                   formatter: function() {

                       return this.value +'°C';

                   },

               },

               title: {

                   text: 'Témperature',

               },

               

   opposite: true

           },

       { // Secondary yAxis

               labels: {

                  formatter: function() {

                       return this.value +'%';

                   },

                                       },

               title: {

                   text: 'Charge CPU',

                   },


                   style: {

                       color: '#4572A7'

                   }

            }],        

                               series: []

                       };

                       

                       //lecture fichier de données format csv

                       

                        $.get('cpu.txt', function(data){

       // Split the lines

       var lines = data.split('\n');

       $.each(lines, function(lineNo, line)

       {

           var items = line.split(';');


           // header line containes series name

           if (lineNo == 0)

           {

               $.each(items, function(itemNo, item)

               {

                   if (itemNo > 0)

                   {

                       if(item == 'cpu')

                       {

                           options.series.push(

                           {

                               name:item,

                                                               

                               lineWidth: 5,

                                                               type: 'column',

                                                               yAxis: 1,

                                                               tooltip: {

                                                               

                                                                               valueSuffix: ' %'

                                                                               },

                               data:[]

                           });

                       }

                       else if(item == 'temp')

                       {

                           options.series.push(

                           {

                               name:item,

                                                               yAxis: 0,

                                                               tooltip: {

                                                                               valueSuffix: ' °C'

                                                                               },

                               data:[]

                           });

                       }

                                               else

                       {

                           options.series.push(

                           {

                               name:item,

                               data:[]

                           });

                       }

                   }

               });

           }

           // the rest of the lines contain data with their name in the first position

           else

           {

               $.each(items, function(itemNo, item)

               {

                   if(itemNo == 0)

                   {

                       options.xAxis.categories.push(item);

                   }

                   else if (item == "null")

                   {

                       options.series[itemNo-1].data.push(null);

                   }

                   else

                   {

                       options.series[itemNo-1].data.push(parseFloat(item));

                   }

               });

           }

       });


       //console.log(options.series);

       var chart = new Highcharts.Chart(options);

       });

   });


Voici le code source Ici


Je sais que le code n'est pas trop expliqué mais j'y reviendrai quand j'aurai un peu de temps.


Voici le résultat Ici


Mise à jour 11/04/2013


Créé avec HelpNDoc Personal Edition: Éditeur de documentation CHM facile