Using dynamic data in a progress bar
<p>I am trying to figure out how I can use my own data in the progress bar from progressBar.js. I am not sure how to set my data into the code to get the progress bar to run in a dynamic format.</p>

<p>I am wanting to set <code>total_goals</code> as the 100% figure. Then I want the progress bar to scale to what the goals completed would be in terms of <code>total_goals</code>, ie: <code>goals_completed</code> / <code>total_goals</code>. Then use my <code>goal_percent</code> as the text value within the circle.</p>

<p>My values are being sent from PHP in a json encoded form.</p>

<pre><code>var total_goals = result.total_goals;
var goals_completed = result.goals_completed;
var goal_percent = result.completion_percentage;
$('#total-goals').html(total_goals);
$('#goals-completed').html(goals_completed);
$('#goal-percentage').html(goal_percent);
</code></pre>

<p>For example sake:</p>

<p>Total goals = 6</p>

<p>Goals completed = 3</p>

<p>Goal Percentage = 50%</p>

<pre><code> step: function(state, circle) {
    circle.path.setAttribute('stroke', state.color);
    circle.path.setAttribute('stroke-width', state.width);

    var value = Math.round(circle.value() * 100);
    if (value === 0) {
      circle.setText('');
    } else {
      circle.setText(value);
    }

  }
});
bar.text.style.fontFamily = '"Raleway", Helvetica, sans-serif';
bar.text.style.fontSize = '2rem';

bar.animate(1.0);
</code></pre>

<p>UPDATE</p>

<pre><code>var total_goals;
var goals_completed;
var goal_percent;

    function goalBar(){
        $.ajax({ 
                url: "ajax-php/goal-bar.php",
                type: "get",
                dataType : 'json',
                success: function (result) {
                  //console.log(result);
                    if (result == "Error!") {
                        alert("Unable to retrieve goal bar info!");
                        alert(result);
                    } else {
                        total_goals = result.total_goals;
                        goals_completed = result.goals_completed;
                        goal_percent = result.completion_percentage;
                        $('#total-goals').html(total_goals);
                        $('#goals-completed').html(goals_completed);
                        $('#goal-percentage').html(goal_percent);
                    }
                },
                error: function (xhr, textStatus, errorThrown) {
                    alert(textStatus + " | " + errorThrown);
                    console.log("error"); //otherwise error if status code is other than 200.
                }
            });
            //Goal Bar 

var bar = new ProgressBar.Circle('#goal-bar-container', {
  color: '#aaa',
  // This has to be the same size as the maximum width to
  // prevent clipping
  strokeWidth: 4,
  trailWidth: 1,
  easing: 'easeInOut',
  duration: 1400,
  text: {
    autoStyleContainer: false
  },
  from: { color: '#aaa', width: 1 },
  to: { color: '#333', width: 4 },
  // Set default step function for all animate calls
  step: function(state, circle) {
    circle.path.setAttribute('stroke', state.color);
    circle.path.setAttribute('stroke-width', state.width);

    var value = Math.round(circle.value() * 100);
    if (value === 0) {
      circle.setText('0');
    } else {
      circle.setText(value);
    }

  }
});
bar.text.style.fontFamily = '"Raleway", Helvetica, sans-serif';
bar.text.style.fontSize = '2rem';

bar.animate(goals_completed/total_goals);  // Number from 0.0 to 1.0    
    }
    goalBar();
</code></pre>

<p><a href="https://i.stack.imgur.com/fkW8R.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/fkW8R.png" alt="enter image description here"></a></p>

<p><a href="https://jsfiddle.net/kimmobrunfeldt/72tkyn40/" rel="nofollow noreferrer">https://jsfiddle.net/kimmobrunfeldt/72tkyn40/</a></p>