-1

I am creating a pie chart to show my skills proficiency on my personal website with the following code - 

<!-- main skill No. 1 -->
    <div class="skill col-md-3 col-sm-6">
        <div class="chart center" data-percent="75">
            <span><span id="chart_num_1"></span> %</span>
        </div>
        <h2>Product Management</h2>
    </div>

<!-- main skill No. 2 -->
    <div class="skill col-md-3 col-sm-6">
        <div class="chart center" data-percent="70">
            <span><span id="chart_num_2">70</span> %</span>
        </div>
        <h2>Data Analysis</h2>
    </div>

<!-- main skill No. 3 -->
    <div class="skill col-md-3 col-sm-6">
        <div class="chart center" data-percent="65">
            <span><span id="chart_num_3">65</span> %</span>
        </div>
        <h2>Python</h2>
    </div>

<!-- main skill No. 4 -->
    <div class="skill col-md-3 col-sm-6">
        <div class="chart center" data-percent="60">
            <span><span id="chart_num_4">60</span> %</span>
        </div>
        <h2>UX/UI</h2>
    </div>

However percentages reflecting on the screen are totally different. How do I fix this?

Priyanka Naik
  • 1
  • 3
  • 2
    A percentage seems like a strange way to represent a level of proficiency. How can you be 30% skilled at something like data analysis? It is meaningless. – Turnip Jun 13 '20 at 10:10

1 Answers1

1

The number on the charts comes from js/plugins.js file. 

$("#chart_num_1").animateNumber({ number: 55 }, 1500);         
$("#chart_num_2").animateNumber({ number: 30 }, 1500);         
$("#chart_num_3").animateNumber({ number: 35 }, 1500);         
$("#chart_num_4").animateNumber({ number: 60 }, 1500);

change the values there to be the same as the data-percent of the chart

Yosef Tukachinsky
  • 5,570
  • 1
  • 13
  • 29