Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Circular / radial progress bar [duplicate]

I have to show progress graphs exactly in following way where percentage would be in center of circular graph
circular progress indicator

How can i do this using javascript/jQuery? Can it be done using Google Chart?

like image 563
Brij Avatar asked Feb 15 '11 07:02

Brij


People also ask

How do you make a circular progress bar in tkinter?

Tkinter does not have any support for circular progress bars. You will have to draw your own using a series of images, or a drawing on a canvas.


5 Answers

There's a plugin for this at: http://anthonyterrien.com/knob/

Demo

jQuery Knob

  • canvas based ; no png or jpg sprites.
  • touch, mouse and mousewheel, keyboard events implemented.
  • downward compatible ; overloads an input element...
like image 56
mnowotka Avatar answered Oct 04 '22 02:10

mnowotka


I searched and know there are at least 5 ways to create Circular progress indicator:
They include:

  1. jquery.polartimer.js
  2. jQuery Knob
  3. CSS3 pie graph timer with jquery
  4. circular progressBar by jQuery andCSS3
  5. ProgressBar.js
like image 40
aisin Avatar answered Oct 04 '22 02:10

aisin


I would recommend Highcharts JS for all of your JavaScript graphing needs

Browse through more of the demos; I think you're looking for the Donut Chart :)

like image 28
maček Avatar answered Oct 04 '22 01:10

maček


You can use CSS sprites (google) for this purpose, if you want to show multiples of 10 (0%, 10%, 20% etc). I guess you need to be a graphics guru to create the sprite..

The sprite is one image containing more than one image. For your purpose, you can create an image, say 16x160px. Imagine that this image is divided into ten 16x16px "slices" and draw the corresponding percentage on that slice. You can then use CSS and JavaScript to show one "frame" from this sprite.

like image 34
Salman A Avatar answered Oct 04 '22 01:10

Salman A


If you are not targeting old browsers, you can easily do that by drawing on a canvas element. This gives you the freedom to do whatever you need with the chart.

That means this solution's only requirement is jQuery and any browser that supports the canvas element...IE9+ Here's a code snippet that demonstrates it...

//input
var dimens = 256;
var color = "rgba(54, 162, 235, 0.9)";
var padding = 12;
var width = 10;
var value = 80;
var maxValue = 100;
var countFontRatio = 0.25; //ratio in relation to the dimens value

$(function() {
  $(".chart-total").each(function(idx, element) {

    var _render = function() {

      var startingPoint = -0.5;
      var pointValue = startingPoint;
      var currentPoint = startingPoint;
      var timer;
      var _ctx;

      var $canvas = $(element).find("canvas");
      var canvas = $canvas.get(0);

      pointValue = (value / (maxValue / 20) * 0.1) - 0.5;

      canvas.height = dimens;
      canvas.width = dimens;

      if (!countFontRatio)
        $canvas.parent().find(".legend-val").css("font-size", dimens / value.toString().length);
      else
        $canvas.parent().find(".legend-val").css("font-size", dimens * countFontRatio);

      _ctx = canvas.getContext("2d");



      var _draw = function() {

        _ctx.clearRect(0, 0, dimens, dimens);
        _ctx.beginPath();
        _ctx.arc(dimens / 2, dimens / 2, (dimens / 2) - padding, startingPoint * Math.PI, 1.5 * Math.PI);
        _ctx.strokeStyle = "#ddd";
        _ctx.lineWidth = 2;
        _ctx.lineCap = "square";
        _ctx.stroke();

        _ctx.beginPath();
        _ctx.arc(dimens / 2, dimens / 2, (dimens / 2) - padding, startingPoint * Math.PI, currentPoint * Math.PI);
        _ctx.strokeStyle = color;
        _ctx.lineWidth = width;
        _ctx.lineCap = "round";
        _ctx.stroke();

        currentPoint += 0.1;

        if (currentPoint > pointValue) {
          clearInterval(timer)
        }

      };

      timer = setInterval(_draw, 100);
    };

    _render();

    $(window).resize(function() {
      _render();
    });

  });
})
body {
  font-family: 'Open Sans', sans-serif;
  color: #757575;
}

.chart-total {
  position: relative;
  margin: 0 auto;
}

.chart-total-legend {
  position: absolute;
  top: 50%;
  left: 50%;
  -ms-transform: translateY(-50%) translateX(-50%);
  -o-transform: translateY(-50%) translateX(-50%);
  -moz-transform: translateY(-50%) translateX(-50%);
  -moz-transform: translateY(-50%) translateX(-50%);
  transform: translateY(-50%) translateX(-50%);
}

.legend-val {
  font-size: 4em;
  display: block;
  text-align: center;
  font-weight: 300;
  font-family: 'Roboto', sans-serif;
}

.legend-desc {
  display: block;
  margin-top: 5px;
  text-align: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<link href="https://fonts.googleapis.com/css?family=Open+Sans|Roboto:300,400" rel="stylesheet">

<div class="chart-total" style="max-width: 256px;">
  <canvas height="256" width="256"></canvas>
  <div class="chart-total-legend">
    <span class="legend-val" value="3933" style="font-size: 64px;">3,933</span>
    <span class="legend-desc">Total Progress</span></div>
</div>
like image 29
Leo Avatar answered Oct 04 '22 03:10

Leo