How to load dynamic values from database into jQuery chart

Question

I would like to know how can I substitute set values for dynamically loaded values?

The value in this circle chart example gets loaded from the data-percent="value" from the div. However, this cannot be dynamically loaded from a database.

Does anyone know how I can modify this circle chart to allow values to be inputted from a database instead?

FYI: The circle chart is not being displayed in the snippet here some reason :/ so here is a link to an example: http://www.jqueryscript.net/demo/Smooth-Circle-Chart-Plugin-with-jQuery-CSS3-Circle-Charts/

thanks.

(function($) {
  $.fn.extend({
    //pass the options variable to the function
    percentcircle: function(options) {
      //Set the default values, use comma to separate the settings, example:
      var defaults = {
          animate: true,
          diameter: 210,
          guage: 10,
          coverBg: '#fff',
          bgColor: '#efefef',
          fillColor: '#5c93c8',
          percentSize: '15px',
          percentWeight: 'normal'
        },
        styles = {
          cirContainer: {
            'width': defaults.diameter,
            'height': defaults.diameter
          },
          cir: {
            'position': 'relative',
            'text-align': 'center',
            'width': defaults.diameter,
            'height': defaults.diameter,
            'border-radius': '100%',
            'background-color': defaults.bgColor,
            'background-image': 'linear-gradient(91deg, transparent 50%, ' + defaults.bgColor + ' 50%), linear-gradient(90deg, ' + defaults.bgColor + ' 50%, transparent 50%)'
          },
          cirCover: {
            'position': 'relative',
            'top': defaults.guage,
            'left': defaults.guage,
            'text-align': 'center',
            'width': defaults.diameter - (defaults.guage * 2),
            'height': defaults.diameter - (defaults.guage * 2),
            'border-radius': '100%',
            'background-color': defaults.coverBg
          },
          percent: {
            'display': 'block',
            'width': defaults.diameter,
            'height': defaults.diameter,
            'line-height': defaults.diameter + 'px',
            'vertical-align': 'middle',
            'font-size': defaults.percentSize,
            'font-weight': defaults.percentWeight,
            'color': defaults.fillColor
          }
        };

      var that = this,
        template = '<div><div class="ab"><div class="cir"><span class="perc">{{percentage}}</span></div></div></div>',
        options = $.extend(defaults, options)

      function init() {
        that.each(function() {
          var $this = $(this),
            //we need to check for a percent otherwise set to 0;
            perc = Math.round($this.data('percent')), //get the percentage from the element
            deg = perc * 3.6,
            stop = options.animate ? 0 : deg,
            $chart = $(template.replace('{{percentage}}', perc + '%'));
          //set all of the css properties forthe chart
          $chart.css(styles.cirContainer).find('.ab').css(styles.cir).find('.cir').css(styles.cirCover).find('.perc').css(styles.percent);

          $this.append($chart); //add the chart back to the target element
          setTimeout(function() {
            animateChart(deg, parseInt(stop), $chart.find('.ab')); //both values set to the same value to keep the function from looping and animating	
          }, 250)
        });
      }

      var animateChart = function(stop, curr, $elm) {
        var deg = curr;
        if (curr <= stop) {
          if (deg >= 180) {
            $elm.css('background-image', 'linear-gradient(' + (90 + deg) + 'deg, transparent 50%, ' + options.fillColor + ' 50%),linear-gradient(90deg, ' + options.fillColor + ' 50%, transparent 50%)');
          } else {
            $elm.css('background-image', 'linear-gradient(' + (deg - 90) + 'deg, transparent 50%, ' + options.bgColor + ' 50%),linear-gradient(90deg, ' + options.fillColor + ' 50%, transparent 50%)');
          }
          curr++;
          setTimeout(function() {
            animateChart(stop, curr, $elm);
          }, 1);
        }
      };

      init(); //kick off the goodness
    }
  });

})(jQuery);

.circleme {
  color: #000;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="circleme" data-percent="68">68%</div>

Alan · Accepted Answer · 2016-07-20 05:00:40Z

2

Instead of getting this value from a div, set the value to a variable that you pass as the parameter when you call the function. For testing try setting it to a hard coded value.

`perc = Math.round($this.data('percent'))

Use

perc = 60;

answered Jul 20, 2016 at 5:00

Alan

2772 silver badges5 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Krys Over a year ago

thanks for this, but do I put it in the jquery section or in the page itself?

Krys Over a year ago

I am not sure where I am suppose to put this in the jquery.

Alan Over a year ago

substitute perc = Math.round($this.data('percent')) with perc = 60; //or whatever data you are pulling from your database

Collectives™ on Stack Overflow

How to load dynamic values from database into jQuery chart

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related