<html>
	<head>
		<title>Chart Removing</title>
		<meta http-equiv="content-type" content="text/html; charset=utf-8">
		<script type="text/javascript" language="javascript" src="./../js/AnyChartStock.js?v=1.9.0r9317"></script>
		<!-- chart size -->
		<style type="text/css">
			#chartContainer {
				width: 800px;
				height: 550px;
			}
		</style>
		<!-- table settings --> 
		<style type="text/css"> 
			table.settings {
				border-style: solid;
				border-width: 1px;
				border-color: #D0CDC9;
			}
 
			table.settings tr th {
				font:normal 60% Verdana;
				background-color: #DCD9D5;
				font-weight:bold;
				padding-bottom:5px;
				padding-top:5px;
				padding-left:10px;
				text-align:left;
			}
			table.settings tr td {
				background-color: #F8F4F0;
				font:normal 70% Verdana;
				padding-bottom:2px;
				padding-top:2px;
				padding-left:10px;
				text-align:left;
				vertical-align:top;
			}
			table.settings input, table.settings select {
				width: 270px;
			}			
		</style> 				
		<script type="text/javascript" language="javascript">
			var chart;
			
			createChart();
			
			// create chart object and write flash object to the page
			function createChart() {
				chart = new AnyChartStock("./../swf/AnyChartStock.swf?v=1.9.0r9317", "./../swf/Preloader.swf?v=1.9.0r9317");
				chart.setXMLFile("config.xml");
				chart.write("chartContainer");
			}
			
			// remove chart object totally and create it again
			function recreateChart() {
				if (chart) chart.dispose();
				chart = null;
				createChart();
				updateButtons("rewriteChartAndFlash");
			}
			
			// remove flash object and write it again
			function rewriteFlash() {
				if (chart) {
					chart.removeFlashObject();
					chart.write("chartContainer");
					updateButtons("rewriteFlash");
				}
			}
			
			// remove flash object only 
			function removeFlashObject() {
				if (chart) {
					chart.removeFlashObject();
					updateButtons("removeFlash");
				}
			}

			// remove flash object and chart object
			function completeRemove() {
				if (chart) chart.dispose(); 
				chart = null;
				updateButtons("removeChartAndFlash");
			}
			
			// buttons states update
			function updateButtons(option){
				switch(option) {
				 	case "removeFlash":
				 		document.getElementById("removeFlash").setAttribute("disabled", "disabled");
				 		document.getElementById("rewriteFlash").removeAttribute("disabled");
				 		document.getElementById("removeChartAndFlash").removeAttribute("disabled");
				 		document.getElementById("rewriteChartAndFlash").removeAttribute("disabled");
				 		break;
				 	case "rewriteFlash":
				 		document.getElementById("removeFlash").removeAttribute("disabled");
				 		document.getElementById("rewriteFlash").removeAttribute("disabled");
				 		document.getElementById("removeChartAndFlash").removeAttribute("disabled");
				 		document.getElementById("rewriteChartAndFlash").removeAttribute("disabled");
				 		break;
				 	case "removeChartAndFlash":
				 		document.getElementById("removeFlash").setAttribute("disabled", "disabled");
				 		document.getElementById("rewriteFlash").setAttribute("disabled", "disabled");
				 		document.getElementById("removeChartAndFlash").setAttribute("disabled", "disabled");
				 		document.getElementById("rewriteChartAndFlash").removeAttribute("disabled");				
				 		break;
				 	case "rewriteChartAndFlash":
				 		document.getElementById("removeFlash").removeAttribute("disabled");
				 		document.getElementById("rewriteFlash").removeAttribute("disabled");
				 		document.getElementById("removeChartAndFlash").removeAttribute("disabled");
				 		document.getElementById("rewriteChartAndFlash").removeAttribute("disabled");
				 		break;
				}
			}
		</script>
	</head>
	<body>
		<table class="settings">
			<tr>
				<td id="chartContainer"><!-- Chart Container --></td>
				<td>
					<table class="settings"> 
						<tr> 
							<th>Removal Options:</th> 
						</tr> 
						<tr> 
							<td><input type="button" value="Remove Flash Object (can rewrite)" onclick="removeFlashObject();" id="removeFlash"></td> 
						</tr> 
						<tr> 
							<td><input type="button" value="Rewrite Flash Object" onclick="rewriteFlash();" id="rewriteFlash"></td> 
						</tr> 
						<tr> 
							<td><input type="button" value="Remove Flash Object and Chart Object" onclick="completeRemove();" id="removeChartAndFlash"></td> 
						</tr> 
						<tr> 
							<td><input type="button" value="Recreate Flash Object and Chart Object" onclick="recreateChart();" id="rewriteChartAndFlash"></td> 
						</tr> 			
					</table>
				</td> 
			</tr>
		</table>
	</body>
