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="'<script
type="text/javascript">'"
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="'</script>'"
disable-output-escaping="yes"/></xsl:template>
--
You received this message because you are subscribed to the Google Groups
"Google Chart API" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To post to this group, send email to [email protected].
Visit this group at http://groups.google.com/group/google-chart-api.
For more options, visit https://groups.google.com/d/optout.
