Radar charts


Radarchart gradient background


[IP said:]
I am looking for a way to make the backgroundcolor of the radarChart fade out from the center. Is it possible to do this with some kind of Gradient (Linear or Radial)?
It appears you can only pass a SolidColor to the angularFill, as the snippet below fails when putting in a RadialGradient:
<ilog:RadarGridLines<br />direction=""
angularChangeCount="6"
radialChangeCount="1"
>
<ilog:angularFill>
<mx:RadialGradient>
<mx:entries>
<mx:GradientEntry color="0xff0000"/>
<mx:GradientEntry color="0x00ff00"/>
</mx:entries>
</mx:RadialGradient>
</ilog:angularFill>
...
Maybe I am looking in the wrong direction, so hoping someone is able to give a helping hand.
Thanks in advance.
[dmandrioli said:]
I am looking for a way to make the backgroundcolor of the radarChart fade out from the center. Is it possible to do this with some kind of Gradient (Linear or Radial)?
No this kind of grid is not supported. The RadarGridLines class draws its content according to angularFill, alternateAngularFill, radialFill and alternateRadialFill style properties. There is no way to make a fade-out from the center with this definition.
It appears you can only pass a SolidColor to the angularFill, as the snippet below fails when putting in a RadialGradient
This will be fixed, please see http://elixir-bugs.ilog.com/browse/ELIXIR-748.
I suggest you this workaround:
1. Write a subclass of RadarGridLines (MyRadarGridLines for example)
2. Override the updateDisplayList method:
override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
{
super.updateDisplayList(unscaledHeight, unscaledWidth);
var origin:Point = PolarTransform(dataTransform).origin;
var radius:Number = PolarTransform(dataTransform).radius;
var mat:Matrix = new Matrix();
mat.createGradientBox(radius * 2, radius * 2, 0, origin.x - radius, origin.y - radius);
graphics.beginGradientFill(GradientType.RADIAL, [0xFF0000, 0x00FF00], [0.5, 0.5], [0, 255], mat);
graphics.drawCircle(origin.x, origin.y, radius);
}
3. Use it in your MXML code:
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"<br /> layout="absolute"
xmlns:ilog="http://www.ilog.com/2007/ilog/flex"
backgroundColor="0xFFFFFF"
backgroundGradientAlphas="[]"
xmlns:local="*">
<mx:Script>
<![CDATA[<br /> import mx.graphics.SolidColor;
]]>
</mx:Script>
<ilog:RadarChart width="100%"<br /> height="100%"
type="circular">
<ilog:backgroundElements>
<local:MyRadarGridLines id="grid"<br /> angularFill="{new SolidColor(0, 0)}"
radialFill="{new SolidColor(0, 0)}"/>
</ilog:backgroundElements>
<ilog:angularAxis>
<ilog:AngularAxis dataProvider="{['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H']}"/>
</ilog:angularAxis>
</ilog:RadarChart>
</mx:Application>
Hope this helps,
SystemAdmin
110000D4XK
‏2009-08-19T00:49:16Z
[dmandrioli said:]
I am looking for a way to make the backgroundcolor of the radarChart fade out from the center. Is it possible to do this with some kind of Gradient (Linear or Radial)?
No this kind of grid is not supported. The RadarGridLines class draws its content according to angularFill, alternateAngularFill, radialFill and alternateRadialFill style properties. There is no way to make a fade-out from the center with this definition.
It appears you can only pass a SolidColor to the angularFill, as the snippet below fails when putting in a RadialGradient
This will be fixed, please see http://elixir-bugs.ilog.com/browse/ELIXIR-748.
I suggest you this workaround:
1. Write a subclass of RadarGridLines (MyRadarGridLines for example)
2. Override the updateDisplayList method:
override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
{
super.updateDisplayList(unscaledHeight, unscaledWidth);
var origin:Point = PolarTransform(dataTransform).origin;
var radius:Number = PolarTransform(dataTransform).radius;
var mat:Matrix = new Matrix();
mat.createGradientBox(radius * 2, radius * 2, 0, origin.x - radius, origin.y - radius);
graphics.beginGradientFill(GradientType.RADIAL, [0xFF0000, 0x00FF00], [0.5, 0.5], [0, 255], mat);
graphics.drawCircle(origin.x, origin.y, radius);
}
3. Use it in your MXML code:
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"<br /> layout="absolute"
xmlns:ilog="http://www.ilog.com/2007/ilog/flex"
backgroundColor="0xFFFFFF"
backgroundGradientAlphas="[]"
xmlns:local="*">
<mx:Script>
<![CDATA[<br /> import mx.graphics.SolidColor;
]]>
</mx:Script>
<ilog:RadarChart width="100%"<br /> height="100%"
type="circular">
<ilog:backgroundElements>
<local:MyRadarGridLines id="grid"<br /> angularFill="{new SolidColor(0, 0)}"
radialFill="{new SolidColor(0, 0)}"/>
</ilog:backgroundElements>
<ilog:angularAxis>
<ilog:AngularAxis dataProvider="{['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H']}"/>
</ilog:angularAxis>
</ilog:RadarChart>
</mx:Application>
Hope this helps,
More...
[IP said:]
Thanks, this works great for the circular radarchart. But I forgot to mention that I am using a polygonal type radarchart, and I am a bit stuck on getting it to work for that type of radarchart.
Using a custom RadarLines I tried to fill the chart up to the last polygon with a gradientfill, but no success. I end up with a single colored chart.
...
graphics.beginGradientFill(GradientType.RADIAL,[0xff0000, 0x00ff00], [1,1],[0, 255]);
GraphicsUtilities.drawPolyLine(graphics, polygons[polygons.length-1], 0, polygons[polygons.length-1].length, "x", "y", null, "segment", true);
..
Thanks in advance.
SystemAdmin
110000D4XK
‏2009-08-21T18:55:39Z
[IP said:]
Thanks, this works great for the circular radarchart. But I forgot to mention that I am using a polygonal type radarchart, and I am a bit stuck on getting it to work for that type of radarchart.
Using a custom RadarLines I tried to fill the chart up to the last polygon with a gradientfill, but no success. I end up with a single colored chart.
...
graphics.beginGradientFill(GradientType.RADIAL,[0xff0000, 0x00ff00], [1,1],[0, 255]);
GraphicsUtilities.drawPolyLine(graphics, polygons[polygons.length-1], 0, polygons[polygons.length-1].length, "x", "y", null, "segment", true);
..
Thanks in advance.
More...
[IP said:]
Found it, so for anyone trying to get a gradient background for his polygonal radarchart you can do the following:
-create the following custom RadarGridlines class in your project:
package
{
import ilog.charts.RadarChart;
import ilog.charts.RadarGridLines;
import flash.geom.Point;
import flash.geom.Rectangle;
import flash.geom.Matrix;
import flash.display.GradientType;
import mx.charts.chartClasses.GraphicsUtilities;
import mx.charts.chartClasses.PolarTransform;
import mx.graphics.GradientEntry;
import mx.graphics.IStroke;
import mx.graphics.LinearGradient;
import mx.graphics.SolidColor;
/**
* Specifies the base color that will be used for a gradient effect from the center outwards, by
* decreasing the alpha of the specified color.
* Use the SolidColor interface to define the properties of the color
* as a child tag in MXML, or create an SolidColor object in ActionScript.
* Set the style to null to not color the bands.
* The default value is null.
*/
[Style(name="gradientBaseColor", type = "mx.graphics.SolidColor", inherit = "no")]
public class CustomRadarGridLinesSmoothGradient extends RadarGridLines
{
override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
{
//super.updateDisplayList(unscaledHeight, unscaledWidth);
var origin:Point = PolarTransform(dataTransform).origin;
var radius:Number = PolarTransform(dataTransform).radius;
graphics.clear();
var gradientBaseColor:SolidColor = getStyle("gradientBaseColor");
var numItem:int = RadarChart(super.chart).dataTransform.getAxis(PolarTransform.ANGULAR_AXIS).getLabels(0).labels.length;
var rTicks:Array = RadarChart(super.chart).radialAxisRenderers[0].ticks;
var innerRadius:Number;
var outerRadius:Number;
var polygons:Array = this.angularPolygons(numItem, 1, origin, radius, rTicks);
if (!polygons || polygons.length == 0)
{
return;
}
var mat:Matrix = new Matrix();
mat.createGradientBox(radius * 2, radius * 2, 0, origin.x - radius, origin.y - radius);
graphics.beginGradientFill(GradientType.RADIAL, [gradientBaseColor.color, gradientBaseColor.color], [1, 0.1], [0, 255], mat);
if (RadarChart(super.chart).type == "polygonal")
{
GraphicsUtilities.drawPolyLine(graphics, polygons[polygons.length - 1], 0, polygons[polygons.length - 1].length, "x", "y", null, "segment", true);
}
else
{
// innerRadius = origin.subtract(polygons[i][0]).length;
// outerRadius = origin.subtract(polygons[i+1][0]).length;
// graphics.drawCircle(origin.x, origin.y, outerRadius);
// graphics.drawCircle(origin.x, origin.y, innerRadius);
}
graphics.endFill();
}
private function angularPolygons(numItem:uint, aChangeCount:uint, origin:Point, radius:Number, ticks:Array):Array
{
var i:uint;
var j:uint;
var angle:Number;
var polygons:Array = new Array();
var polygon:Array;
var pt:Point;
var isZero:Boolean = false;
if (numItem == 0)
{
return new Array();
}
ticks.push(1);
for (j = 0; j < ticks.length; j += aChangeCount)<br /> {
polygon = new Array();
for (i = 0; i < numItem; i++)<br /> {
angle = (i % numItem) * Math.PI * 2 / numItem;
pt = new Point();
pt.x = origin.x + Math.cos(-angle) * radius * ticks[j];
pt.y = origin.y + Math.sin(-angle) * radius * ticks[j];
polygon.push(pt);
}
polygon.push(polygon[0].clone());
polygons.push(polygon);
if (j + aChangeCount >= ticks.length)
aChangeCount = 1;
}
return polygons;
}
}
}
- You can use this custom radargridlines inside backgroundelements. You can specify the gradient color in the gradientBaseColor variable
<ilog:RadarChart ...<br /> <ilog:angularAxis>
....
<ilog:backgroundElements>
<local:CustomRadarGridLinesSmoothGradient>
<local:gradientBaseColor>
<mx:SolidColor color="0xff0000"/>
</local:gradientBaseColor>
</local:CustomRadarGridLinesSmoothGradient>
</ilog:backgroundElements>
...
SystemAdmin
110000D4XK
‏2009-08-21T20:16:38Z
[IP said:]
Found it, so for anyone trying to get a gradient background for his polygonal radarchart you can do the following:
-create the following custom RadarGridlines class in your project:
package
{
import ilog.charts.RadarChart;
import ilog.charts.RadarGridLines;
import flash.geom.Point;
import flash.geom.Rectangle;
import flash.geom.Matrix;
import flash.display.GradientType;
import mx.charts.chartClasses.GraphicsUtilities;
import mx.charts.chartClasses.PolarTransform;
import mx.graphics.GradientEntry;
import mx.graphics.IStroke;
import mx.graphics.LinearGradient;
import mx.graphics.SolidColor;
/**
* Specifies the base color that will be used for a gradient effect from the center outwards, by
* decreasing the alpha of the specified color.
* Use the SolidColor interface to define the properties of the color
* as a child tag in MXML, or create an SolidColor object in ActionScript.
* Set the style to null to not color the bands.
* The default value is null.
*/
[Style(name="gradientBaseColor", type = "mx.graphics.SolidColor", inherit = "no")]
public class CustomRadarGridLinesSmoothGradient extends RadarGridLines
{
override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
{
//super.updateDisplayList(unscaledHeight, unscaledWidth);
var origin:Point = PolarTransform(dataTransform).origin;
var radius:Number = PolarTransform(dataTransform).radius;
graphics.clear();
var gradientBaseColor:SolidColor = getStyle("gradientBaseColor");
var numItem:int = RadarChart(super.chart).dataTransform.getAxis(PolarTransform.ANGULAR_AXIS).getLabels(0).labels.length;
var rTicks:Array = RadarChart(super.chart).radialAxisRenderers[0].ticks;
var innerRadius:Number;
var outerRadius:Number;
var polygons:Array = this.angularPolygons(numItem, 1, origin, radius, rTicks);
if (!polygons || polygons.length == 0)
{
return;
}
var mat:Matrix = new Matrix();
mat.createGradientBox(radius * 2, radius * 2, 0, origin.x - radius, origin.y - radius);
graphics.beginGradientFill(GradientType.RADIAL, [gradientBaseColor.color, gradientBaseColor.color], [1, 0.1], [0, 255], mat);
if (RadarChart(super.chart).type == "polygonal")
{
GraphicsUtilities.drawPolyLine(graphics, polygons[polygons.length - 1], 0, polygons[polygons.length - 1].length, "x", "y", null, "segment", true);
}
else
{
// innerRadius = origin.subtract(polygons[i][0]).length;
// outerRadius = origin.subtract(polygons[i+1][0]).length;
// graphics.drawCircle(origin.x, origin.y, outerRadius);
// graphics.drawCircle(origin.x, origin.y, innerRadius);
}
graphics.endFill();
}
private function angularPolygons(numItem:uint, aChangeCount:uint, origin:Point, radius:Number, ticks:Array):Array
{
var i:uint;
var j:uint;
var angle:Number;
var polygons:Array = new Array();
var polygon:Array;
var pt:Point;
var isZero:Boolean = false;
if (numItem == 0)
{
return new Array();
}
ticks.push(1);
for (j = 0; j < ticks.length; j += aChangeCount)<br /> {
polygon = new Array();
for (i = 0; i < numItem; i++)<br /> {
angle = (i % numItem) * Math.PI * 2 / numItem;
pt = new Point();
pt.x = origin.x + Math.cos(-angle) * radius * ticks[j];
pt.y = origin.y + Math.sin(-angle) * radius * ticks[j];
polygon.push(pt);
}
polygon.push(polygon[0].clone());
polygons.push(polygon);
if (j + aChangeCount >= ticks.length)
aChangeCount = 1;
}
return polygons;
}
}
}
- You can use this custom radargridlines inside backgroundelements. You can specify the gradient color in the gradientBaseColor variable
<ilog:RadarChart ...<br /> <ilog:angularAxis>
....
<ilog:backgroundElements>
<local:CustomRadarGridLinesSmoothGradient>
<local:gradientBaseColor>
<mx:SolidColor color="0xff0000"/>
</local:gradientBaseColor>
</local:CustomRadarGridLinesSmoothGradient>
</ilog:backgroundElements>
...
More...
[dmandrioli said:]
Thanks for sharing your solution! :)
SystemAdmin
110000D4XK
‏2009-08-21T20:54:26Z
[dmandrioli said:]
Thanks for sharing your solution! :)
More...
[D.Thert said:]
This code works great and I was able to quickly add the gradient. The only problem Im having is that my ListView is longer horizontally and has a horizontal scrollbar. When I move the scrollbar right, the gradient slowly gets darker... but going back the other way it gets choppy or just cuts to white. Is there something Im doing wrong?
Has anyone else had problems or success with the gradient on a wide ListView? Maybe theres a redraw method I should be calling?
Thanks in advance for any help
-Josh
SystemAdmin
110000D4XK
‏2009-08-27T13:01:43Z
[D.Thert said:]
This code works great and I was able to quickly add the gradient. The only problem Im having is that my ListView is longer horizontally and has a horizontal scrollbar. When I move the scrollbar right, the gradient slowly gets darker... but going back the other way it gets choppy or just cuts to white. Is there something Im doing wrong?
Has anyone else had problems or success with the gradient on a wide ListView? Maybe theres a redraw method I should be calling?
Thanks in advance for any help
-Josh
More...
[dmandrioli said:]
Hi Josh,
Could you provide a minimal reproducing sample and the version of IBM ILOG Elixir you are using?
Thanks,

