Search code examples
javascripthtmlpie-chart

HTML/JS Multiple Pie Chart Issue

  • I am facing problem in getting multiple pie chart on my webpage.
  • I got it from codepen, when i tried to implement more than one Pei chart in a page, it displayed errors in chart.
  • Please check Codepen Link after Screenshots

Screenshots below :

Single Pie Chart - No problems

enter image description here

On addition of another chart, there are these data-set loading problems, it shows 5 fields in each chart instead of 3 and 2 respectively enter image description here

LINK to codepen

HTML Code (please click Above Link for CSS & JS Code)

<main>
  <section>
    <div class="pieID pie"></div>
    <ul class="pieID legend">
      <li><em>Humans</em><span>718</span></li>
      <li><em>Dogs</em><span>531</span></li>
      <li><em>Cats</em><span>868</span></li>
    </ul>
  </section>
<!--  Un-commenting Below brings erro in first pie chart, how can i get to charts on same page? Thanks -->
  <section>
    <div class="pieID pie"></div>
    <ul class="pieID legend">
      <li><em>Slugs</em><span>344</span></li>
      <li><em>Aliens</em><span>1145</span></li>
    </ul>
  </section>
</main>
Solution

  • You're almost right, just remember to use unique identifiers for your elements Add ids for your elements:

    <main>
  <section>
    <div class="pieID pie" id="pie1"></div>
    <ul class="pieID legend" id="legend1">
      <li><em>Humans</em><span>718</span></li>
      <li><em>Dogs</em><span>531</span></li>
      <li><em>Cats</em><span>868</span></li>
    </ul>
  </section>
<section>
    <div class="pieID pie" id="pie2"></div>
    <ul class="pieID legend" id="legend2">
      <li><em>Slugs</em><span>344</span></li>
      <li><em>Aliens</em><span>1145</span></li>
    </ul>
  </section>
</main>

    Call the creation function like

    createPie("#legend1", "#pie1");
createPie("#legend2", "#pie2");