RGraph and IE 8 wont render graph correctly

Question

I am trying to make a simple pie chart on a report page i am working on. My Client uses IE8 for all of their systems. RGraph provides the best available graphing in my opinion and its the graphing tool that my boss requires me to use. So no change in convincing me otherwise.
Also i am using asp.net

<script type="text/javascript" src="/js/RGraph/libraries/RGraph.common.key.js"></script>
<script type="text/javascript" src="/js/RGraph/libraries/RGraph.drawing.rect.js"></script>
<script type="text/javascript" src="/js/RGraph/libraries/RGraph.common.core.js"></script>
<script type="text/javascript" src="/js/RGraph/libraries/RGraph.common.dynamic.js"></script>
<script type="text/javascript" src="/js/RGraph/libraries/RGraph.common.tooltips.js"></script>
<script type="text/javascript" src="/js/RGraph/librarieslibraries/RGraph.pie.js"></script>
<!--[if lt IE 9]><script src="/js/RGraph/excanvas/excanvas.js"></script><![endif]-->

<script type="text/javascript">
    function renderMap() {
        <%= GetPie() %>;
    }
   $(document).ready(function () {
        renderMap();
    });
 </script>

and my canvas

  <canvas id="myPie" width="500" height="300">[No Canvas Support]</canvas>

and my .net behind code portion

protected string GetCounts()
{
  // cut out code //
  //  var longs = [1,2,3,4] 
  //  var names = ["program1", "program2", "program3", "program4"]
  //  var precents = ["1.2%", "1.3%", "1.4%", "1.5%"]
  //  these values are hard coded on here not on my page
  // its for my clients protection that i use false data

    StringBuilder output = new StringBuilder();
    output.Append("var pie = new RGraph.Pie('myPie', [");
    output.Append(TotalEmployeeList.Count - totalOfthese + ", ");
    output.Append(longs);
    output.Append("])");
    output.Append(".Set('labels', [");
    output.Append("\"" + GetPercent(Utility.ToDouble(TotalEmployeeList.Count - totalOfthese)) + " Unqualified\", ");
    output.Append(percent);
    output.Append("])");
    output.Append(".Set('labels.sticks', [true])");
    output.Append(".Set('labels.sticks.length', 20)");
    output.Append(".Set('key', ['Unqualified',");
    output.Append(names);
    output.Append("])");
    output.Append(".Set('key.colors', ['#a7a8aa','#003057','#009fdf','#e87722','#a7a8aa','#003057', '#009fdf'])");
    output.Append(".Set('key.interactive', true)");
    output.Append(".Set('key.position', 'gutter')");
    output.Append(".Set('key.position.y', 275)");
    output.Append(".Set('key.rounded', false)");
    output.Append(".Set('colors', ['#a7a8aa','#003057','#009fdf','#e87722','#a7a8aa','#003057','#009fdf'])");
    output.Append(".Set('strokestyle', 'white')");
    output.Append(".Set('linewidth', 3)");
    output.Append(".Set('shadow', true)");
    output.Append(".Set('shadow.offsetx', 2)");
    output.Append(".Set('shadow.offsety', 2)");
    output.Append(".Set('shadow.blur', 3)");
    output.Append(".Set('exploded', 7)");
    output.Append(".Set('chart.radius', 100)");
    output.Append(".Set('origin', 0)");
    output.Append(".Draw();");

    return output.ToString();
}

my problem here is that the key and the pie chart work in all browsers but not ie 8.. and partially in ie 9. is there anything that i am missing? that would prevent IE from working correctly?

Answer 1

By the looks of it you're not using the window.onload function to create your charts - which I've notice that ExCanvas seems to require. Eg:

window.onload = function (e)
{
    // Create chart here (NB: the bar variable must be declared using the var keyword)

    var bar = new RGraph.Bar('cvs', [4,8,6,3,5,2,4]);
    bar.Draw();
}