Hello, I feel like this question is more specific to xslt than to Google Charts, and I have never worked with xslt. I am also not sure what you mean by a "Proportional Stacked Column Chart". If it's just values out of 100%, then it seems that you are doing the right thing. But then I don't understand your followup questions: "And how can I do that if Im using ColumnChart for propotional? What should do to not affect the original "Column Chart"?"
It seems like you need a piece of arbitrary code that you can enable or disable at will, that will compute the view for the proportional column chart and replace the original data with that, but unfortunately I do not know enough xslt to help you there. - Sergey On Mon, Apr 14, 2014 at 2:18 AM, <[email protected]> wrote: > 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. > -- 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.
