graph from html looking distorted when converting to pdf using itext

Question

I am trying to convert html to pdf using itext Api but the issue is that my html has an element as well. so when I see the generated pdf the graph i.e in element looks distorted. my code in paint method is as below

@Override
public void paint(RenderingContext renderingContext, ITextOutputDevice outputDevice, BlockBox blockBox) {

PdfContentByte cb = outputDevice.getWriter().getDirectContent();

    float width = (float) (cssWidth / outputDevice.getDotsPerPoint());
    float height =(float) (cssHeight / outputDevice.getDotsPerPoint());       

    System.out.println("width :"+width+" height:"+height+" outputDevice.getDotsPerPoint(): "+outputDevice.getDotsPerPoint());

    PdfTemplate template = cb.createTemplate(width, height);
    Graphics2D g2d = template.createGraphics(width, height);


    PrintTranscoder prm = new PrintTranscoder();
    TranscoderInput ti = new TranscoderInput(svg);
    prm.transcode(ti, null);


    PageFormat pg = new PageFormat();
    Paper pp = new Paper();
    pp.setSize(width, height);
    pp.setImageableArea(0, 0, width, height);
    pg.setPaper(pp);
    prm.print(g2d,pg, 0);
    g2d.dispose();


    PageBox page = renderingContext.getPage();
    float x = blockBox.getAbsX() + page.getMarginBorderPadding(renderingContext, CalculatedStyle.LEFT);
    float y = (page.getBottom() - (blockBox.getAbsY() + cssHeight)) + page.getMarginBorderPadding(renderingContext, CalculatedStyle.BOTTOM);
    System.out.println("x " + x + " y" + y + " outputDevice.getDotsPerPoint() " + outputDevice.getDotsPerPoint());
    x /= outputDevice.getDotsPerPoint(); 
    y /= outputDevice.getDotsPerPoint();

    cb.addTemplate(template, x, y);             
    System.out.println("Done with addition " + x + " " + y);
}

Now the changes that I observed is when I change float width = 400 and height = 620 then I see my graph coming but the top section disappears. Can someone help me out with this issue. Also I think there must be some formulae for height and width so that the graph wont distort. Thanks

The html that I am trying to convert is like this http://tinypic.com/r/e0o4xz/8 and the pdf I am getting is like http://i60.tinypic.com/14sz6kp.jpg So as you can see the pdf I am getting has missing x axis and the last bar of the chart is also missing. So the code part is like

    float width = (float) (cssWidth / outputDevice.getDotsPerPoint());
    float height = (float) (cssHeight / outputDevice.getDotsPerPoint());                                                                                                                                             

So when I comment change the cssWidth=22000 and cssHeight=12000 then the chart comes with axis and the last bar is also coming thats in red but the alignment is distorted.