Open-flash-chart and FusionCharts Free

 

Open-flash-chart

This is an open-source Flash report component that can be used for free and can be modified by the source code (OFC ).

Ofc version:

Currently, the latest version of open-flash-chart is 2.0bate. version 1.9 is relatively stable.

1.9 is written in actionscript2.0, 2.0 is written in acrionscript3.0, Adobe Flex is compiled, and 2.0 supports Json data transmission.

Download open flash chart,

The downloaded directory structure is as follows:

Where:

Data-files are some Data files. They are all txt files with json Data.

Dot-net-library... and the following php... Python and so on are the demos of these prefix languages. What we want to study is the content in the dot-net-library ..

It comes with vs2003 development .. no error will occur when you upgrade to vs2008.

There are basically some basic demos.

The effects of some images are as follows:

The code for generating these charts is relatively simple, mainly because it is difficult to transmit some data.

Js files to be used:

<script type="text/javascript" src="swfobject.js"></script><script type="text/javascript">swfobject.embedSWF("open-flash-chart.swf", "my_chart", "550", "200","9.0.0", "expressInstall.swf",{"data-file":"datafile/glassbar.aspx"});</script>

Glassbar. aspx

This file is passed to some json data. You can specify a txt json file here. Because ofc supports json data in 2.0, the json data format is roughly as follows:

{ "title": { "text": "Bar Chart", "style": "{font-size: 20px; color:#0000ff; font-family: Verdana; text-align: center;}" }, "x_axis": { "labels": { "steps": 1 }, "offset": false, "steps": 1, "3d": 0 }, "y_axis": { "tick-length": 0, "offset": 0, "steps": 3, "min": 0, "max": 24, "3d": 0 } }

The ofc function is still very powerful, but I feel that the interface is not very dazzling, so I went on to explore the next chart.

FusionCharts Free

