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
Related
I have a scatterplot that I would like to fit into an existing view:
scatterchart("Test", NumberAxis(), NumberAxis()) {
}
But I would like to get rid of the title at the top to centre the scatterplot in its view.
I have tried to set the title to an empty string but to no avail:
scatterchart("", NumberAxis(), NumberAxis()) {
// I'm looking for a method like this:
title.isVisible(false)
}
My goal is to get rid of that empty space at the top of the chart for a uniform look.
I'm not even sure what the correct way would be in JavaFx. Let me know if I'm on the right track, cheers!
Set the title to null:
scatterchart(null, NumberAxis(), NumberAxis())
Alternatively:
scatterchart(x = NumberAxis(), y = NumberAxis())
I want to have an interactive legend inside my canvas, however I'm having trouble getting it to work. I am using qwt6.1.2 and this version no longer has the option to insert the legend as an "ExternalLegend", but instead has the class qwtPlotLegendItem to handle legends inside the canvas. However when I read the docs I see:
In opposite to QwtLegend the legend item is not interactive.
An external QwtLegend with a transparent background on top the plot
canvas might be another option with a similar effect.
My question is: how do I show an QwtLegend on top of the plot canvas?
In the documentation for QwtPlot I read:
Legends, that are not inserted into the layout of the plot widget need
to connect to the legendDataChanged() signal. Calling updateLegend()
initiates this signal for an initial update.
I have connected the legendDataChanged signal and triggered it by calling updateLegend(), but now I'm stuck on what to do next. Any tips on how to proceed?
Ok I got it to work:
QwtPlot* plot;
// Attach some plots/histograms to the plot.
MyLegend* legend = new MyLegend(plot);
MyLegend ::MyLegend (QwtPlot * pPlot)
: m_pPlot(pPlot)
{
setParent(m_pPlot);
setGeometry(0, 0, 100, 100);
connect(m_pPlot, &QwtPlot::legendDataChanged,
this, &MyLegend ::LegendDataChanged);
m_pPlot->updateLegend();
}
void MyLegend ::LegendDataChanged(const QVariant &itemInfo, const QList< QwtLegendData > &data)
{
updateLegend(itemInfo, data);
}
Within my component, I'm drawing some rectangles as below:
var objGraphics:Graphics=graphics;
objGraphics.drawRect(start, end, total, 5);
objGraphics.endFill();
I need to display a custom tooltip for each rectange when the mouse cursor is hovering over it.
How can I do this? I'm using the MouseMove event to track when the cursor moves over these coordinates (that part is working), but when I change the tooltip text it's not refreshing.
private function this_MOUSE_MOVE(event:MouseEvent):void
{
//...some code to check the coordinates to find out which rectangle the cursor
//is over
//current tooltip is "Rectangle A";
ToolTipManager.destroyToolTip(_myToolTip);
var localPoint:Point=new Point(event.localX, event.localY);
var globalPoint:Point=new Point(localToGlobal(localPoint).x,
localToGlobal(localPoint).y);
//cursor is over Rectangle B, so changing the tooltip;
_myToolTip=ToolTipManager.createToolTip("Rectangle B",
globalPoint.x, globalPoint.y) as ToolTip;
callLater(addChild, [_myToolTip]);
}
Thanks for your help.
EDIT: The problem seems to be with the following line:
ToolTipManager.destroyToolTip(_myToolTip);
If I comment out the preceding line, it will display the new tooltip, but it will keep creating new ones and the old ones never get removed. But if I add that line, it doesn't add any tooltips! Is the code not being executed sequentially, i.e., is the code to remove the tooltip somehow getting executed after the code to add the tooltip?
Assuming what you're adding to the stage, is called "myShape", you could do something like this:
// in your class...
private var var tooltip:Tooltip; // Or whatever your tooltip is
myShape.addEventListener(MouseEvent.MOUSE_OVER, handleOver);
myShape.addEventListener(MouseEvent.MOUSE_OUT, handleOut);
private function handleOver(evt:MouseEvent):void
{
// Show here
// OR
// tooltip = new Tooltip();
// addChild(tooltip);
}
private function handleOut(evt:MouseEvent):void
{
// Hide here
// OR
// removeChild(tooltip);
}
Hope this helps.
I have a several chart components that I have created in Flex. Basically I have set up a special UI that allows the user to select which of these charts they want to print. When they press the print button each of the selected charts is created dynamically then added to a container. Then I send this container off to FlexPrintJob.
i.e.
private function prePrint():void
{
var printSelection:Box = new Box();
printSelection.percentHeight = 100;
printSelection.percentWidth = 100;
printSelection.visible = true;
if (this.chkMyChart1.selected)
{
var rptMyChart1:Chart1Panel = new Chart1Panel();
rptMyChart1.percentHeight = 100;
rptMyChart1.percentWidth = 100;
rptMyChart1.visible = true;
printSelection.addChild(rptMyChart1);
}
print(printSelection);
}
private function print(container:Box):void
{
var job:FlexPrintJob;
job = new FlexPrintJob();
if (job.start()) {
job.addObject(container, FlexPrintJobScaleType.MATCH_WIDTH);
job.send();
}
}
This code works fine if the chart is actually displayed somewhere on the page but adding it dynamically as shown above does not. The print dialog will appear but nothing happens when I press OK.
So I really have two questions:
Is it possible to print flex components/charts when they are not visible on the screen?
If so, how do I do it / what am I doing wrong?
UPDATE:
Well, at least one thing wrong is my use of the percentages in the width and height. Using percentages doesn't really make sense when the Box is not contained in another object. Changing the height and width to fixed values actually allows the printing to progress and solves my initial problem.
printSelection.height = 100;
printSelection.width = 100;
But a new problem arises in that instead of seeing my chart, I see a black box instead. I have previously resolved this issue by setting the background colour of the chart to #FFFFFF but this doesn't seem to be working this time.
UPDATE 2:
I have seen some examples on the adobe site that add the container to the application but don't include it in the layout. This looks like the way to go.
i.e.
printSelection.includeInLayout = false;
addChild(printSelection);
Your component has to be on the stage in order to draw its contents, so you should try something like this:
printSelection.visible = false;
application.addChild(printSelection);
printSelection.width = ..;
printSelection.height = ...;
...
then do the printing
i'm not completely sure, but in one of my application I have to print out a complete Tab Navigator and the only method i have found to print it is to automatically scroll the tabnavigator tab in order to show the component on screen when i add them to the printjob.
In this way they are all printed. Before i created the tabnaviagotr scrolling the print (to PDF) result was a file with all the pages of the tab but only the one visible on screen really printed.
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;
}