Multi-purpose Radial Bars With jQuery And SVG - ratePoint

ratePoint is a jQuery plugin that utilizes JavaScript and SVG to generate animated and customizable circles for representing percentage values and arbitrary numbers.

See Also:

• 10 Best Progress Bar (Linear) Components In JavaScript & CSS
• 10 Best Circular/Radial Progress Bar JavaScript Plugins
• 10 Best Progress Bar Components For Vue.js App
• 10 Best JavaScript & CSS Progress Bar Components

How to use it:

1. Insert jQuery library and the ratePoint.js plugin into the document.

<link rel="stylesheet" href="/path/to/css/radial-themes.css" />
<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/js/ratePoint.js"></script>

2. Initialize the plugin.

autoRatePoint();

3. Create an SVG element for the radial bar and config the plugin via the following data attributes:

• data-func: Required
• data-start: Start value
• data-end: End value
• data-mark: Custom mark 
• data-unit: Custom unit 
• data-time: Duration of animation
• data-label: Custom label
• data-angle: Start angle
• data-split: Split layout
• data-mirror: "x", "y", "x,y", or "y,x"
• data-bkpoints: Breakpoints  
• data-bkclass: Corresponding CSS classes
• data-bkcolors: Corresponding colors
• data-run: Auto run on page load

<svg id="animated" class='' data-toggle="class" viewbox="0 0 100 100 " xmlns="http://www.w3.org/2000/svg ">
  <circle class='no-fil' cx="50 " cy="50 " r="45 "/>
  <item data-func="prodata" 
        data-start="0 " 
        data-end="75 " 
        data-mark="100 " 
        data-unit='%' 
        data-time="7000 " 
        data-label="<span class='grid-center font8 font-all'>AutoMeter</span>" 
        data-angle="0" 
        data-mirror="x" 
        data-bkpoints="0 20 50 70 100"  
        data-bkclass="low normal medium high complete" 
        data-run="auto">
      </item>
  <path id="1" class="bar6 cap-round" data-func="progressbar" stroke-linecap="round" stroke-dasharray="0,251.36264038085938" stroke-width="1" d="M50 10 a 30 30 0 0 1 0 80 a 30 30 0 0 1 0 -80">
  </path>
  <foreignObject data-func="protext" x="20" y="20" height="60%" width="60%" text-anchor="middle" dy="7" class="text-center"></foreignObject>
</svg>

4. This example shows how to automatically update the radial bar.

let datas = [10, 50, 30, 70, 45, 10];
    i = 0;
    instance = 0;
    elem = "#1"
    setInterval(function() {
        let path = $(elem).find("path"),
            prodata = $(elem).find("[data-func='prodata']");
        //dataStart = (dataStart / dataMark) * 100;
        dataStart = path.attr('data-point') ? $(elem).find("path").attr('data-point') : 0;
        dataMark = prodata.attr('data-mark');
        dataStop = datas[i];
        prodata.attr({
            "data-start": dataStart,
            "data-end": dataStop
        });
        console.log(dataStart)
        setTimeout(function() {
            autoRatePoint("#1")
        }, 200);
        if (i == datas.length) {
            i = 0;
            instance = 0;
        }
        i++;
        instance = 1;
}, 10000)

---

This awesome jQuery plugin is developed by teymzz. For more Advanced Usages, please check the demo page or visit the official website.