Change the size of a chart with JS

Question

Change the size of a chart with JS

Navigation

#1 by (2 votes)
#2 by (2 votes)

3

I have the following chart:

window.onload = function() {
  var can = document.getElementById('canvas'),
      spanProcent = document.getElementById('procent'),
       c = can.getContext('2d');
 
  var posX = can.width / 2,
      posY = can.height / 2,
      fps = 1000 / 200,
      procent = 0,
      oneProcent = 360 / 100,
      result = oneProcent * 64;
  
  c.lineCap = 'round';
  arcMove();
  
  function arcMove(){
    var deegres = 0;
    var acrInterval = setInterval (function() {
      deegres += 1;
      c.clearRect( 0, 0, can.width, can.height );
      procent = deegres / oneProcent;

      spanProcent.innerHTML = procent.toFixed();

      c.beginPath();
      c.arc( posX, posY, 70, (Math.PI/180) * 270, (Math.PI/180) * (270 + 360) );
      c.strokeStyle = '#b1b1b1';
      c.lineWidth = '6';
      c.stroke();

      c.beginPath();
      c.strokeStyle = '#3949AB';
      c.lineWidth = '10';
      c.arc( posX, posY, 70, (Math.PI/180) * 270, (Math.PI/180) * (270 + deegres) );
      c.stroke();
      if( deegres >= result ) clearInterval(acrInterval);
    }, fps);
    
  }
  
  
}

:root {
  background: #fff;
}

span#procent {
  display: block;
  position: absolute;
  left: 50%;
  top: 50%;
  font-size: 30px;
  transform: translate(-50%, -50%);
  color: #3949AB;
}

span#procent::after {
  content: '%';
}

.canvas-wrap {
  position: relative;
  width: 300px;
  height: 300px;
}

<div class="canvas-wrap">
  <canvas id="canvas" width="300" height="300"></canvas>
  <span id="procent"></span>
</div>

When trying to decrease the size of the width and heigth to 100px, for example, only the tips inside the square appear, how do I decrease the circumference of that graph?

javascript html css

asked by anonymous 04.01.2019 / 01:37

2 answers

2

Another quick option if you want to decrease the graph as a whole, width of lines etc. (minus text!) just use transform:scale() in canvas .

scale() works like this, the original value is (1) , if you want it to double in size you put (2) , and you want half the (0.5) size. You can see that each 0.1 represents 10% of the original size.

See the example using transforme:scale() and note that other than Sam's response here all elements within canvas are decreased proportionally.
OBS: > If you want to apply in the text also you can include transforme tb in ID procent .

window.onload = function() {
  var can = document.getElementById('canvas'),
      spanProcent = document.getElementById('procent'),
       c = can.getContext('2d');

  var posX = can.width / 2,
      posY = can.height / 2,
      fps = 1000 / 200,
      procent = 0,
      oneProcent = 360 / 100,
      result = oneProcent * 64;

  c.lineCap = 'round';
  arcMove();

  function arcMove(){
    var deegres = 0;
    var acrInterval = setInterval (function() {
      deegres += 1;
      c.clearRect( 0, 0, can.width, can.height );
      procent = deegres / oneProcent;

      spanProcent.innerHTML = procent.toFixed();

      c.beginPath();
      c.arc( posX, posY, 70, (Math.PI/180) * 270, (Math.PI/180) * (270 + 360) );
      c.strokeStyle = '#b1b1b1';
      c.lineWidth = '6';
      c.stroke();

      c.beginPath();
      c.strokeStyle = '#3949AB';
      c.lineWidth = '10';
      c.arc( posX, posY, 70, (Math.PI/180) * 270, (Math.PI/180) * (270 + deegres) );
      c.stroke();
      if( deegres >= result ) clearInterval(acrInterval);
    }, fps);

  }

}

:root {
  background: #fff;
}

span#procent {
  display: block;
  position: absolute;
  left: 50%;
  top: 50%;
  font-size: 30px;
  transform: translate(-50%, -50%);
  color: #3949AB;
}

span#procent::after {
  content: '%';
}

.canvas-wrap {
  position: relative;
  width: 300px;
  height: 300px;
}
#canvas {
  transform: scale(.5);
}

<div class="canvas-wrap">
  <canvas id="canvas" width="300" height="300"></canvas>
  <span id="procent"></span>
</div>

04.01.2019 / 13:01

Is there a way to disable Delphi's "Debugger Exception Notification"? Hover over one element that will take effect in another

score 2 · Accepted Answer

You have decreased% with% (one-third) of the size of the canvas. You must adjust the properties proportionally. For example, the position of the chart has been reduced by% with%, so it should be repositioned by half the original difference, using 1/3 and 200px in top :

#canvas{
   position: relative;
   left: 100px;
   top: 100px;
}

You should also reduce the size of left . Reduced from 100px to .arc :

window.onload = function() {
  var can = document.getElementById('canvas'),
      spanProcent = document.getElementById('procent'),
       c = can.getContext('2d');
 
  var posX = can.width / 2,
      posY = can.height / 2,
      fps = 1000 / 200,
      procent = 0,
      oneProcent = 360 / 100,
      result = oneProcent * 64;
  
  c.lineCap = 'round';
  arcMove();
  
  function arcMove(){
    var deegres = 0;
    var acrInterval = setInterval (function() {
      deegres += 1;
      c.clearRect( 0, 0, can.width, can.height );
      procent = deegres / oneProcent;

      spanProcent.innerHTML = procent.toFixed();

      c.beginPath();
      c.arc( posX, posY, 45, (Math.PI/180) * 270, (Math.PI/180) * (270 + 360) );
      c.strokeStyle = '#b1b1b1';
      c.lineWidth = '6';
      c.stroke();

      c.beginPath();
      c.strokeStyle = '#3949AB';
      c.lineWidth = '10';
      c.arc( posX, posY, 45, (Math.PI/180) * 270, (Math.PI/180) * (270 + deegres) );
      c.stroke();
      if( deegres >= result ) clearInterval(acrInterval);
    }, fps);
    
  }
  
  
}

:root {
  background: #fff;
}

span#procent {
  display: block;
  position: absolute;
  left: 50%;
  top: 50%;
  font-size: 30px;
  transform: translate(-50%, -50%);
  color: #3949AB;
}

span#procent::after {
  content: '%';
}

.canvas-wrap {
  position: relative;
  width: 300px;
  height: 300px;
}

#canvas{
   position: relative;
   left: 100px;
   top: 100px;
}

<div class="canvas-wrap">
  <canvas id="canvas" width="100" height="100"></canvas>
  <span id="procent"></span>
</div>