</html>

Sample Description

How to use this sample?

Click buttons to the right of the chart to remove it in various ways.

to top

How it works

Understanding removal option is very important if you are going to build not a simple web page with a chart, but the Rich Internet Application. In this case you may want to create various tabs, pages with dynamic layout and so on. Such applications require attention in such question as dynamic page content creation and removal.

If you embed AnyChart Stock Component in your page using AnyChartStock JS Library, which is the most recommended way, you should understand two things: when you create a variable in JavaScript code, for example like this:

chart = new AnyChartStock("AnyChartStock.swf");

JavaScript object of AnyChartStock type is created in the memory, but no actual chart appears on the page and you can even do that when no Flash Player is installed. Then, when needed you use write method to create Flash object with the chart swf and required settings applied and add it to the page DOM, like, for example, this:

chart.write("chartContainer");

As soon as you've done this there are two connected, but separate entities: AnyChartStock Object and Flash Object. (They can be disposed or created separately, but doing so you may loose the ability to work with all interactive features of AnyChart Stock component.)

In the sample you see several options: removing Flash Object only, rewriting Flash object, disposing both Chart and Flash object and recreating them.

So what's the difference between them? For better understanding we have added button states update routine, that disables some buttons, when you click any of them - this is done for demo purposes only, it may help you to understand objects life-cycle. We can't give any direct instruction when and how these options can be used - this depends heavily on application architecture, but we can give some hints:

  • You may need to remove both Chart and Flash object when you reload page content and need to ensure that no junk us left in the memory;
  • You may need to remove Flash object and write it again, when you want to relocate chart from one DOM object to another (say move from tab to tab);
  • Removing Flash object may be used to hide chart temporarily, but it is not recommended, better use Show/Hide Method.

to top

AnyChartStock JavaScript API

This sample uses the following methods, properties and events from AnyChartStock JavaScript API:

Item Type Description
dispose Method Removes all HTML DOM and JavaScript references to the chart.
removeFlashObject Method Removes AnyChart Stock Flash Object from HTML DOM.
setXMLFile Method Sets chart XML configuration file path.
write Method Adds the chart to HTML DOM as a child of the specified container.

to top

Prerequisites

This section lists all configuration, data and auxiliary files required for this sample.

Configuration file

CSV files

SWF files

  • AnyChartStock.swf - AnyChart Stock component.
  • Preloader.swf - AnyChart Stock helper component that loads the main component (AnyChartStock.swf) and displays loading progress.

JavaScript Libraries

  • AnyChartStock.js - A JavaScript library that is shipped with AnyChart Stock component. It is used to embed the component into HTML DOM and to comunicate with the Flash part.

to top

The information contained in this website is for general information purposes only. All sample data provided on this site is for demonstration purposes only.

The logos and names of other companies and products mentioned on this site are copyright and/or trademarks of their respective owners.

The content on this site, including news, quotes, data and other information, is provided for your personal information only, and is intended for demonstration purposes only. Content on this site is not appropriate for the purposes of making a decision to carry out a transaction or trade. Nor does it provide any form of advice (investment, tax, legal) amounting to investment advice, or make any recommendations regarding particular financial instruments, investments or products.

In no event AnyChart will be liable for any loss or damage including without limitation, indirect or consequential loss or damage, or any loss or damage whatsoever arising from loss of data or profits arising out of, or in connection with, the use of this website.

This site may point to other Internet sites that may be of interest to you, however AnyChart does not endorse or take responsibility for the content on such other sites

Market data and News provided by and copyright RediNews, Incorporated.