Controlling charts with JavaScript

You can use JavaScript commands to control the chart. This allows you to create a way for your viewers to manipulate the chart from the web page, as well as to retrieve some information from the chart, so you can synchronize another element of the page with the chart.

For example, visit this page and move the chart scroller. You will notice that the input fields "from" and "to" (below the chart) change the years to the ones which are selected on the chart. When you change the selected period on the chart, the JavaScript function amGetZoom(chart_id, from, to) is called, and it updates the input field values. You can also change the dates in these fields manualy, and hit the "Show" button - the chart will change the seleted period. For more examples, visit this page. You will see that you can do various things, such as reload data or settings, set and get data, or separate settings. In every amCharts package's examples folder you will find the js_example.html file, which has more examples (all available JS functions are listed there).

Please Note: Javascript controls will only work once you have uploaded the files to your web server - they will not work if you are viewing the chart on your hard drive.

JS functions are cued. You may call several JS functions at a time, without waiting for the previous one to finish. All called functions will be executed in turn.

Before you can start controlling the chart with JavaScript, the SWF, settings and data files must be fully loaded. When the chart is loaded, it calls a JavaScript function:

amChartInited(chart_id)

The chart_id is useful only if you have more than one chart on a page and need to know which chart is initialized. This chart_id variable must be set in the HTML, by adding the following line to the source (somewhere above the so.write(flashcontent) line):

so.addVariable("chart_id", "chart1");

The "chart1" is an ID, which can be any number/letter combination, and must be unique for every chart on the page. When the amChartInited function is called, it receives this chart_id variable. To reduce confusion, you can use the same ID as your Flash object's. The Flash object ID is set in the following line, the second parameter:

var so = new SWFObject("../amline/amline.swf", "chart1", "1250", "700", "8", "#FFFFFF");

When this function is called, you should get the Flash object into a variable, so you can use it to call functions when controlling the chart. Here is the function to do it:

function amChartInited(chart_id){
  flashMovie = document.getElementById(chart_id);
}

Note that if your Flash object ID is not the same as your chart_id variable, this won't work, and you will have to use the getElementById function with the real Flash object ID.

In order to be sure that you got the Flash object, try to alert the flashMovie variable, by adding alert(flashMovie) into this function. Now, the message with the text [object] should pop up when you refresh your browser.

For advanced users: If you have more than one chart on a page, you should get every Flash object into a separate variable. You can create an object and assign instances to its properties:

var flashMovie = new Object();
 
function amChartInited(chart_id){
   flashMovie[chart_id] = document.getElementById(chart_id);
}

After you have got the Flash object into the variable (flashMovie), you can start controlling your chart. Let's examine the example with the scroller. Right after the chart is loaded, it selects the period from 1972 to 1986. To do this, you need to call the function flashMovie.setZoom("1972", "1986"). This function must be called right after the chart is initialized. Here is the code:

<script type="text/javascript">
function amChartInited (chart_id){
   flashMovie = document.getElementById("amline");
   flashMovie.setZoom("1972", "1986");
}
</script>

As you may have noticed, when you change the selected period on the chart by dragging the scroller or selecting a period with a mouse, the numbers in the "from" and "to" fields are changed too. When you change the period, Flash calls the JavaScript function amGetZoom(chart_id, from, to). This function can set the "from" and "to" field values to the received ones:

<script type="text/javascript">
function amGetZoom(chart_id, from, to){
   document.getElementById("from").value = from;
   document.getElementById("to").value = to;
} 
</script>