Flex Charts with multiple axes

clock June 16, 2014 06:08 by author Flexicious

This post might reveal a few goodies that are coming as a part of the upcoming 3.2 release, but it is something a number of you have asked for. Basically, the issue is that you want to have multiple axes in our chart components. The fact that our Charts are based upon the excellent Spark skinning framework makes this endeavour a lot easier. 

When you draw something on a chart, there is always an underlying series that tells the chart its bounds. That is, given a X position (or a Y Position) on a chart, what is the value associated with that point with reference to the series. The linear axis will always use the first series, regardless of how many you have to draw the ticks. The actual painting of the series is independant, since the series is the source of the truth, the axis is dependant on it. 

With 3.2, we are introducing a new variable on the axis, called associatedSeries. 

/**

* By default, the first series is used to paint the default axis.

* If you associate another series with this axis, that series will be used

       * to calculate the min and max values.

       */

 

      public function get associatedSeries():Series

 

This allows you to override the series associated with the axis. Combine this with the power of the Spark Skinning framework, you can embed additional axes easily!

A little eye candy:

 

 

We are a few weeks away from official 3.2 release, but this is just one of the many exciting additions coming to charts in 3.2!

Below are the files used for this demo. They will not run with version < 3.2, but we do have preview builds available for those of you who cannot wait!

DualAxisChart.mxml (4.11 kb)

CustomLineChartSkin.mxml (4.46 kb)



Flex Calendar Component Customization

clock June 16, 2014 04:17 by author Flexicious

 

Over the past few months, our consulting services team has been quite busy working on client projects. For those of you who don’t know, we do a lot of consulting work for our customers. We have a number of customer projects where our components are heavily used. Since we wrote the components, our customers often come to us to build their projects around our components. Once such project we are currently working on requires a fair bit of customization on our Calendar component. This is a part of our Dashboard framework. Basically what the customer wanted here was to implement categorization of the calendar events, and implement custom rendering mechanism for the events on the calendar, and on the popup for the calendar items, they wanted to be able to pick and choose which category to associate each calendar item with.

The first thing we did, and we recommend you do this as well, is to extend the base Calendar component as below:

This makes it a lot easier to access protected functions and variables. We almost never make anything private, as a library developer try to put as few restrictions as possible for extension and custmozation.

 

Note that we provided a custom popup renderer, as well as a custom calendar item renderer. The calendar item renderer is the actual rectangle that shows on top of the week, month and day views in the calendar, while the calendar popup renderer is the popup that shows up when you double click on a calendar item (edit mode), or when you double click on a time slot on the calendar anywhere (add mode) Note that for providing custom item renderer we extended the built in CalendarItemRenderer

 

The requirement here was to implement a custom color, and for the sake of simplicity we have shown some sample logic here to draw different colors. For rendering the calendar item in different color, we override the updateDisplayList method of CalendarItemRenderer, like shown above.

And then we associate the popup renderer with the Calendar as below:

this.calendarItemPopupRenderer = new ClassFactory(MRXCalendarItemPopup);

 

Once you have the custom calendar built, you can use it like below:

 

 

Finally, the results:

 

 

 

 

Below is the sample project that we created using some of the concepts covered in this blog post.

 

SampleCalendar.zip (48.15 kb)

 

If you have any questions, please feel free to reach out to our support team. If you are interested in leveraging our expertise to build Flex/HTML/Android/iOS projects, please do not hesitate to contact us using this form: http://www.flexicious.com/Home/ContactUs