Related Links

Obtaining radar chart Linear Axis coordinates
Negative values ?
Disable datatip for some of the series...
Error updating radarchart
Change the orientation of the category label
Labels size
Customizing radar charts angular axis labels
Custom labelFunction for radarchart
Linear Gradient as fill for RadarColumnSerie
Dragging Radar Line Series
How to change angular axis minimum and maximum?
RadarColumnSeries Remove Column Tapering on Large Values
Need to create radar chart without writing code
Radar Labels don\'t update
Radarchart gradient background
Run Time Radar Data

Categories

DW
Cloud
IBM SmartCloud Applica...
Cast Iron Community
ibm_ru
dW
Communities category
IBM FileNet Records Ma...
IBM Content Navigator
IBM Content Manager
IBM Kenexa Click and H...
Application Security
Installation and Setup
Open Beta Feedback
Jazz for Service Manag...
Jazz for Service Manag...
IBM Tivoli Monitoring ...
Labs (BigFix Labs)
iPhone Mobile Apps
Managed File Transfer
Multi-Channel Selling
IBM SPSS Statistics Ge...
ERP
Industry
Cognos BI 10
Cognos Enterprise BI
Cognos Series 7
BI Strategies
Reportar contenido ina...
SOA и Web-сервисы
Rational Publishing En...
Rational Team Concert
Rational Application D...
Test Forum for Alberto
Insurance
Automotive
aW
RSDC
Multicore enablement
Web development
Linux
IBM DB2 Express-C Forum
IBM InfoSphere Big Mat...
MS Exchange Recovery t...
Blockchain Technology
For All Type Post
BigFix App for QRadar ...
Digital Advertising
WebSphere Application ...
WebSphere Portal and P...
IBM Visual Configurati...
IBM WebSphere Applicat...
Administration
DSM Extensions, Custom...
Documentation
Patterns / Techniques ...
General Discussions
Business Process Modeling
Release Bulletins
Business Process Modeling
Gentran Integration Su...
Connect:Express z/OS
Sterling Secure Proxy
Connect:Direct Mainframe
Product Information Ma...
C3 Product Manager/C3 ...
C3 Analyzer Installation
How Are You Using Sell...
SDK Tools & Utilities
Comergent Courses
Upgrade Issues
JavaServer Page & UI
Performance Tuning
Service Definition Fra...
Database
Shipping
Oracle
WebSphere-MQ
Moderator Collaboration
IBM ILOG Elixir Enterp...
Diagram
JRules - General
JRules Trial Support -...
Higher Education
DB2 Content Management
IBM Tivoli Asset Disco...
IBM SmartCloud Cost Ma...
Ajax forum
Performance Tools Forum
AIX Forum for developers
Cell Broadband Engine ...
Lotus ActiveInsight an...
XML and Java Technology
Using XSL-FO to create...
Atom and RSS forum
ibmpub.java.os390
Java Virtual Machine (...
Best Practices for SOA...

Resources

Encrypt Message



code
soft
python
ios
c
html
jquery
cloud
mobile