This control can also be a very rich chart component that can be used free of charge (in fact, it is a chargeable drop, when a free chart is generated, there will be a company's picture link, very annoying, however, FCF is a cross-platform chart component that supports multiple languages.

About version

The latest version is V3.0.

It's an English website. You can find the corresponding Download and then find the corresponding language you are using.

Click Download .. The Demo of the downloaded file is also comprehensive.

The reason why fcf can be cross-platform and cross-language .. because his database transmission is generic xml, he only supports xml transmission of data .. xml format requirements are relatively high. that is, if a node is wrong, the image may not be displayed, Which is annoying .. of course, there is nothing to say about the functional effects .. it's amazing ..

The required files are as follows:

Wait until a total of 49 files are cracked. Actually, you need to use those files.

FusionCharts. js is also a very important file ..

In fact, the above flash is also a template ..

Next let's take a look,

Wait... in short, the animation effect of fcf looks very comfortable ..

And the code page is very simple ..

Introduce js files:

<script src="JSClass/FusionCharts.js" type="text/javascript"></script><script type="text/javascript">var myChart = new FusionCharts("/Charts/Column3D.swf", "myChartId", "600", "500");myChart.setDataURL("data.xml");myChart.render("chartdiv");</script>

Falsh template path:/Charts/Column3D.swf

Xml data source: "data. xml"

Div id on the page: ("chartdiv ");

In this way, a column chart is implemented, which is highly scalable. xml data can be written directly in:

MyChart. setDataXML (strXML );

StrXml is a piece of XML data... replace myChart. setDataURL ("data. xml") with this section.

Some common attributes of FCF are sorted online:

Features 

Whether the animation display data of animation. The default value is 1 (True)

Whether showNames displays the horizontal axis (X axis) label name

Whether to rotate the display label of rotateNames. The default value is 0 (False ).

Whether showValues displays the corresponding data value in the chart. The default value is 1 (True)

YAxisMinValue specifies the minimum value and number of the vertical axis (Y axis ).

YAxisMaxValue specifies the minimum value and number of the vertical axis (Y axis ).

ShowLimits: whether to display the chart limit value (maximum and minimum values of Y axis). The default value is 1 (True)

Chart title and axis name

Caption chart title

SubCaption subtitle

XAxisName horizontal axis (X axis) Name

YAxisName vertical axis (Y axis) Name

Chart and canvas Style

BgColor chart background color, 6-digit hexadecimal color value

CanvasBgColor canvas background color, 6-digit hexadecimal color value

CanvasBgAlpha canvas transparency, [0-100]

CanvasBorderColor canvas border color, 6-digit hexadecimal color value

CanvasBorderThickness canvas Border thickness, [0-100]

ShadowAlpha projection transparency, [0-100]

Whether showLegend displays the series name. The default value is 1 (True)

Font attributes

BaseFont chart Font Style

BaseFontSize chart font size

BaseFontColor chart font color, 6-digit hexadecimal color value

Font Style other than outCnvBaseFont chart canvas

OutCnvBaseFontSize font size outside the chart canvas

Font color other than the outCnvBaseFontColor chart canvas, 6-digit hexadecimal color value

Partition line and grid

Number of horizontal partition lines in the numDivLines canvas, numbers

DivLineColor horizontal partition line color, 6-digit hexadecimal color value

DivLineThickness horizontal partition line thickness, [1-5]

DivLineAlpha horizontal partition line transparency, [0-100]

Whether the showAlternateHGridColor is in an alternating color on the horizontal grid. The default value is 0 (False)

AlternateHGridColor horizontal grid with alternating color, 6-digit hexadecimal color value

Transparency of the alternateHGridAlpha transverse mesh band, [0-100]

ShowDivLineValues: whether to display the Div row value. Default Value ??

NumVDivLines, number of lines in the vertical partition inside the canvas

VDivLineColor vertical partition line color, 6-digit hexadecimal color value

VDivLineThickness, vertical partition line thickness, [1-5]

VDivLineAlpha vertical partition line transparency, [0-100]

Whether the showAlternateVGridColor is in an alternating color on the vertical grid. The default value is 0 (False)

AlternateVGridColor alternating color of the vertical mesh, 6-digit hexadecimal color value

Transparency of the alternateVGridAlpha longitudinal mesh belt, [0-100]

Number Format

NumberPrefix

NumberSuffix adds the numeric suffix % to '% 25'

FormatNumberScale: whether to format a number. The default value is 1 (True). It automatically adds K (K) or M (million) to your number. If it is 0, K or M is not added.

DecimalPrecision specifies the number of decimal places. [0-10] For example, = '0' indicates the integer.

DivLineDecimalPrecision specifies the number of decimal places in the horizontal partition line value, [0-10]

LimitsDecimalPrecision specifies the number of decimal places of the maximum and minimum values of the Y axis, [0-10]

FormatNumber separated by commas (,). The default value is 1 (True). If the value is 0, no separator is used.

DecimalSeparator specifies the decimal separator. The default value is '.'

ThousandSeparator specifies the thousands separator. The default value is ','

Tool-tip/Hover title

Showhovercap indicates whether to display the hover box. The default value is 1 (True)

HoverCapBgColor indicates the background color of the frame, which is a 6-bit hexadecimal color value.

HoverCapBorderColor indicates the frame border color, which is a 6-bit hexadecimal color value.

HoverCapSepChar specifies the delimiter between the value in the hover box and the value. The default Delimiter is ','

Line chart Parameters

LineThickness line thickness

AnchorRadius line node radius, number

AnchorBgAlpha line node transparency, [0-100]

AnchorBgColor line node fill color, 6-digit hexadecimal color value

AnchorBorderColor line node border color, 6-digit hexadecimal color value

Set tag Parameters

Value

Color

Link (this window opens [Url], a new window opens [n-Url], and the JS function [JavaScript: function] is called)

Name horizontal axis label name

This article briefly introduces the two chart components. In the next article, I will focus on FusionCharts Free, because the effects of this chart are still dazzling ..

For more information, visit Xiaogang's blog.