develop dynamic charts is very easy, which only consists of two files:
chartobject.js: responsible for identifying the type of browser and displaying chart components in the browser, and can define the general settings in the file
Chart.swf: chart components flash files
In addition, you also need a server-terminal file, responsible for downloading the picture data returned to the client server. Here is a jsp example: if you use other server-terminal language, please write the document by your own.
<!-- loading javascript files which are used to load flash charts -->
<script src="chartobject.js" language="javascript"></script>
<!--placeholder, the chart will be loaded into this div-->
<div id="chartcontent"></div>
<script language="javascript">
//format:var so = new SWFObject(id, width, height[, type, data file's path])
var so = new ChartObject("chart1", "400", "300","column","chart1.xml");
//parameters setting:
so.addVariable("cutline_position", "T");
so.addVariable("label_type", "none");
so.addVariable("padding", "5");
// write into the location of placeholder
so.write("chartcontent");
</script>
.....
var so = new SWFObject(id, width, height[, type, data file's path])
create a new chartObject instance, and set into the following parameters:
id - the chart's ID, not repeating if there are a number of charts
width - the width of the chart
height - the height of the chart
type - the type of the chart, by default: column, histogram display
data file' path - the chart data sources from URL, for the chart data file format, please refer to data format definition , if you do not set this parameter, i.e., indicating that the data is acquired in forms of character strings
access to data from the string, which also needs to output to characters with the same XML labels of chart data file's format. For format, refer to the definition of data format . Access to the data string by codes is as follows:
<!-- loading javascript files for loading flash charts-->
<script src="chartobject.js" language="javascript"></script>
<!--placeholder, the chart will be loaded into this div -->
<div id="chartcontent"></div>
<script language="javascript">
function getChartString(id){
if(id=='chart1'){//the page may have several charts, based on the chart's ID, identify and give corresponding data
//directly return to data of string forms
return '<graph title="Unit Sales" column_unit="Product"><row title="Jan" info="">
<column title="Gym shoes"><data unit="Units" title="amount of sales" value="456" alt="456"
info=""/></column></row> <row title="Feb" info=""><column title="Jan"><data value="497"
alt="497" info=""/></column></row><row title="Mar" info=""><column title="Jan"><data
value="639" alt="639" info=""/></column></row><row title="Apr" info="">
<column title="Jan"><data value="610" alt="610" info=""/></column></row>
<row title="May" info=""><column title="Jan"><data value="580" alt="580" info=""/>
</column></row><row title="Jun" info=""><column title="Jan"><data value="683"
alt="683" info=""/></column></row></graph>';
//or specify a page Hidden Field to provide the value
//return document.getElementById("chartData1").value
}
}
var so = new ChartObject("chart1", "400", "300");
//write into the location of the placeholder
so.write("chartcontent");
</script>
<!--page hidden domain, put the data string here to make it look more clearly-->
<textarea style="display:none" id="chartData1">
when inserting charts into the page, you can set some parameters to control the details of the chart. Set statements are:
so.addVariable(Key,value)
For example:
so.addVariable("cutline_position", "T");
so.addVariable("label_type", "none");
so.addVariable("padding", "5");
Another parameter setting statement is addParam (key, value),provided by flash plug-ins, most do not need to set, commonly using the background color.
List of parameters available in the following table. Please refer to demo , in this page you can set the dynamic setting parameters to see the chart effects
Attributes
Statement setting
Range
Default value
Description
alpha
addVariable
0.1-1
0.6
Transparency
bgcolor
addParam
color value,For example "#0000ff"
#ffffff
Background color
border
addVariable
true|false
false
Whether display the border
charset
addVariable
Local language
set the display language of components; by default is local language. If local language is not in the list of available languages, use English
colorindex
addVariable
0-100
0
the beginning num of color and color arrangement of chart elements are from a built-in color table, which can not be changed, but you can change the starting point of the color, thereby changing the color of chart elements
cutline_position
addVariable
B |T |R |BL |BR |TL |TR |RT |RB |none
R
cutline location, options are as follows: at the middle of the bottom, upper middle, middle right side vertical, the lower-left corner, lower right corner, the upper-left corner, the lower-left corner, upper right corner, lower right corner, do not display the cutline
depth
addVariable
0-50
8
set the depth of three-dimensional chart, set to 0 for the plan table
display_title
addVariable
true|false
false
Whether to display the title of the chart
download_path
addVariable
URL
output chart image's dynamic download address is usually not need to set in the Page, whereas it should be one-off setting in chartobject.js
dynamic
addVariable
true|false
true
whether dynamic
endvalue new
addVariable
Number
Coordinates of the maximum value, not set the parameters are automatically calculated according to the appropriate maximum data
label_type
addVariable
value|title|column-title|none|percent
value
notes on the chart, shows the default values, and can display the title of rows or columns, percentages (pie chart), or set to not displaying the notes.
padding
addVariable
0-20
0
spacing around the chart
piemode
addVariable
multilevel|sigle
sigle
pie chart model: can display multi-column data in stacked forms or just display only one level, and can switch between all levels. Uder this mode, the attributes pieindex defines the index of default layer
pieindex
addVariable
0 to the largest index number
0
shows index num at the time of single pie chart
rotation
addVariable
0-90
15
rotation of three-dimensional pie chart by default is 15, set to 0 for the flat pie chart
shadow
addVariable
true|false
false
whether to display the shadow
startvalue new
addVariable
number
Coordinates of the minimum, not to set the parameters are automatically calculated according to the appropriate minimum data
stylecolor
addVariable
hexadecimal color value,For example "0x0000ff"
false
color
swf
setAttribute
flash chart file's name
chart.swf
flash chart file's name do not need to be set in the page, but should be a one-time set in chartobject.js
type_range
addVariable
check: column, columnstack, bar, barstack, lines ,pie ,curve, radar
all
switchable chart types range by default is for all types; if you set the parameters, you can only switch types among the parameter list, parameter type using "," to separate from
xspace
addVariable
1-5
1
for display intervals of non-data coordinates, when the coordinates of non-data is too more that it is closed , you can set the parameter interval shows which by default is one after another, when the show is closed, it will rotate in order to avoid overlap
If you do not set the parameters in the above table, the chart will use the built-in default values, if you do not like these default values, and don't want to respectively set each place for loading the charts, you can set the overall parameters in chartobject.js; In addition, some parameters is more suitable to be set in overall parameter settings, such as swf chart files' path, the download path of the output picture, which are the overall setting, should be a one-time set up in chartobject.js.
the overall settings in chartobject.js, if the page has the same settings, the overall settings will be covered.
relevant content of overall Settings in chartobject.js
...
/** The followings are overall settings for the chart, avoiding individual settings in each separate statement that shows the chart **/
//If the swf chart file's path changes, please change the path
this.setAttribute('swf', 'chart1.swf');
// URL for picture output and download
this.addVariable('server_path','upload.jsp');
/** The following overall settings of the chart's default definition can be changed **/
//this.addVariable("cutline_position","R");//cutline position
//this.addVariable("charset", "en");//language settings
//Other settings ...
/** overall settings finished **/
...
when the chart displayed, you may need to dynamically change the chart data, for example, there may be a list, when the user clicks on the entry list, the chart data changes in sequence but the page doesn't refresh. Dynamic changing of the chart data also has two ways based on dynamic URL and character strings; however, it is better use the dynamic URL, because the output of many different chart data in forms of character string to the page makes the page very large, very slow to open.
flash chart components have three ways to be changed by javascript's calls :
setChartXML(xml_URL) - transmission of new dynamic or static XML address to the chart component
setChartString(xml_String) - transmission of new data character string to the chart
setChartVariables(key,value) - pass parameters to change the chart
example:
<html>
<head>
<title>Dcharts</title>
</head>
<script src="chartobject.js" language="javascript"></script>
<body>
<div id="chartcontent"> here insert chart </div><br>
<!--use the chart's method of setChartXML input a new data file address-->
<button onclick="document.getElementById('chart1').setChartXML('chart1.xml')">chart data 1</button>
<!--use the chart's method of setChartXML input a dynamic data file address-->
<button onclick="document.getElementById('chart1').setChartXML('getchartdata.jsp?id=2')">
Second chart data </button>
<!--use the chart's method of setChartXML input a XML string -->
<button onclick="document.getElementById('chart1').setChartString(document.getElementById('data3')
.value)"> chart data three </button>
<div id="chartcontentpie"> here insert chart </div>
<script language="javascript">
// insert a column chart
var so = new ChartObject("chart1", "400", "250","column","chart1.xml");
so.addVariable("padding", "2");
so.write("chartcontent");
//insert a pie chart
var sopie = new ChartObject("chart2", "400", "250","pie","chart2.xml");
sopie.write("chartcontentpie");
// change the pie chart's displaying level
function changePie(index){
document.getElementById('chart2').setChartVariables('pieindex',index);
}
</script>
<!--use the chart's method of setChartVariables input parameter to change the chart. The following examples demonstrate the dynamic changes in the display layer of pie chart.
-->
<button onclick="changePie(1)">change the pie chart's displaying layer as 1</button>
<button onclick="changePie(2)">change the pie chart's displaying layer as 2</button>
<button onclick="changePie(3)">change the pie chart's displaying layer as 3</button>
<!--hidden field provides data in forms of strings-->
<textarea id="data3" style="display:none">
<graph title="Area of sale report" column_unit="Mouth" value_prefix="$">
<row title="North America" info="">
<column title="Jan">
<data unit="US$ 1000" title="amount of sales" value="48.27" alt="US$ 48.27 thousand" info=""/>
<data unit="piece" title="volume of sales" value="50" alt="" info=""/>
</column>
<column title="Feb">
<data unit="US$ 1000" value="54.8" alt="" info=""/>
<data unit="piece" value="259" alt="" info=""/>
</column>
<column title="Mar">
<data unit="US$ 1000" value="55.82" alt="15.82ÍòÔª" info=""/>
<data unit="piece" value="168" alt="" info=""/>
</column>
<column title="Apr">
<data unit="US$ 1000" value="42.2" alt="" info=""/>
<data unit="piece" value="506" alt="" info=""/>
</column>
</row>
<row title="Asia" info="">
<column title="Jan">
<data unit="US$ 1000" value="47.2222" alt="5" info=""/>
<data unit="piece" value="231" alt="" info=""/>
</column>
<column title="Feb">
<data unit="US$ 1000" value="44.8" alt="" info=""/>
<data unit="piece" value="129" alt="" info=""/>
</column>
<column title="Mar">
<data unit="US$ 1000" value="51" alt="15.82" info=""/>
<data unit="piece" value="138" alt="" info=""/>
</column>
<column title="Apr">
<data unit="US$ 1000" value="32.2" alt="" info=""/>
<data unit="piece" value="236" alt="" info=""/>
</column>
</row>
</graph>
</textarea>
</body>
</html>
List of available parameters:
Attributes
Range
Description
chartAlpha
0.1-1
Transparency
bgColor
hexadecimal color value,For example "0x0000ff"
Background color
colorIndex
0-100
the beginning num of color and color arrangement of chart elements are from a built-in color table, which can not be changed, but you can change the starting point of the color, thereby changing the color of chart elements
cutline_position
B |T |R |BL |BR |TL |TR |RT |RB |none
cutline location, options are as follows: at the middle of the bottom, upper middle, middle right side vertical, the lower-left corner, lower right corner, the upper-left corner, the lower-left corner, upper right corner, lower right corner, do not display the cutline
depth
0-50
set the depth of three-dimensional chart, set to 0 for the plan table
displayTitle
true|false
Whether to display the title of the chart
isDynimic
true|false
whether dynamic
graphtitle
value|title|column-title|none|percent
notes on the chart, shows the default values, and can display the title of rows or columns, percentages (pie chart), or set to not displaying the notes.
padding
0-20
spacing around the chart
pieindex
0 to the largest index number
shows index num at the time of single pie chart
rot
0-90
rotation of three-dimensional pie chart by default is 15, set to 0 for the flat pie chart
shadow
true|false
whether to display the shadow
styleColor
hexadecimal color value,For example "0x0000ff"
flash chart file's name do not need to be set in the page, but should be a one-time set in chartobject.js
xspace
1-5
for display intervals of non-data coordinates, when the coordinates of non-data is too more that it is closed , you can set the parameter interval shows which by default is one after another, when the show is closed, it will rotate in order to avoid overlap
in addition to the chart's own user interactions, we sometimes want to trigger or use external contents when clicking the chart element. The Dcharts (dynamic charts) provide an javascript method for external calls: When you click a chart element, if the element has info attributes ( please refer to the data format definition ), then the property will be sent to the setInfo() method on the page. In this method, you can write the operation you need, such as opening links, refresh another chart, change the value of a certain domain, or only popping up noticing messages. Examples are as follows:
id - the chart's ID, not repeating if there are a number of charts
info -the info attributes of XML element
type - element type , 1:row , 2:column , 3:data
index -
example:
<html>
<head>
<title>Dcharts</title>
</head>
<script src="chartobject.js" language="javascript"></script>
<body>
<div id="chartcontent">here insert chart </div>
<script language="javascript">
//to achieve interaction, there must be setInfo methods on the page, click on the chart will send message to it
function setInfo(id,info,type,index){
if(id=="chart1"){//if there are a number of chart pages, you need to identify on basis of their ID
//here add processing statement
alert("id:"+id+" info:"+info+" type:"+type+" index:"+index);
}
}
var so = new ChartObject("chart1", "400", "250","column","chart1.xml");
so.addVariable("padding", "2");
so.write("chartcontent");
</script>
</body>
</html>
Bookmark/Search this post with:
Copyright 2003 - 2008 OriginSoft Components Inc. All rights reserved.
Home
Instruction
Dataformat
Developer Guide
Demo
Download
