Raphael multiple charts on same page

Question

I am creating a webpage using at least two Raphael charts.

Any help would be greatly appreciated. I hope I have explained the problem appropriately.

                <th scope="row">Perl</th>
                <td>3%</td>
            </tr>
            <tr>
                <th scope="row">C++</th>
                <td>2%</td>
            </tr>
            <tr>
                <th scope="row">Java</th>
                <td>2%</td>
            </tr>
            <tr>
                <th scope="row">Objective-C</th>
                <td>2%</td>
            </tr>
        </tbody>
    </table>
</div>

Answer 1

The problem is in the g.pie.js file

You are doing this:

$("tr").each(function () { 
  // this loops throught all TR tags in the document, which contains two tables...
  values.push(parseInt($("td", this).text(), 10));
  labels.push($("th", this).text());
});

What you "should" be doing is:

 var table = $("#holder");
  // only select the tr rows that are inside your "holder" div
 $("tr", table).each(function () {
   values.push(parseInt($("td", this).text(), 10));
   labels.push($("th", this).text());
 });

Hope this helps. you were shoving an incorrect dataset into the pie chart.