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.
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?
Hi
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:
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:
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.