This series of articles is the tutorial on the open flash chart official website.
I recently wanted to build a monitoring system, so I used the open flash chart (OFC) Flash drawing tool to draw some charts. After following the tutorials on its official website step by step, I found it useful. So I will translate the tutorials on its official website and recommend them to you.
Address: http://teethgrinder.co.uk/open-flash-chart-2/tutorial.php
Tutorial 1: How does it work?
In this tutorial, we will show you how to display such a chart on your webpage.
Here I have taken an image to show you that the real chart is interactive with the mouse moving.
1: Install OFC
Before we start, you should first download the OFC compressed package.
Here: http://teethgrinder.co.uk/open-flash-chart-2/downloads.php, download the zip package.
Decompress the. ZIP file into the version-2directory and copy the open-flash-chart.swf file to the root directory of your web directory (in fact, any directory is acceptable, as long as you write the correct path when using it, but here we want to facilitate, put it in the root directory ).
2: Start Encoding
Create a new chart.html file under your webroot directory and copy the following code.
View plaincopy to clipboardprint?
<HTML>
<Head>
</Head>
<Body>
<P> Hello World </P>
<Object classid = "CLSID: d27cdb6e-ae6d-11cf-96b8-444553540000"
Codebase = "http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0"
Width = "500"
Height = "250" id = "Graph-2" align = "Middle">
<Param name = "allowScriptAccess" value = "samedomain"/>
<Param name = "movie" value = "open-flash-chart.swf"/>
<Param name = "quality" value = "high"/>
<Embed src = "open-flash-chart.swf" mce_src = "open-flash-chart.swf"
Quality = "high"
Bgcolor = "# ffffff"
Width = "500"
Height = "250"
Name = "open-flash-Chart"
Align = "Middle"
AllowScriptAccess = "samedomain"
Type = "application/X-Shockwave-flash"
Pluginspage = "http://www.macromedia.com/go/getflashplayer"/>
</Object>
</Body>
</Html>
<HTML>
<Head>
</Head>
<Body>
<P> Hello World </P>
<Object classid = "CLSID: d27cdb6e-ae6d-11cf-96b8-444553540000"
Codebase = "http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0"
Width = "500"
Height = "250" id = "Graph-2" align = "Middle">
<Param name = "allowScriptAccess" value = "samedomain"/>
<Param name = "movie" value = "open-flash-chart.swf"/>
<Param name = "quality" value = "high"/>
<Embed src = "open-flash-chart.swf" mce_src = "open-flash-chart.swf"
Quality = "high"
Bgcolor = "# ffffff"
Width = "500"
Height = "250"
Name = "open-flash-Chart"
Align = "Middle"
AllowScriptAccess = "samedomain"
Type = "application/X-Shockwave-flash"
Pluginspage = "http://www.macromedia.com/go/getflashplayer"/>
</Object>
</Body>
</Html>
When you open this page, you will see the following content: Example 1 may contain an error.
At this time, we only told it to display an OFC chart, but we didn't tell it what data to display.
3: Data
Below we will provide some data for it. OFC reads data in JSON format. You should know the JSON format. It doesn't matter. You just need to copy the following code to a new file and name it data. JSON, also saved to the Web root directory.
View plaincopy to clipboardprint?
{
"Title ":{
"Text": "plain data lines ",
"Style": "{font-size: 20px; color: # 0000ff; font-family: verdana; text-align: center ;}"
},
"Y_legend ":{
"Text": "Open flash Chart ",
"Style": "{color: # 736aff; font-size: 12px ;}"
},
"Elements ":[
{
"Type": "bar ",
"Alpha": 0.5,
"Color": "# 9933cc ",
"Text": "page views ",
"Font-size": 10,
"Values": [, 7]
},
{
"Type": "bar ",
"Alpha": 0.5,
"Color": "# cc9933 ",
"Text": "page views 2 ",
"Font-size": 10,
"Values": [6, 7, 9, 5, 7, 6, 9, 7, 3]
}
],
"X_axis ":{
"Stroke": 1,
"Tick_height": 10,
"Color": "# d000d0 ",
"Grid_colour": "#00ff00 ",
"Labels ":{
"Labels": ["January", "February", "March", "0000l", "may", "June", "July", "August ", "spetember"]
}
},
"Y_axis ":{
"Stroke": 4,
"Tick_length": 3,
"Color": "# d000d0 ",
"Grid_colour": "#00ff00 ",
"Offset": 0,
"Max": 20
}
}
{
"Title ":{
"Text": "plain data lines ",
"Style": "{font-size: 20px; color: # 0000ff; font-family: verdana; text-align: center ;}"
},
"Y_legend ":{
"Text": "Open flash Chart ",
"Style": "{color: # 736aff; font-size: 12px ;}"
},
"Elements ":[
{
"Type": "bar ",
"Alpha": 0.5,
"Color": "# 9933cc ",
"Text": "page views ",
"Font-size": 10,
"Values": [, 7]
},
{
"Type": "bar ",
"Alpha": 0.5,
"Color": "# cc9933 ",
"Text": "page views 2 ",
"Font-size": 10,
"Values": [6, 7, 9, 5, 7, 6, 9, 7, 3]
}
],
"X_axis ":{
"Stroke": 1,
"Tick_height": 10,
"Color": "# d000d0 ",
"Grid_colour": "#00ff00 ",
"Labels ":{
"Labels": ["January", "February", "March", "0000l", "may", "June", "July", "August ", "spetember"]
}
},
"Y_axis ":{
"Stroke": 4,
"Tick_length": 3,
"Color": "# d000d0 ",
"Grid_colour": "#00ff00 ",
"Offset": 0,
"Max": 20
}
}
OFC can have many methods to obtain data. One of the methods is URL, which is to tell it to retrieve data through a link.
Now we can open chart.html through the browser and add a parameter to it, "? OFC = data. JSON ", at this time your link should look like this: http://example.com/chart.html? OFC = data. JSON
You should see a chart like this: Example 2
4: Congratulations, you have succeeded.
It's that simple. In this way, a simple chart is displayed.
You can edit the data. JSON file to display your data. Edit "values": [, 7.
You will find that manual editing of such data formats is prone to errors. Therefore, in tutorial 3, we will use PHP APIs to write JSON data.
5. Notes
The OFC parameter in the URL is not unique and can coexist with other parameters on the page. Like this: http://example.com/chart.html? X = 1 & OFC = data. JSON & Y = 2
You can place the data. JSON file elsewhere in the web directory and specify the path in the URL. Like this: http://example.com/chart.html? OFC = ../stuff/../data. JSON
URL encoding is required for the path and file name of the parameter ).
Briefly summarize what it has done:
The browser requests the chart.html File
It finds the falsh tagand then requests the Flash file open-flash-chart.swf.
OFC finds the specified data file in the URL and reads the data.
OFC reads data in JSON format and displays the data.
This article from the csdn blog, reproduced please indicate the source: http://blog.csdn.net/huguohuan/archive/2011/01/23/6160306.aspx
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
