Ciao a tutti,

Ho un problema con Javascript. In sostanza io ho trovato questo sito dove da la possibilità di creare grafici in maniera molto molto semplice! Però purtoppo non riesco a mettere più grafici diversi uno sotto l'altro perché mi vede solo il primo grafico e non capisco come mai...
Per cercare di spiegarmi il meglio possibile vi metto il codice della pagina che sto cercando di creare:

codice:
			<section class="ac-container">
				<div>
					<input id="ac-1" name="accordion-1" type="checkbox" checked />
					<label for="ac-1">Intestazione</label>
					<article class="ac-info">
						

Testo intestazione</p>							
					</article>
				</div>
				<div>
					<input id="ac-2" name="accordion-1" type="checkbox" />
					<label for="ac-2">Grafici</label>
					<article id="do" class="ac-ms">


Grafico numero uno</p>
<canvas id="uno" height="100" width="400"></canvas>
<script>
var lineChartData = {
labels : ["13.00 AM","13.01 AM","13.02 AM","13.03 AM","13.04 AM","13.05 AM","13.06 AM","13.07 AM","13.08 AM","13.09 AM","13.10 AM"],
datasets : [
{
fillColor : "rgba(151,187,205,0.5)",
strokeColor : "rgba(151,187,205,1)",
pointColor : "rgba(151,187,205,1)",
pointStrokeColor : "#fff",
data : [0,0,0,1,0,1,1,0,0,0,1]
}
]
}
var myLine = new Chart(document.getElementById("canvas").getContext("2d")).Line(lineChartData);
</script>



Grafico numero due</p>
<canvas id="due" height="100" width="400"></canvas>
<script>
var lineChartData = {
labels : ["13.00 AM","13.01 AM","13.02 AM","13.03 AM","13.04 AM","13.05 AM","13.06 AM","13.07 AM","13.08 AM","13.09 AM","13.10 AM"],
datasets : [
{
fillColor : "rgba(151,187,205,0.5)",
strokeColor : "rgba(151,187,205,1)",
pointColor : "rgba(151,187,205,1)",
pointStrokeColor : "#fff",
data : [0,0,0,1,0,1,1,0,0,0,1]
}
]
}
var myLine = new Chart(document.getElementById("canvas").getContext("2d")).Line(lineChartData);
</script>



Grafico numero tre</p>
<canvas id="tre" height="100" width="400"></canvas>
<script>
var lineChartData = {
labels : ["13.00 AM","13.01 AM","13.02 AM","13.03 AM","13.04 AM","13.05 AM","13.06 AM","13.07 AM","13.08 AM","13.09 AM","13.10 AM"],
datasets : [
{
fillColor : "rgba(151,187,205,0.5)",
strokeColor : "rgba(151,187,205,1)",
pointColor : "rgba(151,187,205,1)",
pointStrokeColor : "#fff",
data : [0,0,0,1,0,1,1,0,0,0,1]
}
]
}
var myLine = new Chart(document.getElementById("canvas").getContext("2d")).Line(lineChartData);
</script>
					</article>
				</div>
				<div>
					<input id="ac-3" name="accordion-1" type="checkbox" />
					<label for="ac-3">Secondo Paragrafo</label>
					<article id="do" class="ac-ms">
					

Testo</p>
					</article>
				</div>
				<div>
					<input id="ac-4" name="accordion-1" type="checkbox" />
					<label for="ac-4">Terzo Paragrafo</label>
					<article id="do" class="ac-ms">
					

Testo</p>
					</article>
				</div>
			</section>
        </div>
I tre grafici sono assolutamente identici, cambierebbero poi solo i dati, però il primo lo vede correttamente, il secondo e il terzo non si vedono! Si vede solo la scritta "Grafico numero due" e "Grafico numero tre", tra queste due scritte c'è poi 'del vuoto' nel mezzo che aumenta o diminuisce a seconda di quanto faccia grosso il grafico!
Io è tutta la mattina che provo a capire qual'è il problema...

Grazie mille :)