Xpages dojo charting breaking csjs

I just started using The Dojo charting feature in Xpages. After following this tutorial by Andrew Champion. I Found that the simple csjs script to create a pie chart does not work. It breaks on the creation of the Pie Chart in CSJS. Using most basic code for better readability.

makeCharts = function() 
{
alert("test");
var pieChart = new dojox.charting.Chart2D("#{id:panel1}");
};

The alert in the code above does not run when I call the function in my Xpage. I Followed the tutorial exactly but had no results. Any help would be appreciated.

Xpage source code below:

<?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core" dojoParseOnLoad="true"
    dojoTheme="true">
    <xp:this.resources>
        <xp:dojoModule name="dojox.charting.Chart2D"></xp:dojoModule>
        <xp:script src="/scriptsChartDojo.jss" clientSide="false"></xp:script>
        <xp:script src="/scriptsChartDojoCSJS.js" clientSide="true"></xp:script>
    </xp:this.resources>
    <xp:scriptBlock id="scriptBlock1"
        value="XSP.addOnLoad(makeCharts);">
    </xp:scriptBlock>
    <xp:panel style="height:450px;width:450px" id="panel1">
        </xp:panel>
    </xp:view>

I don't think you can include server generated code in js files. If you open the scriptsChartDojoCSJS.js file in your browser, you will see that #{id:panel1} has not been altered.

Instead you can add the makeCharts function to your xp:scriptBlock.