I have VueJS ApexCharts, 2 charts on the page. On initial load, both are wrong. If I resize the page, they are correct, so data is passed correctly. Its related to the presentation of the component. Any idea where to look?
<apexchart
width="80%"
type="pie"
:options="chartOptions"
:series="series"
></apexchart>
<apexchart v-if="historySeries"
width="100%"
height="100%"
type="bar"
:options="historyChart"
:series="historySeries"
></apexchart>
this is my first ever answer on stack overflow.
The solution is very simple :
you just need to add a :key="series.length"
the important things is to have a unique key for the chart so it is not rendered twice.
Example of a possible solution
Solution was to use refs, document hinted ref needed if doing realtime data, but I wasn't sure how to get it in my page
<apexchart width="80%"
ref="realtimePie"
type="pie"
:options="chartOptions"
:series="series"
></apexchart>
Then in my JS area
const realtimePie = ref()
realtimePie.value.updateSeries(series)
return {realtimePie}
Related
Suppose I've got comments list component with comments components. I wanna implement method that will return all comments components. I assigned to each comment component same ref:
<comments>
<comment ref="myComments" text="abc" />
<comment ref="myComments" text="efg" />
</comments>
I thought I can access all my components by this.refs.myComments but it doesn't work - it returns only last comment component.
What's the correct way to access all comment components?
There is no correct way to do that.
Your view is a representation of your data, so if you want the text for all comments, look at the data.
If you want to update the comments, update the data.
Pulling data out of the view, or manually manipulating the view defeats the purpose of react.
I need to access the initial selection of a component that is accessible through a CallOut.
Is it possible to initialize this component without having to call an initial open. Some kind of creationPolicy.
<s:Callout id="callout" creationPolicy="all">
<s:VGroup>
<s:DateSpinner id="dt" minDate="{new Date(2000,01,01)}" selectedDate="{new Date()}"
maxDate="{new Date(2014,11,31)}" change="changeHandler(event)"/>
</s:VGroup>
</s:Callout>
Please have look the component. May you get any help out of it
http://www.adobe.com/devnet-archive/flex/tourdeflex/web/#docIndex=-1;illustIndex=0
Go to the link & search for "callout"
It appears you can create the content by calling initialize() and createDeferredContent() on the callout.
callOut.initialize();
callOut.createDeferredContent();
You may need to call this code on the creation complete event in the document where the call out is defined.
Hi, I have been working on a Flex Mobile application using Flash Builder 4.6.
I have 2 mxml 'views' in my project. In one mxml file, i have a function that grabs xml data.
In my other mxml file, I have a refresh button that when depressed is suppsosed to call the function in the first mxml file in order to once again grab the xml data.
I dont know how to call that function from outside the mxml file it is housed in.
I appreciate any help given. Thank you!
[UPDATE #2]*
I thought I should share some more details about my issue.
It is a reddit client mobile app. It fetches the feeds, etc.
In my main view called RedditReaderHomeView.mxml, I am using a splitViewNavigator spark component to house two other views like so:
RedditReaderHomeView.mxml
<s:SplitViewNavigator width="100%" height="100%" id="splitViewNavigator" autoHideFirstViewNavigator="true">
<s:ViewNavigator id="redditList" firstView="views.subredditList" width="300" height="100%"/>
<s:ViewNavigator id="redditFeed" firstView="views.redditFeed" width="100%" height="100%">
<s:actionContent.landscape>
<s:Button id="refreshButtonlLandscape" icon="#Embed('assets/refresh160.png')" click="refreshRSS()" />
</s:actionContent.landscape>
<s:actionContent.portrait>
<s:Button id="refreshButton" icon="#Embed('assets/refresh160.png')" />
<s:Button id="navigatorButton" label="Search" click="splitViewNavigator.showFirstViewNavigatorInPopUp(navigatorButton)" />
</s:actionContent.portrait>
</s:ViewNavigator>
</s:SplitViewNavigator>
As you can see in the code above, in my main view I have a button with the id "refreshButton." When I click this button, I want the reddit data to refresh. In other words I want to call a function to refresh the data, that is housed in the view, 'redditFeed'.
This is the function which is in a separate view named 'redditFeed.mxml', that I want to call using the refresh button in the main view shown above.
redditFeed.mxml
protected function myList_creationCompleteHandler(url:String):void
{
getRedditFeedResult.token = redditFeedGrabber.getRedditFeed(url);
getRedditFeedResult.addEventListener(ResultEvent.RESULT,busyOff);
}
I hope this helped clear out confusion as to what I was trying to do. Im assuming that the solution is quite simple, but alas, I am a novice programmer and new to Flex, so Im learning the ropes. Any help is appreciated. Thank you!
IF you have an instance of the view, then just do:
myViewInstance.myPublicFunction();
In MXML, the id element of the MXML tag is used to reference the view in ActionScript. Since you didnt' describe your architecture; it is unclear how one view can call the other.
If the view that needs to trigger the call is a parent of the view that has the function to make the call, then you could use the approach described above.
If the view that need to trigger the call is a child of the view that has the function to make the call, then you should dispatch an event from the "child" which the parent can listen to. In the event handler you would trigger the call.
If the view that needs to trigger and the view that has the function to make the call are both children of the same parent; then you should dispatch an event from the "Trigger" view, listen for it in the parent, and then use that event listener to make the call (Using similar code to what I explained above).
If you have a more complicated architecture of these two views; then you should look into some method to encapsulate the "remote call" functionality, such as into a service class. Many frameworks offer approaches to share that service class and/or results across multiple classes. ( MXML Files are classes).
There are two ways you can do this without getting into bad architecture by having the child view explicitly know about its parent:
Your child view can generate an event, which the parent is listening for. The parent will then call the function
The child view can have a public property of type Function. The parent view passes a reference to that function by setting the variable. The child view then calls the function (after checking to make sure it is not null).
i am amateur in flex, and started my final year project in flex to learn it, i am stuck in place where i have to create rows of drop down lists when the user pressed add more, eg: like the ones in mail attachments
i think i have found a way to generate rows, i am not even sure whether it is a correct way, may be there are easy ways..if so please let me know
this is how i generate the rows:
<mx:states>
<mx:State name="newRow">
<mx:AddChild relativeTo="{cityDropdown}">
<s:DropDownList id="newbutton" creationComplete="hotelDropdown_creationCompleteHandler(event)" labelField="Name">
<s:AsyncListView list="{getAllHotelResult.lastResult}"/>
</s:DropDownList>
</mx:AddChild>
</mx:State>
</mx:states>
now when i generate more rows the dropdownlist ids will conflict, so i want to know a way to generate ids, i think i cant even call a function in there :(
please help...deadline is near :(
It just happens that I created something very similar recently, but using ComboBoxes rather than DropDownList - where the user can click Add More and a new ComboBox will slide down on a new row (right click the demo on my site to View Source - link below).
Maybe you can get some inspiration from that.
To auto increment the id names, you going to have to do some AS3 coding. Each time a button is created, its name will become "whaterver" + i (with i as an int incrementing each time)
http://bbishop.org/blog/?p=448
i don't understand about the state you used, but to do multi dynamic generated view, i choose to use "Event Bubbling" strategy and let the control without id.
wrap your controls into one component than make the event bubble from the component. than add listener on the parent of the control. thats all.
//in your custom control
dispatchEvent(new Event("myCustomEvent", true));
//in the parent control
parentComponent.addEventListener("myCustomEvent", myEventHandler);
I am working with google map api ...
http://code.google.com/p/gmaps-samples-flash/source/browse/trunk/samplecode/GeocodingSimple.mxml
What i want to do is to take up all the steps of direction, and place them in a datagrid.
but the problem that the google map api provide description on in HTML format. and then i put this steps data in my flex datagrid, it shows up all the html tags in it too, including with the data.
Can there be some way i can do this, without the html tags.
My code for the google maps look like this :
private function processTurnByTurn():void {
var stepText:String;
var stepMarker:Marker;
for (var turnCounter:int=dir.getRoute(0).numSteps-1; turnCounter >= 0; turnCounter--)
{
StepArray.addItem({step: dir.getRoute(0).getStep(turnCounter).descriptionHtml});
}
}
This is the function to create the step ArrayCollection for the datagrid
and the datagrid code looks like this:
<mx:DataGrid width="100%" height="100%"
dataProvider="{StepArray}">
<mx:columns>
<mx:DataGridColumn headerText="Column 1" dataField="step"/>
</mx:columns>
</mx:DataGrid>
Can someone help me out with this issue.
Regards
Zeeshan
You need to create an itemRenderer component: http://livedocs.adobe.com/flex/3/html/help.html?content=cellrenderer_3.html
Check the docs. There's simple ones you can define right in your datagrid definition, and there's others, like my link, that you create as custom component depending on how much control you want over the display.
The point is, you can control whether your label sets the "htmlText" field vs. the "text" field. Or you can write a control that strips out the html and displays the required text. It all depends on how you want to show those direction elements.
Use htmlText property instead of text in the itemRenderer
Yes, Html text, but be careful that a small number of html tags are supported by Flex