I have a clustered chart with 2 column series. The problem is that sometimes one column's values are so large, the other column is dwarfed. So I added checkboxes to show/hide a given column, and set the visibility of the ColumnSeries as such:
visible="{checkbox.selected}" includeInLayout="{checkbox.selected}"
This shows/hides the given column correctly, the problem is that it does not reset the Y-Axis, so the other column never actually grows in height (when the column with the larger values is hidden). I've tried resetting the data provider, validating/invalidating the chart, and nothing seems to work.
Anyone have any ideas?
Thanks!
I would imagine from your description that you actually need to remove the series from the chart. So
public function onToggle(){
var newSeries:Array = [];
if(bigSeries.selected) {
newSeries.push(bigSeries);
}
if(smallSeries.selected) {
newSeries.push(smallSeries);
}
chart.series = newSeries;
}
Related
I got a problem with the widths of the advanceddatagrid-columns.
First of all, my layout is a HDividedBox, on the left there is the navigation, on the right there is a module, containing the advanceddatagrid.
left Side: navigation
right side: module (e.g. advanceddatagrid)
Most of the columns got a fixed width, some a minWidth. Now, initially the widths of the columns are correct.
So the problem is, whenever I load a new module and later reload the advanceddatagrid, the initial width of the columns is way different, although I change nothing in the process of loading the module. Neither the fixed widths nor the minWidths are initially correct.
I recently saw there is a solution for wrong widths of colums, it looks like that:
var oldPolicy:String = advanceddatagrid.myScrollPolicy;
advanceddatagrid.myScrollPolicy = ScrollPolicy.ON;
for(var i:int = 0; i < advanceddatagrid.columns.length; i++) {
var column:AdvancedDataGridColumn = advanceddatagrid.columns[i] as AdvancedDataGridColumn;
advanceddatagrid.column.width = column.width;
}
advanceddatagrid.validateNow();
advanceddatagrid.myScrollPolicy = oldPolicy;
advanceddatagrid.validateNow();
On the whole this is just a temporary change of the ScrollPolicy, re-setting the column-widths and then changing back. But still, it doenst work.
Does anyone have a clue?
Some relevant references that might help (the first one worked for me):
http://userflex.wordpress.com/2011/04/14/force-resize-datagrid/
http://forums.adobe.com/message/4285461
To summarize the first post (credit goes to Nick Schneble):
public function resizeColumns () : void
{
grid.validateNow ();
// forces the columns to size themselves properly
for each (var column : AdvancedDataGridColumn in grid.columns)
{
column.width = column.width;
}
}
It may seem a bit ridiculous, but if you execute this method whenever the underlying data in your data grid changes, you’ll have beautifully laid out columns.
In my AdvancedDataGrid,
I am adding dynamic values to cells by dragging a cell value to other cells. While copying, I am setting the value to listData and setting the Red color to the value in ItemRenderer. Everything is working fine, but when I scroll down/up, the values remains in the cells where thay are supposed to be(as I am setting to listData) but the coloring behaves wierd(as I am trying to set the color in ItemRenderer).
I don't want to store the color of the value, but I should be able to see the dynamically created values in Red color.
Is there a way, I can do this? Do I need to set the color to actual dataprovider object and then check in ItemRenderer?
Can anyone help me with this?
public class CustomItemRenderer extends AdvancedDataGridItemRenderer
{
private var _isDynamicValue:Boolean;
....
....
//_isDynamicValue is set to true if the value is dynamic
if(_isDynamicValue && listData.label) {
setStyle("color", 0xFF0000);
setStyle("fontWeight", "bold");
}
else {
setStyle("color", 0x000000);
}
I didn't found a way to store those values temporarily. I stored the colored values indexes and checked them in ItemRenderer.
I have a column chart that uses a label function to format the vertical axis. I added a button and want the axis (or chart) to redraw when the button is clicked. Right now, the chart axis renders OK only when initially added to the view state.
I have a function that sets various properties after the chart is initially created. In there, I have tried all these:
myChart.verticalAxis.dataChanged();
myChart.validateNow();
myChart.validateDisplayList();
myChart.validateProperties();
myChart.invalidateDisplayList();
myChart.invalidateProperties();
But they do not change the axis formatting. How can I do this?
The MXML code for the axis is:
< mx:LinearAxis id="verticalAxis" labelFunction="vAxisFormat"/>
The label function is:
private function vAxisFormat(labelValue:Number, previousValue:Object, axis:IAxis):String {
axis.getLabelEstimate();
if (_scale == 1){
return currencyFormatter.format(labelValue/_scale);
}else {
return numberFormatter.format(labelValue/_scale);
}
}
Try updating the data provider. This redraws the graph, so all the components.
Example:
ArrayCollection
arr.refresh ();
XML
char.dataprovider = xmlData
regars
HI,
In flex, I have a datagrid with 22 columns. I initially display all the columns. The width of each column right is uniform.
Now when i change the visiblity of a few columns, the width of each column varies. How do i maintain a uniform column width for each column whether or not there are any invisible columns?...
Also how do i get the count of number of visible columns. the ColumnCount property returns total number of columns and not the number of visible ones.
The columns are an array, so you can append code to whatever function makes them invisible and loop through that array setting each ones width. You will just need to keep tabs on your Datagrids width, and the number of visible columns, which you can also do with a loop. Here's some untested code that should put you close to your goal:
function makeAColInvisible():void{
//code you use to set col invisible
var visColCount:number = 0;
for each (var item:DataGridColumn in myDataGrid.columns){
if(item.visible == true){
visColCount++;
}
}
for each (var item2:DataGridColumn in myDataGrid.columns){
item2.width = myDataGrid.width / visColCount;
}
}
In my flex app I store the widths and visiblility of columns in an xml file. When the app loads it reads from the xml file and sets he columns values as applicable:
for(i = 0; i < columnsOrder.length; i++){
newOrder[i] = myDG.columns[Number(columnsOrder[i]) - 1];
newOrder[i].visible = (Number(columnsVisiblity[i]) == 1);
newOrder[i].width = Number(columnsWidth[i]);
}
myDG.columns = newOrder;
myDG.invalidateList();
The problem appears to be setting the visibility (it sets the visible field correctly but messes up the width)... I've tried setting it after setting the width (outside of the loop) and before the loop as well. It resizes the columns properly if I don't do anything with the visibility.
Any ideas?
Add an import statement at the top of your class file:
import mx.core.mx_internal;
Then remove using the mx_internal namespace, remove the owner of the column, change the width and then reasign the parent:
public static function resizeColumn(col:DataGridColumn, size:int):void
{
var owner:* = col.mx_internal::owner
col.mx_internal::owner = null;
col.width = size;
col.mx_internal::owner = owner;
}
This ought to do the trick (well, it did for us after a couple of days of swearing)
Is you horizontalScrollPolicy set to false on the datagrid?
"If the DataGrid's horizontalScrollPolicy property is false, all visible columns must fit in the displayable area, and the DataGrid will not always honor the width of the columns if the total width of the columns is too small or too large for the displayable area."
http://livedocs.adobe.com/flex/3/langref/mx/controls/dataGridClasses/DataGridColumn.html#width
I was able to get it to work by calling the above loop in a function twice... the first time it add the visible columns, the second time it sets the correct width. Not the best solution but I cannot spend any more time on it.