OpenFlashChart brief introduction

by valensoft 2009-1-10 8:29:00

OpenFlashChart is an open source Flash and Javascript to the technical foundation for the free chart, using it to create some very useful analysis of the effect of the statements of the chart.

The most important thing is it is open source and free, because usually I'm using. NET development technology, so on. NET technology as the research object, of course, it can support multiple languages.

How does it work?

1. Browse the Web using your browser
2. Browser download pages with OpenFlashChart
3. Display charts.
4. As long as the data file to tell you OpenFlashChart. The remaining subject OpenFlashChart engine do it themselves.

Pie chart:



3D histogram and so on.

Live Demo

• See More Examples
• Buy Now
• Download Trial Version

Emprise JavaScript Charts

Y Axis0100200300400500240211

X Axis09/20
200708/21
200807/23
200906/24
201005/26
201106/24
201009/16
201004/01
201006/24
201009/16
201012/09
201003/03
2011
07/22/2008
X Axis

Y Axis

Max Zoom Reached Series 1

Chart Legend

Series 1

Series 2

Emprise JavaScript Charts

Features

• Interactive: Features such as Hints, Mouse Tracking, Mouse Events, Key Tracking and Events, Zooming, Scrolling, and Crosshairs raise interactivity and user experience in web charting to a new level.
• Axis Scaling: There's no need to determine your data range before hand. EJSChart will calculate and scale automatically to fit whatever data it is presented with.
• Auto Zooming, Scrolling: Too much data and not enough screen real estate? Show it all. Let your end users zoom in on the pieces they're most interested in. Axis locking for single axis zoom, scrolling and automatic axis scaling are all included .
• Stackable Series: Multiple chart series can be stacked and combined to fit many charting needs.
• Multiple Chart Types: Line, Area, Scatter, Pie, Bar and Function series are just the beginning. New series are just a few lines of JavaScript code away.
• Ajax-Driven Data: EJSChart supports XML-formatted data and loads data on the fly. New series can be added and data updated in real time without page reloads.
• Compatible: Built with compatibility in mind and tested on all major browsers, you can be assured your charts will function consistently for the broadest range of end users.
  See the full list of compatible browsers.
• Plugin Free: 100% Pure JavaScript Charting Solution. No more worries of incompatible plugin versions or confusing security warnings. EJSChart is pure JavaScript and requires no client installation.
• Customizable: Every aspect of the charting display can be configured and customized through well-documented properties and methods. Want to do more than just change the color of the background? Need a series type which doesn't already exist? EJSChart is fully customizable and extendable to provide the greatest flexibility and integration for existing site designs and needs.

Back To Top

Screen Shots

Sample Line Chart Sample Pie Chart Sample Bar Chart Sample Function Chart Sample Area Chart Sample Stacked Chart

FusionCharts Free (3)

DataURL look at a way to use the data source specified chart examples:

<div align="center"> </ div>
<script type="text/javascript">
var chart = new FusionCharts ("../ Charts/FCF_Column2D.swf "," ChartId "," 600 "," 350 ");
chart.setDataURL ( "Data/Column2D.xml");
chart.render ( "chartdiv");
</ script>

The main code is a js script, the first statement and instantiate an object FusionChaets, then use the object setDataURL Ways to specify a chart that contains the chart data as a data source xml document, and finally the use of the object's render method in the id property for chartdiv The div element to generate the chart.

The above-mentioned object constructor and two methods are carried out in the document FusionCharts.js implementation, and therefore contains the above code in the page should contain FusionCharts.js files.

Of course, here Column2D.xml is not a casual the xml document, it required the use of specific tags, attributes and so on, otherwise, the corresponding normal swf file will not be able to resolve and display the chart data.

Column2D.xml look at the contents:

<graph caption='Monthly Unit Sales' xAxisName='Month' yAxisName='Units' decimalPrecision='0' formatNumberScale='0'>
<set name='Jan' value='462' color='AFD8F8' />
<set name='Feb' value='857' color='F6BD0F' />
<set name='Mar' value='671' color='8BBA00' />
<set name='Apr' value='494' color='FF8E46'/>
<set name='May' value='761' color='008E8E'/>
<set name='Jun' value='960' color='D64646'/>
<set name='Jul' value='629' color='8E468E'/>
<set name='Aug' value='622' color='588526'/>
<set name='Sep' value='376' color='B3AA00'/>
<set name='Oct' value='494' color='008ED6'/>
<set name='Nov' value='761' color='9D080D'/>
<set name='Dec' value='960' color='A186BE'/>
</ graph>

Relatively speaking, this kind of xml file content is still relatively easy to understand, and, FusionCharts document provides a chart about the different types of acceptable documents xml tag, attributes, such as reference, see the document "Chart XML Reference "part.

By comparing different types of charts xml data format, may find that apart from funnel plot, K Line, Gantt charts and other special addition to the same category of common chart (such as single sequence of 2D histogram charts, 3D columnar Fig, 2D line chart, 2D pie charts, 3D pie charts, 2D bar charts, 2D area map, 2D circle graph) in xml file formats are similar, so in a specific application, when the need to change the chart type, we only need to js Object of FusionCharts can be re-instantiated, without having to change the xml specific data source. 2D histogram such as the above-mentioned change 2D bar chart, we can use the following function:

<script type="text/javascript">
function changeChartTypeToBar ()
(
chart = new FusionCharts ("../ Charts/FCF_Bar2D.swf "," ChartId "," 600 "," 350 ");
chart.setDataURL ( "Data/Column2D.xml");
chart.render ( "chartdiv");
)
</ script>

At this point, the entire page having to refresh the whole, only need to refresh the chart area. Moreover, it is clear that this is a relatively easy operation, required the attention of:

• Different types of charts xml data source may have a specific xml tags or attributes, so the need to change the chart type, make full use of charts in different types of tags or common property
• Or would like to emphasize that different types of charts have different meanings, although they could easily between different types of conversion charts, but if the chart type selection errors are likely caused by suspected superfluous. Time-series data such as the above, if you use the pie chart may not be appropriate, although the chart is converted to a pie chart is a very easy operation

In addition, the use of graphs dataURL manner specified data source, does not require the actual existence is a physical xml file, a return can be any XML document or fragment of the HTTP request, so that we can in accordance with a specific query or filter convenient expression to retrieve the chart from the database the data needed, first in the charts. Obviously, this way only through the transmission of HTTP requests required POST parameters, At this point, attention is necessary because of special characters FusionCharts for the sensitivity of the object to use FusionCharts in setDataURL designated parameters, the parameter string in the most Do not include good apart from English characters, numbers,?, & and - other than the characters, of course, the best use of Javascript in the escape function of its encoded.