CODEWITHSUNDEEP
javascriptphphtml
AnujDubey
AnujDubey

Reputation: 95

use multiple pie chart in php

I am using code in example mentioned here Pie chart Example

JS

$(function(){
    var $ppc = $('.progress-pie-chart'),
      percent = parseInt($ppc.data('percent')),
      deg = 360*percent/100;
    if (percent > 50) {
      $ppc.addClass('gt-50');
    }
    $('.ppc-progress-fill').css('transform','rotate('+ deg +'deg)');
    $('.ppc-percents span').html(percent+'%');
});

HTML:

<div class="progressDiv">
  <div class="statChartHolder">
     <div class="progress-pie-chart" data-percent="67"><!--Pie Chart -->
         <div class="ppc-progress">
            <div class="ppc-progress-fill"></div>
         </div>
         <div class="ppc-percents">
            <div class="pcc-percents-wrapper">
               <span>%</span>
            </div>
         </div>
      </div><!--End Chart -->
   </div>
   <div class="statRightHolder">
      <ul>
         <li> <h3 class="blue">39.4k</h3> <span>Interactions</span></li>
         <li> <h3 class="purple">1.8k</h3> <span>Posts</span></li>
      </ul>                    
      <ul class="statsLeft">
         <li><h3 class="yellow">22%</h3> <span>Comments</span></li>
         <li><h3 class="red">37%</h3> <span>Cheers</span></li>
      </ul>
      <ul class="statsRight">
         <li><h3>18%</h3> <span>Tasks</span></li>
         <li><h3>23%</h3> <span>Goals</span></li>
      </ul>
   </div>
</div>

The html, css and js are exactly same as in the link above.

I want to use more than 1 pie chart in my html (say 5) in the same format. How do you identify the id that is passed to $fintion() in js.

At present the has same class name(progress-pie-chart), so if I change the data at one pie chart it is replicated to other as well..

Upvotes: 0

Views: 1150

Answers (2)

Glen
Glen

Reputation: 28

You just have to give every chart an ID. Then you can select the ID from JS.

See my example below.

JS:

      var $chart1 = $('#chart1'),
        percent = parseInt($chart1.data('percent')),
        deg = 360 * percent / 100;
      if (percent > 50) {
        $chart1.addClass('gt-50');
      }
      $('#chart1-fill').css('transform', 'rotate(' + deg + 'deg)');
      $('#chart1-percents span').html(percent + '%');

HTML:

    <!--Pie Chart1 -->
<div class="progress-pie-chart" id="chart1" data-percent="10">
  <div class="ppc-progress">
    <div class="ppc-progress-fill" id="chart1-fill"></div>
  </div>
  <div class="ppc-percents" id="chart1-percents">
    <div class="pcc-percents-wrapper">
      <span>%</span>
    </div>
  </div>
</div>
<!--End Chart1 -->

I have also edited the example see here http://codepen.io/anon/pen/egqRPQ

Upvotes: 1

Asfandyar Khan
Asfandyar Khan

Reputation: 1738

You can do it by passing different id="pie-chart-1" to your multiple pie charts.. like this..

<div class="progress-pie-chart" id="pie-chart-1" data-percent="67">
    <!--Pie Chart -->
        <div class="ppc-progress">
            <div class="ppc-progress-fill"></div>
        </div>
        <div class="ppc-percents">
            <div class="pcc-percents-wrapper">
            <span>%</span>
            </div>
        </div>
    </div><!--End Chart -->

Similarly you can do for another id="pie-chart-2"

<div class="progress-pie-chart" id="pie-chart-2" data-percent="67">
    <!--Pie Chart -->
        <div class="ppc-progress">
            <div class="ppc-progress-fill"></div>
        </div>
        <div class="ppc-percents">
            <div class="pcc-percents-wrapper">
            <span>%</span>
            </div>
        </div>
    </div><!--End Chart -->

& your JS will be like this 

$(function(){
    var $ppc = $('#pie-chart-1'),
      percent = parseInt($ppc.data('percent')),
      deg = 360*percent/100;
    if (percent > 50) {
      $ppc.addClass('gt-50');
    }
    $('.ppc-progress-fill').css('transform','rotate('+ deg +'deg)');
    $('.ppc-percents span').html(percent+'%');
});

Similarly for another var $ppc = $('#pie-chart-2'),

Upvotes: 0

Related Questions