ChartJS - Graph going only once

Navigation
0

Only 1 chart is appearing, even repeating the code. Only 1 chart appears. What to do ?! | 

*{
    font-family: Oswald;
}

.box {
    margin-left: -110px;
    width: 170%;
}

.box-chart {
    width: 100%;
    margin: 0 auto;
}

body{
  background-color: #363636;
}

.painel-principal {
  width: 100%;
  height: 910px;
  border: 1px solid #FDCA2E;
  display: inline-flex;
  font-family: Oswald;
  border-radius: 5px;
  -webkit-border-radius: 5px;
	-moz-border-radius: 5px;
}
.linhaS {
  width: 300px;
  height: 880px;
  border: 1px solid red;
  margin: 5px 5px 5px 5px;
  margin-top: 15px;
  margin-left: 8px;
  border-radius: 5px;
  -webkit-border-radius: 5px;
	-moz-border-radius: 5px;
}

.cabecalho-topo p {
  width: 100%;
  background: #FDCA2E;
  color: #000000;
  border: 1px solid #000000;
  text-align: center;
  font-family: Oswald;
  font-size: 30px;
  border-radius: 5px;
  -webkit-border-radius: 5px;
	-moz-border-radius: 5px;
  margin-bottom: 10px;
  margin-top: 5px;
}
.cabecalho-inferior p {
  width: 100%;
  background: #D3D3D3;
  color: #000000;
  border: 1px solid #D3D3D3;
  text-align: center;
  font-family: Oswald;
  font-size: 30px;
  border-radius: 5px;
  -webkit-border-radius: 5px;
	-moz-border-radius: 5px;
  margin-top: 5px;
}

.cabecalho-inferior-whs p {
  width: 100%;
  /*margin-bottom: 5px;*/
  background: #FDCA2E;
  color: #000000;
  border: 1px solid #000000;
  text-align: center;
  font-family: Oswald;
  font-size: 30px;
  border-radius: 5px;
  -webkit-border-radius: 5px;
	-moz-border-radius: 5px;
}
/*.desenvolvido p{
  font-family: Oswald;
  font-size: 20px;
  color: #D3D3D3;
  text-align: center;
  margin-top: 15px;
}*/
/*------------------------------*\
    Grid System
\*------------------------------*/

.linha{
    box-sizing: border-box;
}

.linha:before,
.linha:after {
    content: " ";
    display: table;
}

.linha:after {
    clear: both;
}

.linha {
    margin-top: 10px;
}

.linha:last-child {
    margin-bottom: 0;
}

