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

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
Rotating the angular axis
Set the chart.type="Cloumn" default
pls help me
How could I change RadarLinesSeries using Action Script?

Categories

DW
IBM Blockchain
IBM Connections Cloud
PureApplication System
Sterling Commerce
Developer Central
IBM ILOG
Spanish
ibm_ru
LPM (Live Partition Mo...
COBOL Cafe
IBM Kenexa BrassRing o...
IBM Kenexa LMS
IBM Kenexa Participate
Application Security
IBM Security Intellige...
IBM Mobile & device me...
Marketing Operations
eMessage8
NetInsight Enterprise
eMessage7
IBM SmartCloud Applica...
Facilities Maintenance...
Jazz for Service Manag...
Software Asset Management
Labs (BigFix Labs)
Patch Management
Deployment and Configu...
Fixlet Authoring
Lifecycle Management
Transportation Managem...
iPhone Mobile Apps
Education
IBM SPSS Statistics Ge...
Java Programmability f...
Cognos 8
User Groups
Cognos Mobile 10
Технология Java
IBM Rational Asset Ana...
Enterprise Change Mana...
Performance Management...
wireless
architecture
lotus
db2
Financial markets
Electronics
OpenCL Development Kit...
IBM i
Web development
Architecture
Open Source
APL2 Programming Language
InfoSphere DataStage
IBM I BRMS
Part 3 - Challenge #08...
IBM Db2 Event Store
hrdf
Digital Advertising
WebSphere Portal
WebSphere Commerce
IBM WebSphere Applicat...
SiteProtector
Reports
News & Announcements
Documentation
QRadar Risk Manager
OM Mobile Framework
Service / Adapter Conf...
Announcements
Distributed Order Mana...
Customer Order Managem...
Applications Framework
Connect:Direct
Sterling Secure Proxy
Connect:Express Windows
Connect:Direct for Win...
Connect:Direct for UNIX
Tools & Technology
Feature Request
How Are You Using Sell...
Distance Education Sup...
Comergent Courses
Commerce/Order Management
Release 6.4
Receiving and putaway
Containerization, Pack...
Logistics
Product Management
Entity/DB Framework
C++ Visualization Prod...
OPL using CP Optimizer
Rule Execution Server
Information Server - J...
IBM Simulation Producer
IBM Tivoli System Auto...
Building Information M...
SmartCloud Analytics -...
Ajax forum
Active Memory Expansion
IBM BladeCenter Forum
Cluster Systems Manage...
System z Hardware Mana...
XML and Java Technology
IBM Java Runtimes and ...
Client-side Java progr...
IBM PowerVM Lx86 for x...
IBM SCORE

Resources

Encrypt Message



code
soft
python
ios
c
html
jquery
cloud
mobile