Using events

If you check this example, you will notice that both charts contain bullets. You can roll over the bullets to see their description, and they can also be linked to some web page.

For a better understanding of events, check the examples/events example from a downloaded package.

Event bullets are added using XML code. You can place this code directly inside the data_set tag of the settings file, or you can have a separate file just for the events code.

<data_sets>
   <data_set>
      <events>
         .............
      </events>
      .............
      <events_file_name>events.xml</events_file_name>

Like data and settings files, the events file can be generated dynamicaly, and you can use any extension. It is only important that it outputs XML data.

The structure of the events XML code is simple:

<events>
   <event>
      .......
   </event>

   <event>
      .......
   </event>

   <event>
      .......
   </event>
</events>

As you see, you simply add an <event> section for every event.

Available event settings

<event eid="0">
   <chart_id>second</chart_id>
   <graph_id>volume</graph_id>
   <y_axis>right</y_axis>
   <date>2007-01-16</date>
   <bullet>pin</bullet>
   <color></color>
   <text_color></text_color>
   <border_color></border_color>
   <border_alpha>50</border_alpha>
   <letter></letter>
   <description><![CDATA[Dividends]]></description>
   <axis>true</axis>
   <size>12</size>
   <value>80</value>
   <percent_value>-6</percent_value>
</event>

Setting	Available values	Default value	Description
eid (attribute of <event>)	Numer or string	none	The event id (eid) is passed to a Javascript function when you roll over or click on an event bullet. If you are not using this, you can leave out this attribute.
<chart_id>	Number or string	cid of the first chart	As there can be any number of charts, you have to specify the chart_id. If the chart_id is not specified, the event is assigned to the first chart. The chart_id can be set in the settings file, as the cid attribute: <chart cid="first">. If you don't set the cid for the chart, the cid is assigned automatically, sequentially, starting from 0.
<graph_id>	Number or string	gid of the first graph	As there can be any number of graphs, you have to specify the graph_id. If the graph_id is not specified, the event is assigned to the first graph. The graph_id can be set in the settings file, as the gid attribute: <graph gid="first"> If you don't set the gid for the graph, the gid is assigned automatically, sequentially, starting from 0.
<y_axis>	Right/left	left	The Y axis that will be used to place a horizontal line event.
<date>	Date tag	none	Date of the event. You have to use the same date format as set in data_set settings.
<bullet>	sign, flag, pin, round, square, round_outlined, square_outlined, round_outline, square_outline, horizontal_line, vertical_line, horizontal_line_dashed, vertical_line_dashed	As set in <settings><charts><chart><events><bullet>	The shape of the bullet. Only the sign, flag and pin bullets can display letters inside them.
<color>	hex color code	As set in <settings><charts><chart><events><color>	The color of a bullet.
<border_color>	hex color code	As set in <settings><charts><chart><events><border_color>	The color of a bullet border.
<border_alpha>	Number, in percent	As set in <settings><charts><chart><events><border_alpha>	The opacity of a bullet border.
<text_color>	hex color code	As it is set in <settings><charts><chart><events><text_color>	Color of a letter inside the bullet.
<letter></letter>	String	none	The letter which will be displayed in a bullet (only if you use sign, flag or pin bullets).
<description>	Text	none	The description of an event. It will be displayed in the balloon when the viewer rolls over the bullet.
<url>	web page address	none	The address of a web page where the viewer will sent if he clicks on the bullet.
<axis>	true/false	false	If this is set to true, the event bullet will be placed on the axis, instead of on the graph line.
<size>	Number	12	The size of a bullet, in pixels.
<value>	Number	none	The Y axis coordinate of the event. If this is not set, the event will be displayed on the graph line itself.
<percent_value>	Number	none	The Y axis coordinate of the event, if the graph values have been recalculated to percent.

Events and JavaScript

When the chart viewer rolls over the event bullet, the following Javascript command is called:

amRolledOverEvent(date, description, id, url)

When the chart viewer clicks on an event bullet, the following Javascript command is called:

amClickedOnEvent(date, description, id, url)

The ID passed to these functions is the "eid" attribute of an event.

These functions can be useful in various cases, for example if instead of showing the event description in the balloon, you want to have a separate area for news on your page.

There are two JS functions that can be used to show or hide an event:

flashMovie.showEvents()

and

flashMovie.hideEvents()