Hi ChartMan,
Thanks! Your suggestion works fine, though I prefer to have a function
on each of data.
Bests,
D.
On 4/18/11 3:04 AM, ChartMan wrote:
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 <duke.li...@gmx.com
<mailto:duke.li...@gmx.com>> 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
google-visualization-api@googlegroups.com
<mailto:google-visualization-api@googlegroups.com>.
To unsubscribe from this group, send email to
google-visualization-api+unsubscr...@googlegroups.com
<mailto:google-visualization-api%2bunsubscr...@googlegroups.com>.
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
google-visualization-api@googlegroups.com.
To unsubscribe from this group, send email to
google-visualization-api+unsubscr...@googlegroups.com.
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 google-visualization-api@googlegroups.com.
To unsubscribe from this group, send email to
google-visualization-api+unsubscr...@googlegroups.com.
For more options, visit this group at
http://groups.google.com/group/google-visualization-api?hl=en.
