Actualisation automatique d'un graphique

fkeloks
Javascript

Bonjour tout le monde,

Voila je rencontre un petit problème avec mon code.

Ce que je fais

Je développe un site sous bootstrap.
J'utilise ceci pour gerer mon graphique. 

<script src="http://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script>
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://cdn.oesmith.co.uk/morris-0.4.1.min.js"></script>

Voici le code de mon graphique

<div class="row">
                <div class="col-lg-8"">
                    <div class="panel panel-primary">
                        <div class="panel-heading">
                            <i class="fa fa-bar-chart-o fa-fw"></i> Ma consommation électrique :
                        </div>
                        <!-- /.panel-heading -->

                        <div class="panel-body">
                            <div id="conso_50" style="width: auto;"></div>    <!--Affichage du graphique. Gestion de celui-ci ci-dessous-->
                            <script language="javascript" type="text/javascript"> //Virgule entre chaques lignes sauf la dernière.
                                Morris.Line({
                                    element: 'conso_50',
                                    data: [
                                        <?php
                                        $virgule = False;
                                        $bob = $bdd->query("SELECT * FROM logs ORDER BY id DESC LIMIT 50"); //Je prépare la requete Sql
                                        while ($donnees = $bob->fetch()) //J'affiche une ligne tant qu'il en trouve dans la table
                                        {
                                            if($virgule == True) {
                                                echo(",");
                                            }
                                            $virgule = True;
                                            echo("{ x: '" . $donnees['date_sql'] ."', y: " . $donnees['p_conso'] . ", s: 100}");
                                        }
                                        ?>
                                    ],
                                    xkey: 'x',
                                    smooth: 'false',
                                    xLabels: "30sec",
                                    ykeys: ['y', 's'],
                                    labels: ['Energie consommée (en kW) ', 'puissance_souscrite (en kW) '],
                                });
                            </script>
                        </div>
                        <!-- /.panel-body -->
                    </div>
                    <!-- /.panel -->
                </div>
                <!-- /.col-lg-8 -->
 </div>

Ce que je souhaite

Je souhaite actualiser (probablement avec ajax) juste cette div row et non toute la page comme je le fait actuellement avec la vielle meta :p

Information : Je n'ai aucunes connaissances en jajascript mais j'ai absolument besoin d'un tel code pour améliorer mon site web.

Aucune réponse