JavaScript Sample Implementation
If you want to create chart with dynamic XML you can use DHTML.
With AnyChart you can create DHTML pages that will have full control over the chart visualisation and chart data.
All you need to know is how to call setXMLText and setXMLData functions.
Below you can see the step by step tutorial that will explain you how to create such pages:
Create a web page
First you need to create html page as described in "How to create a simple chart and embed it into a web page?".
Lets call it JavaScript.html.
Then modify flash embedding code as show below, these attributes will allow javaScript to communicate with swf.
<html>
<head><title>AnyChart Sample</title></head>
<body>
<object
classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0"
width="550" height="400" align="middle" id="anychart">
<param name="allowScriptAccess" value="always"/>
<param name="allowNetworking" value="all" />
<param name="movie" value="./swf/2DColumn.swf" />
<param name="quality" value="high" />
<param name="bgcolor" value="#ffffff" />
<embed name = "anychart" src="./swf/2DColumn.swf" quality="high" bgcolor="#ffffff" width="550" height="400" align="middle" allowScriptAccess="always" allowNetworking="all" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
</object>
</body>
</html>
|
Choosing Chart data and its visual style
As we are creating a chart we need some data for it.
To transmit data to AnyChart component we need an XML, like that:
<?xml version="1.0"?>
<root>
<type>
<chart type='2DColumn' maximum_value='140'>
<hints auto_size='yes'/>
</chart>
<workspace>
<name text='sample'/>
<chart_area y='30'/>
</workspace>
</type>
<data>
<block>
<set value='90' color='0xAFD8F8'/>
<set value='95' color='0xF6BD0F'/>
<set value='91' color='0x8BBA00'/>
<set value='65' color='0xA66EDD'/>
<set value='88' color='0xF984A1'/>
</block>
</data>
</root> |
Now copy the above code, open source.xml in any plain text editor and paste code there.
SWF and JavaScript interaction.
Then create <form> with textarea for XML content and buttons to call the functions.
|
<form name='test' >
<textarea name='XMLTextForm' cols='50' rows='10'></textarea>
<input type='button' value='Update chart' onClick='ShowChart()'>
<input type='button' value='Update data' onClick='ShowData()'>
<input type='button' value='Get XML' onClick='GetXML()'>
<input type='hidden' name='xmlTest'>
</form>
|
The following script allows to get XML document from server and set XML data and (or) styles to AnyChart:
|
<script language='JavaScript'>
function thisMovie(movieName)
{
if (navigator.appName.indexOf ("Microsoft")!=-1)
{
return window[movieName]
} else
{
return document[movieName]
}
}
function ShowChart()
{
document.forms["test"].elements["xmlTest"].value = document.forms["test"].elements["XMLTextForm"].value;
XML = document.forms["test"].elements["xmlTest"].value;
thisMovie("anychart").SetXMLText(XML);
}
function ShowData()
{
document.forms["test"].elements["xmlTest"].value = document.forms["test"].elements["XMLTextForm"].value;
XML = (document.forms["test"].elements["xmlTest"].value);
thisMovie("anychart").SetXMLData(XML);
}
function getXML()
{
document.forms["test"].elements["XMLTextForm"].value = "loading...";
var xmlhttp=false;
/*@cc_on @*/
/*@if (@_jscript_version >= 5)
// JScript gives us Conditional compilation, we can cope with old IE versions.
// and security blocked creation of the objects.
try {
xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
} catch (E) {
xmlhttp = false;
}
}
@end @*/
if (!xmlhttp && typeof XMLHttpRequest!='undefined') {
try {
xmlhttp = new XMLHttpRequest();
} catch (e) {
xmlhttp=false;
}
}
if (!xmlhttp && window.createRequest) {
try {
xmlhttp = window.createRequest();
} catch (e) {
xmlhttp=false;
}
}
xmlhttp.open("GET", "anychart.xml",true);
xmlhttp.onreadystatechange=function() {
if (xmlhttp.readyState==4) {
document.forms["test"].elements["XMLTextForm"].value = xmlhttp.responseText;
}
}
xmlhttp.send(null)
}
</script>
|
function getXML() retreives anychart.xml file from server and sets its content to XMLTextForm text area.
When you click on 'Get XML' button this function is called and content of XML document 'source.xml' is loaded into text area.
function ShowData() refreshes only <data> (set values and names) leaving chart visualisation intact.
When you click on 'Update data' button this function is called and ONLY chart data is updated.
Note: if you will call this function before calling ShowChart() nothing will happen - data can't be displayed without visualisation settings.
function ShowChart() refreshes chart.
When you click on 'Update chart' button this function is called and ALL the chart elements are updated.
Final
Now we should launch our html page in a web browser
Look how it works: JavaScript sample
|
