Q:

Rally: Canvas in a cell of a table

I have tried to draw a bar in a cell of my table.
Everything works fine but every time I changed my browser window size, my elements were missing. 
The same happens when I change the cell size manually.
Somebody can help ?
My canvas is build like this
In HTML:
<canvas id='0' width='260' height='10'> </canvas>

In Javascript:
var canvas = document.getElementById(0);

            if (canvas && canvas.getContext) {
                 ctx = canvas.getContext('2d');

           if (ctx) {

                          ctx.strokeStyle = 'red';
                          ctx.stroke();
                          ctx.fillStyle = '#8b0000';
                          ctx.fill();

                         ctx.font = "Bold 11px Arial";

                         ctx.fillText("Test", canvas.width - 248, canvas.height);

                            }
                        }

A:

Unfortunately the rally.sdk.ui.Table component redraws the cell when there's a resize event. The canvas element you're drawing on is replaced by a new canvas element when you resize.
Instead of drawing using canvas, you can create a bar in a cell with just html and css.

Embed this html in the property you wish to display as a bar instead of your canvas element:
<div class="bar"> 
    <div class="percentDone" style="width: 50%">50%</div> 
</div>

And add these styles as well:
<style type="text/css">

    .bar .percentDone {
        text-align: center;
        background-color: #EDB5B1;
    }

</style>

Hopefully that will give you what you're looking for. Here's the full app code, with just dummy data in it:
<html>
<head>
   <title>Percent Done with CSS example</title>
   <meta name="Name" content="Percent Done with CSS example" />

    <style type="text/css">

        .bar .percentDone {
            text-align: center;
            background-color: #EDB5B1;
        }

    </style>

   <script type="text/javascript" src="/apps/1.31/sdk.js"></script>
   <script type="text/javascript">

    rally.addOnLoad(function(){

        var table = new rally.sdk.ui.Table({ 
            columns: [
                {key: 'name', header: 'Name', width: 100}, 
                {key: 'percentDone', header: 'Percent Done', width: 100}
            ]
        });

        table.addRows([
            {
                name: 'Test 1',
                percentDone: '<div class="bar"><div class="percentDone" style="width: 50%">50%</div></div>'
            },
            {
                name: 'Test 2',
                percentDone: '<div class="bar"><div class="percentDone" style="width: 70%">70%</div></div>'
            }
        ]);

        table.display('container');

    });

   </script>
</head>
<body>
   <div id="container"></div>
</body>
</html>