.inicio .row{
  display: inline-block;
  vertical-align: top;
  min-height: 1px;
  padding-left: 5px;
  padding-right: 5px;
  width: 272px;
  margin-left: 7px;
  *zoom: 1;
  *display: inline;
  border: 1px solid #FF0000;
  background-color: #FF0000;
  color: #FFFFFF;
  margin-top: 5px;
  font-size: 30px;
  text-align: center;
}
.inicio .oee{
  width: 282px;
  margin-left: 7px;
  border: 1px solid #FDCA2E;
  background-color: #FDCA2E;
  color: #000000;
  font-size: 25px;
  text-align: center;
}
.inicio .porcentagem{
  margin-top: 5px;
  width: 284px;
  margin-left: 5px;
  border: 1px solid #FFFFFF;
  background-color: #FFFFFF;
  color: #000000;
  border-radius: 5px;
  font-size: 40px;
  text-align: center;
}
.controle .column{
  width: 29.4333%;
  background: #FDCA2E;
  border: 1px solid #FDCA2E;
  color: #000000;
  margin: 5px;
  padding: 5px;
  min-height: 30px;
  font-size: 20px;
  text-align: center;
  border-radius: 4px;
  position: relative;
  float: left;
  display: block;
  box-sizing: border-box;
}
.controle-2 .perc{
  width: 29.4333%;
  background: #FFFFFF;
  border: 1px solid #FFFFFF;
  color: #000000;
  margin: 5px;
  padding: 5px;
  min-height: 30px;
  font-size: 30px;
  text-align: center;
  border-radius: 4px;
  position: relative;
  float: left;
  display: block;
  box-sizing: border-box;
}
.controle-3 .rate{
  width: 55%;
  background: #FDCA2E;
  border: 1px solid #FDCA2E;
  color: #000000;
  margin: 5px;
  padding: 5px;
  min-height: 30px;
  font-size: 20px;
  text-align: center;
  border-radius: 4px;
  position: relative;
  float: left;
  display: block;
  box-sizing: border-box;
}
.controle-3 .head{
  width: 36.5333%;
  background: #FDCA2E;
  border: 1px solid #FDCA2E;
  color: #000000;
  margin: 5px;
  padding: 5px;
  min-height: 30px;
  font-size: 20px;
  text-align: center;
  border-radius: 4px;
  position: relative;
  float: left;
  display: block;
  box-sizing: border-box;
}
.controle-4{
  width: 55%;
  background: #FFFFFF;
  border: 1px solid #FFFFFF;
  color: #000000;
  margin: 5px;
  padding: 5px;
  min-height: 30px;
  font-size: 20px;
  text-align: left;
  border-radius: 4px;
  position: relative;
  float: left;
  display: block;
  box-sizing: border-box;
}
.controle-5{
  width: 36.5333%;
  background: #FFFFFF;
  border: 1px solid #FFFFFF;
  color: #000000;
  margin: 5px;
  padding: 5px;
  min-height: 30px;
  font-size: 20px;
  text-align: center;
  border-radius: 4px;
  position: relative;
  float: left;
  display: block;
  box-sizing: border-box;
}
.prod .prods{
  width: 95%;
  background: #D3D3D3;
  border: 1px solid #D3D3D3;
  color: #000000;
  margin: 5px;
  min-height: 30px;
  font-size: 20px;
  text-align: center;
  border-radius: 4px;
  position: relative;
  float: left;
  display: block;
  box-sizing: border-box;
}
.grafico .plaxpro{
  width: 95%;
  background: #FDCA2E;
  border: 1px solid #FDCA2E;
  color: #000000;
  font-size: 20px;
  margin: 5px;
  min-height: 30px;
  font-size: 25px;
  text-align: center;
  border-radius: 4px;
  position: relative;
  float: left;
  display: block;
  box-sizing: border-box;
}
.perc-plaxpro{
  width: 95%;
  background: #D3D3D3;
  border: 1px solid #D3D3D3;
  color: #000000;
  font-size: 20px;
  margin: 5px;
  margin-bottom: 50px;
  min-height: 30px;
  font-size: 25px;
  text-align: center;
  border-radius: 4px;
  position: relative;
  float: left;
  display: block;
  box-sizing: border-box;
}
<!doctype html>
<html lang="pt" class="no-js">

<head>
	<meta charset="UTF-8" />
	<title>DASHBOARD OEE - v1</title>

	<meta name="viewport" content="width=device-width, initial-scale=1.0">

	<link rel="icon" href="css/imagens/dhl_icon.ico" type="image/x-icon" />
	<link href='https://fonts.googleapis.com/css?family=Oswald:400,300,700' rel='stylesheet' type='text/css'>
	<link href="css/style.css" rel="stylesheet">

	<script src="js/Chart.min.js"></script>

	<script type="text/javascript">
			var randomnb = function(){ return Math.round(Math.random()*300)};
	</script>

</head>

<body>
<div class="cabecalho-topo">
  <p>OEE DASHBOARD</p>
</div>

