Stackedbar with data from a column


Hi there,

I try to display a chart with stacked bars. The problem is, that I don’t know how to get the stacked bar grouped by a column. My grid gets its data from a xml-file.

I used the following code to init my chart:

var chart = layout.cells("c").attachChart({
					padding:{left:75, bottom:50, top:50, right:30},
					yAxis:{start:0, title:("value")},

The Columnstitles look like that:

Attribute | Sample 1 | Sample 2 | Sample 3 | Constant | Result 1 | Result 2 | Result 3

Attributes = Description of the value (e.g. CO2, H2O …)
Sample 1 - 3 = the values in the sample
Constant = Constant for Calc
Result 1 - 3 = Result for each Sample

What I need is a stacke bar for each Result Column with all the Attribute in it. With my code I get only a stacked bar for each row. Can anybody help me out?

Thanks a lot


Here is a code sample for you below.
I.e. your last 3 Result columns are the next (grid3columns.xml file):

<?xml version="1.0" encoding="UTF-8"?> <rows> <row id="1"><cell>270538</cell><cell>170832</cell><cell>204123</cell></row> <row id="2"><cell>181243</cell><cell>121283</cell><cell>204235</cell></row> <row id="3"><cell>248744</cell><cell>143677</cell><cell>209414</cell></row> <row id="4"><cell>218345</cell><cell>130634</cell><cell>112486</cell></row> <row id="5"><cell>248489</cell><cell>140643</cell><cell>192441</cell></row> <row id="6"><cell>280474</cell><cell>190356</cell><cell>109552</cell></row> <row id="7"><cell>247456</cell><cell>179465</cell><cell>241110</cell></row> <row id="8"><cell>281845</cell><cell>121346</cell><cell>111425</cell></row> <row id="9"><cell>248733</cell><cell>170466</cell><cell>134821</cell></row> <row id="10"><cell>199957</cell><cell>115564</cell><cell>241011</cell></row> </rows>
So, you need to re-struct your grid data for chart the next way:

grid = layout.cells("b").attachGrid(); grid.setImagePath("../dhtmlxSuite_v44_pro/codebase/imgs/"); grid.setHeader("Result1,Result2,Result3"); grid.setColTypes("ro,ro,ro"); grid.setInitWidths("*,*,*"); grid.setColAlign("center,center,center"); grid.init(); rowArr = []; // array of grid rows newArr = []; // main array for chart grid.load("grid3columns.xml",function(){ rows = grid.getRowsNum(); columns = grid.getColumnCount(); for (var c=0; c<columns; c++){ // c - columns colName = grid.getColLabel(c); rowArr.push(colName); // add column label in array for (var r=0; r<rows; r++){ // r - rows newVal = grid.cellByIndex(r,c).getValue(); rowArr.push(newVal); // create data for column bar } newArr.push(rowArr); // create main array rowArr = []; }
Init chart simple way:

chart = layout.cells("a").attachChart({ view:"stackedBar", value:"#data1#", label: "#data1#", color:"#36abee", padding: { left: 75, bottom: 50, top:50, right:30 }, preset: "column", yAxis:{ }, xAxis:{ template:"'#data0#" }, border:0 });
Add series to the chart:

for (var s=1; s<=rows; s++){ // s - series chart.addSeries({ value:"#data"+(s+1)+"#", color:"#a7ee70", label:"#data"+(s+1)+"#" }); // do not forget to manipulate data color any custom way }
And parse all data to the chart:



Hey Darya,

thanks for your help. I started working with your code and some parts work. I’m struggling a bit with the placement of the code fragments. It seems like I’m having problems with the scope of the variables. As soon I try to access the newArr Array outside the grid.load() function it seemes to be empty. I thought when a var is created without the “var” in front of the name it should be accessable outside of the function.


You can use onXLE event handler to take out of load() function all the code you need.
Anyway i gave you the way how to transform grid data for chart parsing. Other things are javascript. лучше написать Other things are not connected with our library directly, but connected with javascript in general.
If you don’t get the result - open a ticket in support, attach demo there, we will help.


never mind. I got it. Thx alot!


You are welcome!