This was so irritating. Here you go.
Click on What's Hot on left side bar
Click on Settings gear wheel, and uncheck the box.
Sunday, May 19, 2013
Wednesday, May 1, 2013
Flex: Customize line Series DataTips
Here is what I wanted to do. I wanted to have a flex linechart with the following options
1) Custom data tip
2) Always show data points
3) Change the color of data points based on my data ( like Red, Blue, Green )
1) Custom data tip: This was the easiest option, just call dataTipFunction, which will return a string.You can control the text and its color in the function. When some thing fails, I show my message in Red.
2) Alwasy show data points: For this I used mx.charts.renderers.CircleItemRenderer, so all my datapoints appear. You can control the size using radius property. More than 1 renderer is available, like diamond,box etc
3) Change the color of data points: I used fillFunction to control the color of data points.
<mx:LineChart id="linechart" width="100%" height="100%"
dataTipFunction="CustomToolTip" dataTipMode="multiple"
showDataTips="true" >
<mx:verticalAxis>
<mx:LinearAxis baseAtZero="false" title="Total Minutes"/>
</mx:verticalAxis>
<mx:horizontalAxis>
<mx:CategoryAxis categoryField="Run_Date"
displayName="Run Date" title="Run Date"/>
</mx:horizontalAxis>
<mx:series>
<mx:LineSeries id="lineseries" displayName="TotalMinutes"
form="segment" yField="Total_Minutes" radius="6"
itemRenderer="mx.charts.renderers.CircleItemRenderer"
fillFunction="{fill_color}">
</mx:LineSeries>
</mx:series>
</mx:LineChart>
public function fill_color (element:ChartItem, index:Number):IFill
{
if (element.item.Job_Status.search("success")>0)
return new SolidColor(0XFF00 ,1);//green
else if (element.item.Job_Status.search("error")>0)
return new SolidColor(0xFF0000 ,1); //red
else
return new SolidColor(0x66ff ,1);
}
private function CustomToolTip(hd:HitData):String
{
var sJobStatus:String;
if (hd.item.Job_Status.search("success")>0)
sJobStatus = "<FONT COLOR='#339966'>" + hd.item.Job_Status + "</FONT>"; //green
else if (hd.item.Job_Status.search("error")>0)
sJobStatus = "<FONT COLOR='#FF0000'>" + hd.item.Job_Status + "</FONT>"; //red
else
sJobStatus = "<FONT COLOR='#117adc'>" + hd.item.Job_Status + "</FONT>"; //blue
return "Job Status: <b>"+sJobStatus+"</b>";
}
1) Custom data tip
2) Always show data points
3) Change the color of data points based on my data ( like Red, Blue, Green )
1) Custom data tip: This was the easiest option, just call dataTipFunction, which will return a string.You can control the text and its color in the function. When some thing fails, I show my message in Red.
2) Alwasy show data points: For this I used mx.charts.renderers.CircleItemRenderer, so all my datapoints appear. You can control the size using radius property. More than 1 renderer is available, like diamond,box etc
3) Change the color of data points: I used fillFunction to control the color of data points.
<mx:LineChart id="linechart" width="100%" height="100%"
dataTipFunction="CustomToolTip" dataTipMode="multiple"
showDataTips="true" >
<mx:verticalAxis>
<mx:LinearAxis baseAtZero="false" title="Total Minutes"/>
</mx:verticalAxis>
<mx:horizontalAxis>
<mx:CategoryAxis categoryField="Run_Date"
displayName="Run Date" title="Run Date"/>
</mx:horizontalAxis>
<mx:series>
<mx:LineSeries id="lineseries" displayName="TotalMinutes"
form="segment" yField="Total_Minutes" radius="6"
itemRenderer="mx.charts.renderers.CircleItemRenderer"
fillFunction="{fill_color}">
</mx:LineSeries>
</mx:series>
</mx:LineChart>
public function fill_color (element:ChartItem, index:Number):IFill
{
if (element.item.Job_Status.search("success")>0)
return new SolidColor(0XFF00 ,1);//green
else if (element.item.Job_Status.search("error")>0)
return new SolidColor(0xFF0000 ,1); //red
else
return new SolidColor(0x66ff ,1);
}
private function CustomToolTip(hd:HitData):String
{
var sJobStatus:String;
if (hd.item.Job_Status.search("success")>0)
sJobStatus = "<FONT COLOR='#339966'>" + hd.item.Job_Status + "</FONT>"; //green
else if (hd.item.Job_Status.search("error")>0)
sJobStatus = "<FONT COLOR='#FF0000'>" + hd.item.Job_Status + "</FONT>"; //red
else
sJobStatus = "<FONT COLOR='#117adc'>" + hd.item.Job_Status + "</FONT>"; //blue
return "Job Status: <b>"+sJobStatus+"</b>";
}
Subscribe to:
Posts (Atom)