<div class="painel-principal">

  <div class="linhaS"><!-- /PAINEL DA LINHA A -->

					<div class="inicio">
		    		<div class="row">LINHA A</div>
				    <div class="oee">OEE</div>
						<div class="porcentagem">0%</div>
					</div>

						<div class="controle">
								<div class="column">DESEMP.</div>
								<div class="column">DISPONIB.</div>
								<div class="column">QUALID.</div>
					  </div>

						<div class="controle-2">
							<div class="perc">0%</div>
							<div class="perc">0%</div>
							<div class="perc">0%</div>
						</div>

						<div class="controle-3">
							<div class="rate">RATE</div>
							<div class="head">HEAD</div>
						</div>

						<div class="controle-4">
							<div class="meta">Meta(cx/h): </div>
							<div class="real">Real(cx/h): </div>
						</div>

						<div class="controle-5">
							<div>0</div>
							<div>0</div>
						</div>

						<div class="prod">
							<div class="prods">(Nome do produto)</div>
						</div>

						<div class="grafico">
							<div class="plaxpro">Planejado x Produzido</div>
						</div>

						<div class="perc-plaxpro">
							<div>0%</div>
						</div>

						<div class="box">

				        <div class="box-chart">

				            <canvas id="GraficoDonut" style="width:100%;"></canvas>

				            <script type="text/javascript">

				                var options = {
				                    responsive:true
				                };

				                var data = [
				                    {
				                        value: randomnb(),
				                        color:"#F7464A",
				                        highlight: "#FF5A5E",
				                        label: "Planejado"
				                    },
				                    {
				                        value: randomnb(),
				                        color: "#FDCA2E",
				                        highlight: "#5AD3D1",
				                        label: "Produzido"
				                    }
				                ]

				                window.onload = function(){

				                    var ctx = document.getElementById("GraficoDonut").getContext("2d");
				                    var PizzaChart = new Chart(ctx).Doughnut(data, options);
				                }
				            </script>

				        </div>

				    </div>
  </div><!-- / FIM DO PAINEL DA LINHA A -->

	<div class="linhaS"><!-- /PAINEL DA LINHA B -->

					<div class="inicio">
						<div class="row">LINHA B</div>
						<div class="oee">OEE</div>
						<div class="porcentagem">0%</div>
					</div>

						<div class="controle">
								<div class="column">DESEMP.</div>
								<div class="column">DISPONIB.</div>
								<div class="column">QUALID.</div>
						</div>

						<div class="controle-2">
							<div class="perc">0%</div>
							<div class="perc">0%</div>
							<div class="perc">0%</div>
						</div>

						<div class="controle-3">
							<div class="rate">RATE</div>
							<div class="head">HEAD</div>
						</div>

						<div class="controle-4">
							<div class="meta">Meta(cx/h): </div>
							<div class="real">Real(cx/h): </div>
						</div>

						<div class="controle-5">
							<div>0</div>
							<div>0</div>
						</div>

						<div class="prod">
							<div class="prods">(Nome do produto)</div>
						</div>

						<div class="grafico">
							<div class="plaxpro">Planejado x Produzido</div>
						</div>

						<div class="perc-plaxpro">
							<div>0%</div>
						</div>

						<div class="box">
				        <div class="box-chart">
				            <canvas id="GraficoDonut" style="width:100%;"></canvas>
				            <script type="text/javascript">

				                var options = {
				                    responsive:true
				                };

				                var data = [
				                    {
				                        value: randomnb(),
				                        color:"#F7464A",
				                        highlight: "#FF5A5E",
				                        label: "Planejado"
				                    },
				                    {
				                        value: randomnb(),
				                        color: "#FDCA2E",
				                        highlight: "#5AD3D1",
				                        label: "Produzido"
				                    }
				                ]

				                window.onload = function(){

				                    var ctx = document.getElementById("GraficoDonut").getContext("2d");
				                    var PizzaChart = new Chart(ctx).Doughnut(data, options);
				                }
				            </script>
				        </div>

				    </div>
	</div><!-- / FIM DO PAINEL DA LINHA B -->

	<div class="linhaS"><!-- /PAINEL DA LINHA C -->

					<div class="inicio">
		    		<div class="row">LINHA C</div>
				    <div class="oee">OEE</div>
						<div class="porcentagem">0%</div>
					</div>

						<div class="controle">
								<div class="column">DESEMP.</div>
								<div class="column">DISPONIB.</div>
								<div class="column">QUALID.</div>
					  </div>

						<div class="controle-2">
							<div class="perc">0%</div>
							<div class="perc">0%</div>
							<div class="perc">0%</div>
						</div>

						<div class="controle-3">
							<div class="rate">RATE</div>
							<div class="head">HEAD</div>
						</div>

						<div class="controle-4">
							<div class="meta">Meta(cx/h): </div>
							<div class="real">Real(cx/h): </div>
						</div>

						<div class="controle-5">
							<div>0</div>
							<div>0</div>
						</div>

						<div class="prod">
							<div class="prods">(Nome do produto)</div>
						</div>

						<div class="grafico">
							<div class="plaxpro">Planejado x Produzido</div>
						</div>
  </div><!-- / FIM DO PAINEL DA LINHA C -->

	<div class="linhaS"><!-- /PAINEL DA  LINHA D -->

					<div class="inicio">
		    		<div class="row">LINHA D</div>
				    <div class="oee">OEE</div>
						<div class="porcentagem">0%</div>
					</div>

						<div class="controle">
								<div class="column">DESEMP.</div>
								<div class="column">DISPONIB.</div>
								<div class="column">QUALID.</div>
					  </div>

						<div class="controle-2">
							<div class="perc">0%</div>
							<div class="perc">0%</div>
							<div class="perc">0%</div>
						</div>

						<div class="controle-3">
							<div class="rate">RATE</div>
							<div class="head">HEAD</div>
						</div>

						<div class="controle-4">
							<div class="meta">Meta(cx/h): </div>
							<div class="real">Real(cx/h): </div>
						</div>

						<div class="controle-5">
							<div>0</div>
							<div>0</div>
						</div>

						<div class="prod">
							<div class="prods">(Nome do produto)</div>
						</div>

						<div class="grafico">
							<div class="plaxpro">Planejado x Produzido</div>
						</div>
  </div><!-- / FIM DO PAINEL DA LINHA D -->

	<div class="linhaS"><!-- /PAINEL DA LINHA E -->

					<div class="inicio">
		    		<div class="row">LINHA E</div>
				    <div class="oee">OEE</div>
						<div class="porcentagem">0%</div>
					</div>

						<div class="controle">
								<div class="column">DESEMP.</div>
								<div class="column">DISPONIB.</div>
								<div class="column">QUALID.</div>
					  </div>

						<div class="controle-2">
							<div class="perc">0%</div>
							<div class="perc">0%</div>
							<div class="perc">0%</div>
						</div>

						<div class="controle-3">
							<div class="rate">RATE</div>
							<div class="head">HEAD</div>
						</div>

						<div class="controle-4">
							<div class="meta">Meta(cx/h): </div>
							<div class="real">Real(cx/h): </div>
						</div>

						<div class="controle-5">
							<div>0</div>
							<div>0</div>
						</div>

						<div class="prod">
							<div class="prods">(Nome do produto)</div>
						</div>

						<div class="grafico">
							<div class="plaxpro">Planejado x Produzido</div>
						</div>
  </div><!-- / FIM DO PAINEL DA LINHA E -->

