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!