Hi

You can use a dataView to filter only specific Rows, thus you can create on
table with all the rows and then use
the relevant rows for each chart.

Good luck with the new API,
ChartMan

On Mon, Apr 18, 2011 at 5:19 AM, Duke <[email protected]> wrote:

> Hi folks,
>
> Sorry if my question has already been asked. I am new to Google
> Visualization (in fact, I just heard about it today, but have been
> already addicted to it :)) so please be gentle.
>
> Anyway, my task is to draw multiple different datasets (datasets'
> structures are the same, just values are different). After a bit of
> reading, I came up with:
>
> -------------------
>        google.load('visualization', '1', {packages: ['table',
> 'corechart']});
>        google.setOnLoadCallback(drawAll);
>        google.setOnLoadCallback(initialize);
>
>        function drawAll() {
>                var data = new google.visualization.DataTable();
>                data.addColumn('string','Name');
>                data.addColumn('number','Salary');
>
>  data.addRows([['John',10000],['Mary',25000],['Steve',8000],['Ellen',
> 20000],['Mike',12000]]);
>                drawSort(data, '1');
>                var data2 = new google.visualization.DataTable();
>                data2.addColumn('string','Name');
>                data2.addColumn('number','Salary');
>                data2.addRows([['Shoes', 10700],['Sports', 15400],['Toys',
> 12500],
> ['Electronics', 2100],['Food', 22600],['Art', 1100]]);
>        drawSort(data2,'2');
>        }
>
>        function drawSort(data, suffix) {
>                var formatter = new
> google.visualization.NumberFormat({prefix:
> '$'});
>                formatter.format(data, 1); // Apply formatter to second
> column
>
>                var view = new google.visualization.DataView(data);
>                view.setColumns([0, 1]);
>
>                var table = new
> google.visualization.Table(document.getElementById('table_div'+suffix));
>                table.draw(view, {allowHtml: true, showRowNumber: false,
> title: '',
> width: 450});
>
>                var colChart = new
>
> google.visualization.ColumnChart(document.getElementById('column_div'+suffix));
>                colChart.draw(view, {width: 450, height: 300});
>
>                var pieChart = new
> google.visualization.PieChart(document.getElementById('pie_div'+suffix));
>                //pieChart.draw(data, {is3D: true, width: 450, height: 300,
> title:
> ''});
>                pieChart.draw(view, {width: 450, height: 300});
>
>                google.visualization.events.addListener(table, 'sort',
>                        function(event) {
>                                data.sort([{column: event.column, desc:
> !event.ascending}]);
>                                colChart.draw(view, {width: 450, height:
> 300});
>                                pieChart.draw(view, {width: 450, height:
> 300});
>                        }
>                );
>        }
> ---------------------------
>
> This works fine with two datasets above, but as you can see in fuction
> drawAll, there are a boring repeat of declaring data, data2, data3
> etc... Is there a way of shortening that, say with another function?
>
> Thank you in advance,
>
> D.
>
> --
> You received this message because you are subscribed to the Google Groups
> "Google Visualization API" group.
> To post to this group, send email to
> [email protected].
> To unsubscribe from this group, send email to
> [email protected].
> For more options, visit this group at
> http://groups.google.com/group/google-visualization-api?hl=en.
>
>

-- 
You received this message because you are subscribed to the Google Groups 
"Google Visualization API" group.
To post to this group, send email to [email protected].
To unsubscribe from this group, send email to 
[email protected].
For more options, visit this group at 
http://groups.google.com/group/google-visualization-api?hl=en.

Reply via email to