gRaphael: trouble accessing multiples papers

Question

I have a page where there are 2 pie graphs generated using gRaphael. I also use a couple plug-ins to create a .png from those papers. My problem is that no matter what it always uses the first paper, even if I use the correct reference (i.e. the image is always the first graph even if I do it for the second). Here's my code:

//make sure this element exists before creating pie chart
        if(document.getElementById("hour_pie"))
        {
            //extract labels into gRaphael appropriate format
            totalArry=new Array();
            for(var key in hours_total)
            {
                totalArry.push(hours_total[key]);
            }

            //create canvas
            var hourPaper = Raphael("hour_pie");
            //create pie chart
            var hourPie=hourPaper.piechart(
               hourPaper.width/2, // pie center x coordinate
               hourPaper.height/2, // pie center y coordinate
               200,  // pie radius
                totalArry, // values
                {
                   legend: hours_pie_labels
               }
              );


              // hover animation
               hourPie.hover(function () {
                    this.sector.stop();
                    this.sector.scale(1.1, 1.1, this.cx, this.cy);

                    if (this.label) {
                        this.label[0].stop();
                        this.label[0].attr({ r: 7.5 });
                        this.label[1].attr({ "font-weight": 800 });
                    }
                }, function () {
                    this.sector.animate({ transform: 's1 1 ' + this.cx + ' ' + this.cy }, 500, "bounce");

                    if (this.label) {
                        this.label[0].animate({ r: 5 }, 500, "bounce");
                        this.label[1].attr({ "font-weight": 400 });
                    }
                });
            //on click of this img, convert canvas to .png and prompt download      
            $('.hour_download').click(function() 
            {
                // turn svg into PNG
                SVGtoPNG(hourPaper.toSVG(), "hourPieGraph");
            });
        }
        if(document.getElementById("explosive_pie"))
        {

            //extract labels into gRaphael appropriate format
            totalArry=new Array();
            for(var key in explosive_totals)
            {
                totalArry.push(explosive_totals[key]);
            }
            //create canvas
            var explosivePaper = Raphael("explosive_pie");
            //create pie chart
            var explosivePie=explosivePaper.piechart(
               explosivePaper.width/2, // pie center x coordinate
               explosivePaper.height/2, // pie center y coordinate
               200,  // pie radius
                totalArry, // values
                {
                   legend: explosive_pie_labels
               }
              );


              // hover animation
               explosivePie.hover(function () {
                    this.sector.stop();
                    this.sector.scale(1.1, 1.1, this.cx, this.cy);

                    if (this.label) {
                        this.label[0].stop();
                        this.label[0].attr({ r: 7.5 });
                        this.label[1].attr({ "font-weight": 800 });
                    }
                }, function () {
                    this.sector.animate({ transform: 's1 1 ' + this.cx + ' ' + this.cy }, 500, "bounce");

                    if (this.label) {
                        this.label[0].animate({ r: 5 }, 500, "bounce");
                        this.label[1].attr({ "font-weight": 400 });
                    }
                });

            //on click of this img, convert canvas to .png and prompt download  
            $('.explosive_download').click(function() 
            {
                // turn svg into PNG
                SVGtoPNG(explosivePaper.toSVG(), "explosivePieGraph");
            });
        }

and the HTML:

    <div id="hour_pie" class="pie_chart"></div><img class="download_image hour_download" title="Download this graph" src="/images/download_small.png"></img>

<div id="explosive_pie" class="pie_chart" ></div><img class="download_image explosive_download" title="Download this graph" src="/images/download_small.png"></img>
    <style type="text/css"> 
    .pie_chart
    {
        width:1000px;
        height:450px;
    }
    .download_image
    {
        display: block;
        margin-left: auto;
        margin-right: auto;
    } 


</style>

Answer 1

The issue I was having was a result of the way I extracted the canvas from the xml. As I figured out, the multiples canvases are stored in an array and they are not returned from the document individually (which makes sense in hindsight). So given my implementation I need to know the index of the canvas I want to convert to a .png. This was in the SVGtoPNG function. More specfically concerning the line var svgElement = document.body.getElementsByTagName("svg")[1]; 0 is my first canvas, 1 the second canvas, etc.

 function SVGtoPNG(xml, name) {

  try
  {
      //add canvas into body    
      var canvas = document.createElement('canvas');
      canvas.id = "myCanvas";
      document.body.appendChild(canvas);

      //default is 'xml' (used for IE8)
      var finalSvg=xml;

      // IE8 is special and a pain in the ass
      if(BrowserDetect.browser==="Explorer" && BrowserDetect.version===8)
      {
         FlashCanvas.initElement(canvas);   
      }
      else
      {
         //serialize svg
        var svgElement = document.body.getElementsByTagName("svg")[1];
        var svgXml = (new XMLSerializer()).serializeToString(svgElement);
        finalSvg = svgXml.FixForRaphael();  
      }