Im new in xslt. And Im stuck. I have basic xslt template (google chart to xslt) for column,line,pie chart. But now, I want to add new google graph which is "Proportional Stacked Column Chart" and its complicated for me to transform it into xslt and combine to my existing template. And how can I do that if Im using ColumnChart for propotional? What should do to not affect the original "Column Chart"? Please I really need help. Thank you

Here's the google chart script:

function drawVisualization() {

var data = google.visualization.arrayToDataTable([
    ['Year', 'Austria', 'Belgium', 'Czech Republic', 'Finland', 'France', 'Germany'],
    ['2003',  1336060,   3817614,       974066,       1104797,   6651824,  15727003],
    ['2004',  1538156,   3968305,       928875,       1151983,   5940129,  17356071],
    ['2005',  1576579,   4063225,       1063414,      1156441,   5714009,  16716049],
    ['2006',  1600652,   4604684,       940478,       1167979,   6190532,  18542843],
    ['2007',  1968113,   4013653,       1037079,      1207029,   6420270,  19564053],
    ['2008',  1901067,   6792087,       1037327,      1284795,   6240921,  19830493]
]);

var view  = new google.visualization.DataView(data);

var columns = [0];
for (var i = 1; i < data.getNumberOfColumns(); i++) {
    // add a column that calculates the proportional value of this column to the total
    columns.push({
        type: 'number',
        label: data.getColumnLabel(i),
        calc: (function (col) {
            return function (dt, row) {
                var val = dt.getValue(row, col);
                var total = 0;
                for (var j = 1; j < dt.getNumberOfColumns(); j++) {
                    total += dt.getValue(row, j);
                }
                return (total == 0) ? null : {v: val / total, f: val.toString()}; 
            };
        })(i)
    });
    // add an annotation column that puts a label on the bar
    columns.push({
        type: 'string',
        role: 'annotation',
        sourceColumn: i,
        calc: 'stringify'
    });
}

view.setColumns(columns);

var options = {
    title:"Yearly Coffee Consumption by Country",
    width:1000, height:400,
    isStacked: true,
    hAxis: {title: "Year"},
    vAxis: {
        format: '#%'
    }
};
var chart = new google.visualization.ColumnChart(document.getElementById('visualization'));
chart.draw(view, options);

 }
google.load('visualization', '1', {packages:['corechart'], callback: drawVisualization});

Here's the existing template:

 <xsl:template name="graphInit">
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
    google.load("visualization", "1", {packages:["corechart"]});
</script>
</xsl:template>

<xsl:template name="graphBegin">
<xsl:param name="id"/>
<xsl:param name="graph_type"/>
<xsl:param name="data"/>
<xsl:param name="options"/>
<xsl:element name="div">
    <xsl:attribute name="id">
        <xsl:value-of select="concat('chartdiv_',$id)"/>
    </xsl:attribute>
</xsl:element>
<xsl:value-of select="'&lt;script type=&quot;text/javascript&quot;&gt;'" disable-output-escaping="yes"/>
<!--<script type="text/javascript">-->
google.setOnLoadCallback(drawChart_<xsl:value-of select="$id"/>);
function drawChart_<xsl:value-of select="$id"/>() {
var chart = new google.visualization.<xsl:value-of select="$graph_type"/>(document.getElementById('chartdiv_<xsl:value-of select="$id"/>'));
var options = {
<xsl:value-of select="$options"/>
};
var data = google.visualization.arrayToDataTable([
<xsl:value-of select="$data"/>
<!--]);
        chart.draw(data, options);
    }
</script>-->
</xsl:template>
<xsl:template name="graphEnd">
]);
chart.draw(data, options);
}
<xsl:value-of select="'&lt;/script&gt;'" disable-output-escaping="yes"/>
</xsl:template>