Chartjs - Chart going only 1 time

Asked

Viewed 112 times

0

Only 1 graph is appearing, even if I repeat the code. Only 1 graph appears. What to do?!
inserir a descrição da imagem aqui

*{
    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>

javascript html5 css3

2 answers

0


You are using Graficodonut as the ID of all the canvas 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..

Additionally, you are setting the window.onload. With jQuery you can set $(Function() as many times as you want and this can lead to the error of doing the same without the framework, but the "raw" Javascript window.onload, if set again, the previous action is removed (and in fact, what jQuery does is put the steels in a row, but it also arrow the window.onload once).

However, window.onload in your case is unnecessary, since your Javascript code is located after the elements it works with. I removed the lines with window.onload and it worked: https://codepen.io/anon/pen/MvWKpL

  • Again, thank you Jefrey! For responding here and in the group! haha

0

The canvas is with the same id to host different charts. Each chart should be unique; it could be done so:

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

And change the javascript startup.

  • I put the 2 at the end of the "Graficodonut" of the second graphic but it has not changed at all. How to change the startup in Javascript?! I am a layman in js

  • Hi @Alexandreamado var ctx = document.getElementById("GraficoDonut"), put the id referring to the graph that is generating.

  • I put and it just " migrated " to the graph on the side, went down the LINE A and went down the LINE B.

  • var ctx = Document.getElementById("Graficodonut2"). getcontext("2d");

  • You’re generating two graphs, aren’t you? In each JS block that generates each graph you should put the corresponding canvas id and not simply invert.

  • No. It’s generating only one, same as the image above. Only instead of him creating another chart, next to LINE A. He left LINE A and went to the bottom of LINE B and LINE A was without the chart.

  • I changed the ID up there and the ID of Document.getElementById to differentiate from LINE A, but he only did that that I said up, jumped to the side.

Show 2 more comments

Browser other questions tagged javascript html5 css3

You are not signed in. Login or sign up in order to post.