java - GWT Google Visualization Column Chart using style roles -
i've made column chart gwt project, , having trouble finding way change colours of columns. there 1 serie , looking use call style roles. know how in javascript shown here, having trouble doing in gwt?
what have:
what want:
in order different colors, should have different series. try (not tested)
private datatable createtable() { datatable data = datatable.create(); data.addrows(4); data.addcolumn(columntype.string, "metal"); data.addcolumn(columntype.number, "density"); data.setvalue(0, 0, "copper" ); data.setvalue(1, 0, "silver"); data.setvalue(2, 0, "gold"); data.setvalue(3, 0, "platinum" ); data.setvalue(0, 1, 9);// 9 value of density data.setvalue(1, 1, 11 ); data.setvalue(2, 1, 19); data.setvalue(3, 1, 21); return data; } } private options createoptions() { options options = options.create(); string[] colorarray = {"#b87333","#c0c0c0","#ffd700","#e5e4e2"}; options.setcolors(colorarray); //other options return options; }
edit
so first solution didn't achieve desired display, in order working, workaround necessary because api provided gwt doesn't offer such option.
you should have column , row each element. in order have each bar aligned label property isstacked
has set true. here working example.
other options available here
import com.google.gwt.core.client.entrypoint; import com.google.gwt.user.client.ui.flowpanel; import com.google.gwt.user.client.ui.panel; import com.google.gwt.user.client.ui.rootpanel; import com.google.gwt.visualization.client.abstractdatatable; import com.google.gwt.visualization.client.abstractdatatable.columntype; import com.google.gwt.visualization.client.datatable; import com.google.gwt.visualization.client.visualizationutils; import com.google.gwt.visualization.client.visualizations.corechart.barchart; import com.google.gwt.visualization.client.visualizations.corechart.options; public class testbar implements entrypoint { public void onmoduleload() { final flowpanel flowpanel = new flowpanel(); panel panel = rootpanel.get(); panel.add(flowpanel); runnable onloadcallback = new runnable() { public void run() { barchart bar = new barchart(createtable(), createoptions()); flowpanel.add(bar); } }; visualizationutils.loadvisualizationapi(onloadcallback, barchart.package); } private abstractdatatable createtable() { datatable data = datatable.create(); data.addcolumn(columntype.string, "metal"); data.addcolumn(columntype.number, "copper"); data.addcolumn(columntype.number, "silver"); data.addcolumn(columntype.number, "gold"); data.addcolumn(columntype.number, "platinum"); data.addrows(4); data.setvalue(0, 0, "copper"); data.setvalue(0, 1, 9); data.setvalue(1, 0, "silver"); data.setvalue(1, 2, 11); data.setvalue(2, 0, "gold"); data.setvalue(2, 3, 19); data.setvalue(3, 0, "platinum"); data.setvalue(3, 4, 21); return data; } private options createoptions() { options options = getnativeoptions(); string[] colorarray = { "#b87333", "#c0c0c0", "#ffd700", "#e5e4e2" }; options.setcolors(colorarray); return options; } private native options getnativeoptions() /*-{ var options = @com.google.gwt.visualization.client.visualizations.corechart.options::create()(); options = { fontname : 'calibri', fontsize : 12, width: 600, height: 400, isstacked : true, orientation : 'horizontal', legend: { position: "bottom" }, }; return options; }-*/; }
the result
Comments
Post a Comment