HTML/JS Multiple Pie Chart Issue

Question

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

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

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>

Spent Hours figuring Out Solution, but couldnt. I want to use Pie chart which has legend and Chart, no interaction with chart required. Constraints : Pie chart dataset must be from html file and Multiple charts can be created in single page. Anyhelp is Appreciated — krupesh Anadkat
– krupesh Anadkat, Commented Sep 4, 2018 at 16:43
because, its adding class="pieID legend" to class="pieID pie" again, so you need to rename this classes — Shanu T Thankachan
– Shanu T Thankachan, Commented Sep 4, 2018 at 16:54
@ShanuTThankachan Could you please Show the Same in code, i have tried what you said and it didnt work, Thankyou — krupesh Anadkat
– krupesh Anadkat, Commented Sep 4, 2018 at 16:57

Liko28s · Accepted Answer · 2018-09-04 16:57:46Z

2

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");

answered Sep 4, 2018 at 16:57

Liko28s

1415 bronze badges

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

Collectives™ on Stack Overflow

HTML/JS Multiple Pie Chart Issue

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related