javascript - gRaphael: trouble accessing multiples papers -

i have page there 2 pie graphs generated using graphael. use couple plug-ins create .png papers. problem no matter uses first paper, if use correct reference (i.e. image first graph if second). here's code:

//make sure element exists before creating pie chart         if(document.getelementbyid("hour_pie"))         {             //extract labels 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 img, convert canvas .png , prompt download                   $('.hour_download').click(function()              {                 // turn svg png                 svgtopng(hourpaper.tosvg(), "hourpiegraph");             });         }         if(document.getelementbyid("explosive_pie"))         {              //extract labels 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 img, convert canvas .png , prompt download               $('.explosive_download').click(function()              {                 // turn svg png                 svgtopng(explosivepaper.tosvg(), "explosivepiegraph");             });         } 

and html:

    <div id="hour_pie" class="pie_chart"></div><img class="download_image hour_download" title="download graph" src="/images/download_small.png"></img>  <div id="explosive_pie" class="pie_chart" ></div><img class="download_image explosive_download" title="download 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> 

the issue having result of way extracted canvas xml. figured out, multiples canvases stored in array , not returned document individually (which makes sense in hindsight). given implementation need know index of canvas want convert .png. in svgtopng function. more specfically concerning line var svgelement = document.body.getelementsbytagname("svg")[1]; 0 first canvas, 1 second canvas, etc.

 function svgtopng(xml, name) {    try   {       //add canvas body           var canvas = document.createelement('canvas');       canvas.id = "mycanvas";       document.body.appendchild(canvas);        //default 'xml' (used ie8)       var finalsvg=xml;        // ie8 special , pain in 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();         }