LightCharts
A lightweight line-chart library for Flex.
Background
I created LightCharts for a project of mine that involves tracking many stock market symbols. Originally I was using the Adobe Flex Charting library, but found that performance suffered greatly given the number of charts I was using (around 60+), the amount of data displayed, and the constant real-time updates. Of course this isn’t necessarily due to poor coding on Adobe’s part, it’s just that their library contains an amazing amount of features to handle a variety of needs, consequently it’s very heavy. I didn’t need a lot of features, just a nimble way to display data.
I searched the Internet for other charting libraries which I could use and stumbled across a fantastic set of components created by Keith Peters called Minimal Comps. Keith’s library is extremely lightweight and it would have been a good fit, but MinimalComps is geared towards the pure Flash environment and not Flex – a major issue being the disparity in the component lifecycle.
Nonetheless, I was inspired by his code so I decided to use it as a starting point, adding and changing what I needed along the way.
Features
The result is a charting library that has many new features and several new object classes, some for visual enhancements and others for displaying and interacting with data. For instance, the data series class gives the ability to display multiple lines on a graph. The Toolset architecture is useful for creating mini plug-ins which can annotate or interact with data, all without needing to change any of the charting base classes.
Also, the line-chart class can be subclassed to create new line-chart types which have different visual characteristics or behavior. Included are a couple of examples for charts which I used in my project – these include the MACD and Stochastic. Note: These examples show how to make visual and behavioral changes to the base class, not how to calculate the values for the MACD or Stochastic charts. Those formulas can be easily found online.
Screenshot
In the screenshot above you can see many of the features:
- Three different charts (standard, MACD, and Stochastic), displaying different backgrounds including gradients and alphas, line colors, value ranges, etc.
- On the first chart, the display of crosshairs and coordinate value on mouseover; all charts have this functionality.
- On the first and second charts, a custom plug-in called DotDisplayTool which displays a dot over the last data point in the series. DotDisplayTool is an example of a non-interactive plug-in.
- On the second and third charts, a custom plug-in called LinearDrawTool which allows you to draw on top of the data; it displays a line and the chart values which correspond to the beginning and ending points. LinearDrawTool is an example of an interactive plug-in.
Live Demo & Source
If you want to see the library in action, click on the following link: LightCharts live demo.
The source is covered under the MIT license and it’s currently available from the live demo “View Source…”.
6 replies on “LightCharts – Lightweight charts for Flex”
Looks nice David!
Thanks for sharing.
[…] 来源页面: http://davidmccuskey.com/2010/07/lightcharts-lightweight-charts-for-flex/ […]
Hi,
Very nice example…How can we add a vertical and horizontal labels to it, like horizontal and vertical renderers
Thanks,
Tim
Really nice lightweight chart. I needed a few extra features. So far I’ve added the ability to use a legend with your LineChart. To do so, I added displayName parameter to LineSeries and implemented getters on legendData on LineChart and LineSeries. LineSeries returns an object format that mx.charts.Legend is expecting and LineChart returns and array of those objects, one per series. Works like a charm. Now you can simply do
mx:Legend dataProvider ={idOfYourChart}
//LineSeries .as
public function get legendData():Object /* of LegendData */
{
var ld:Object = new Object();
ld.element = this as IChartElement;
ld.label = _displayName;
ld.fill = new SolidColor(_lineColor);
ld.marker = null;
ld.aspectRatio = 1;
return [ld];
}
//LineChart.as
public function get legendData():Array /* of LegendData */
{
var keyItems:Array /* of LegendItem */ = [];
var n:int = _seriesData.length;
for (var i:int = 0; i < n; i++)
{
var s:LineSeries = _seriesData[i] as LineSeries;
if (s)
keyItems = keyItems.concat(s.legendData);
}
return keyItems;
}
I'll probably look at adding axis support as well. I'll post back if/when I do. Great work!
Hi Josh,
Thanks for your support and code samples ! I’ll integrate your additions into the code base soon. I am also planning on hosting the code on Google, so hopefully it’ll be easier to get/make updates.
Cheers,
David
Hi Tim,
Thanks for dropping by. Josh has posted some code which will put a legend on the chart. This may or may not be what you’re looking to do. I should be able to make those additions soon.
Cheers,
David