jQuery Flot dans jQuery Steps

Bonjour à tous,

Voila tâtonne dans le développement web car je suis plutôt développeur C/C++, j'ai pour un produit compiler un serveur http simple nommé Mongoose, qui me permettrai d'avoir une interface simple et efficace avec le périphérique.

Des exemples sont fournis avec Mongoose, j'y ai rajouté la librairie JQuery Steps pour avoir un système d'onglet. Les onglets marche correctement mais je ne vois pas mon graphe introduit dans l'onglet, alors que en déplacement le graphe en dehors de l'onglet cela fonctionne. Sûrement d'après ce que j'ai compris une erreur dans les CSS.

Pour être plus claire voici la page HTML :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <title>Connected device demo</title>
  <meta name="viewport" content="width=device-width, initial-scale=1" />
 
  <link rel="stylesheet" type="text/css" href="CSS/style.css">
  <link rel="stylesheet" href="CSS/jquery.steps.css">
  <link rel="stylesheet" href="CSS/main.css">
  <link rel="stylesheet" href="CSS/normalize.css">
 
  <script type="text/javascript" src="JS/jquery-1.11.3.min.js"></script>
  <script src="JS/jquery.flot.min.js"></script>
  <script src="JS/jquery.flot.time.js"></script>
  <script src="JS/modernizr-2.6.2.min.js"></script>
  <script src="JS/jquery.cookie-1.3.1.js"></script>
  <script src="JS/jquery.steps.js"></script>
  <script type="text/javascript" src="JS/main.js"></script>
  <script src="JS/jquery.steps.js"></script>
 
</head>
 
<body>
  <div class="content">
    <img src="logo.png" style="float:right; height: 50px; border-radius: 3px;">
    <h1>Connected device demo - Websocket push</h1>
 
    <p>
      This page is one of the series of examples that show how to make
      devices connected with Mongoose. Here we add a real-time Websocket
      server push, and update dashboard graph as data arrives.
    </p>
 
    <h1>Settings section</h1>
 
	<script>
                $(function ()
                {
                    $("#example-basic").steps({
                        headerTag: "h3",
                        bodyTag: "section",
                        transitionEffect: "slideLeft",
                                                enableFinishButton: false, 
                                                enablePagination: false,
                                                enableAllSteps: true, 
                                                titleTemplate: "#title#" 
                    });
                });
            </script>
 
 
    <div id="example-basic">
	  <h3>CPU usage</h3>
 	    <section>
		  <h1>Dashboard section</h1>
    	  <label>CPU usage:</label> <span id="cpu_usage">&nbsp;</span>
    	  <div id="graphs"></div>  
	    </section>
	  <h3>Settings</h3>
	    <section>
			<form method="POST" action="/save">
      	     <fieldset>
        	  <legend>Device settings</legend>
        	  <label>Setting 1:</label> <input type="text"
          		name="setting1" value="<!--#call setting1 -->" >
              <label>Setting 2:</label> <input type="text"
          		name="setting2" value="<!--#call setting2 -->" >
 
        	  <div>
          		<button type="submit">Save Settings</button>
        	  </div>
      		</fieldset>
    		</form>
		</section>
	</div>
</div>
</body>
</html>

Voila déjà dans un premier temps peu être, si vous pouviez peu-être m'indiquer ou chercher ou voir même si cela est possible.

Merci par avance.

William