I have a Java application that uses the ColumnChart visualization with
some simple options. Here is an example of the code to create the
chart:
ColumnChart.Options options = ColumnChart.Options.create();
options.setBackgroundColor("rgb(246,251,251)");
DataTable data = DataTable.create();
// add some test data...
data.addColumn(DataTable.ColumnType.STRING, "Column");
data.addRows(2);
data.setValue(0, 0, "row 1, column 1");
data.setValue(1, 0, "row 2, column 1");
ColumnChart view = new ColumnChart(model, options);
This works well, but I would like to use more complex options to
create the chart. Many samples using javascript look like this:
<script type="text/javascript" src="http://www.google.com/jsapi";></
script>
<script type="text/javascript">
var sourceColumnChart;
// Load the Visualization API and the piechart package.
google.load('visualization', '1', {'packages':['columnchart']});
// Set a callback to run when the API is loaded.
google.setOnLoadCallback(drawChart);
// Callback that creates and populates a data table,
// instantiates the pie chart, passes in the data and
// draws it.
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Date');
data.addColumn('number', 'Label 1');
data.addColumn('number', 'Label 2');
data.addColumn('number', 'Label 3');
data.addRow(["01\/09\/2008",88,125,71]);
data.addRow(["08\/09\/2008",95,109,72]);
data.addRow(["15\/09\/2008",140,119,91]);
data.addRow(["22\/09\/2008",90,138,111]);
data.addRow(["29\/09\/2008",97,123,79]);
data.addRow(["17\/08\/2009",60,94,83]);
data.addRow(["24\/08\/2009",84,110,133]);
data.addRow(["31\/08\/2009",91,138,163]);
data.addRow(["07\/09\/2009",41,49,38]);
sourceChart = new google.visualization.ColumnChart
(document.getElementById('sourceChart1'));
sourceChart.draw(data, {
width: '100%',
height: 300,
min: 0,
is3D: false,
title: "Title of the chart",
backgroundColor: {stroke: '#dbdbdb', fill:'red', strokeSize:
1},
legend: 'bottom',
legendBackgroundColor: {stroke: '#dbdbdb', fill:'#dbdbdb',
strokeSize: 1},
enableTooltip: true,
axisColor: {stroke: '#999', fill:'#bdbdbd', strokeSize: 1},
colors: ["#FF8834", "#FFD434", "#A6BEEF"],
isStacked: true,
titleY: "Title X",
titleX: "Title Y"
,is3D: false,
borderColor:{fill:"#aaaaaa", stroke:"#888888", strokeSize:0},
focusBorderColor:"#ffffff" }
);
}
</script>
<div id="sourceChart1" style="width:100%;"></div>
What java could would produce options similar to what this javascript
directive accomplishes:
backgroundColor: {stroke: '#dbdbdb', fill:'red', strokeSize: 1},
My failed attempts have java code something like this:
options.setOption("backgroundColor", getNativeArray());
where the getNativeArray looks like this:
private static native JsArrayString getNativeArray() /*-{
return '[{"fill":"#aaaaaa","stroke":"#888888", "strokeSize":1}]';
}-*/;
There is GWT documentation that hint at the answer but do not provide
concrete examples in Java:
http://code.google.com/p/gwt-google-apis/wiki/VisualizationNewWrapper
http://code.google.com/apis/visualization/documentation/gallery/areac...
Thanks in advance,
- Steve Sarver
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"Google Web Toolkit" group.
To post to this group, send email to google-web-toolkit@googlegroups.com
To unsubscribe from this group, send email to
google-web-toolkit+unsubscr...@googlegroups.com
For more options, visit this group at
http://groups.google.com/group/google-web-toolkit?hl=en
-~----------~----~----~----~------~----~------~--~---