</div><!-- /FIM DO PAINEL PRINCIPAL -->

<div class="cabecalho-inferior">
	<p><marquee>Planejado(Turno): &emsp; null  &emsp; Realizado(turno): &emsp; null  &emsp; %Total: &emsp; null</marquee></p>
</div>

<div class="cabecalho-inferior-whs">
	<p>WHS DASHBOARD</p>
</div>

<!-- <div class="desenvolvido">
	<p> &copy; Alexandre Amado </p>
</div> -->

</body>
</html>
    
asked by anonymous 21.07.2017 / 17:54

2 answers

0

You are using GraficoDonut as the ID of all the canvases that will receive the graphics. ID, as the name says, is to identify the element on the page and needs to be unique. Try to put GraficoDonut1, GraficoDonut2 ..

In addition, you are setting the window.onload twice. With jQuery you can set the $ (function () as many times as you like and this can lead us to the error of doing the same without the framework, but the Javascript "raw" window.onload, if set again, the previous action is removed (and in fact, what jQuery does is put the actions in a row, but it also directs the window.onload only once).

However, window.onload in your case is unnecessary, given that your Javascript code is located after the elements with which it works. I removed the lines with window.onload and it worked: link

    
23.07.2017 / 23:59
0

The canvas has the same id to host different graphics. Each chart must be unique; could be done like this: 

<canvas id="GraficoDonut1">
...
<canvas id="GraficoDonut2">
...

And change the initialization in javascript.

    
21.07.2017 / 17:59
Responsive HTML image Obtaining an Apple Auth Key APN