Advanced JavaScript Event Handling in Visifire Charts
karthikHave a look at the previous blog to get an idea of how to attach event. In this blog I’ll be showing the different ways in which events can be attached.
Create a chart using the Chart Designer or refer Documentation on how to create it. You can work on the events from the chart designer itself.
Lets start by attaching an alert to the DataPoint for MouseLeftButtonUp event. JS events have to be attached as shown in the following code. Here I have written the code for the alert box within the attachEvent function itself.
<script type="text/javascript">
var vChart1 = new Visifire('Visifire.xap', 500,300);
vChart1.setDataUri("Data.xml");
// Event is attached here
vChart1.attachEvent("DataPoint","MouseLeftButtonUp","alert('Event Fired');");
vChart1.render("VisifireChart0");
</script>
If you save and refresh the HTML page you’ll see the chart. Just click on any DataPoint and you’ll see the alert box.
Click on the image below to see live demo:
Let me show few other ways in which the same thing can be achieved. The attachEvent function accepts the callback function code in the form of string or you can pass the function itself.
Other than writing the JS code for the event within the attachEvent function, you can also pass the callback function. The following code shows the callback function that I’ll be using.
<script type="text/javascript">
function callBack(e)
{
alert("Event Fired");
}
</script>
You can pass the function name while attaching events as shown below:
// Attaching events
vChart1.attachEvent("DataPoint","MouseLeftButtonUp","callBack");
or you can pass the function itself:
// Attaching events
vChart1.attachEvent("DataPoint","MouseLeftButtonUp",callBack);
You can attach the same callback function for multiple elements and multiple times. See the example below. Here I have attached the alert function twice to DataPoint.
// Attaching events
vChart1.attachEvent("DataPoint","MouseLeftButtonUp",callBack1);
vChart1.attachEvent("DataPoint","MouseLeftButtonUp",callBack2);
The functions will be called in the order in which they were attached to the element. There are six elements (AxisX, AxisY, Chart, DataPoint, Legend, Title) to which any of the five supported JS events can be attached (MouseLeftButtonUp, MouseLeftButtonDown, MouseMove, MouseEnter and MouseLeave). You can attach these events to any of the elements in the list in any combination, any number of times.
In the following example, I have attached an alert to DataPoint and for Title and Legend I have attached a callback function.
// Alert is written within the attachEvent function
vChart1.attachEvent("DataPoint","MouseLeftButtonUp","alert('DataPoint');");
// CallBack function name is passed as a string
vChart1.attachEvent("Title","MouseLeftButtonDown","callBack");
// CallBack function is passed as a parameter
vChart1.attachEvent("Legend","MouseLeftButtonUp",callBack);
code for the callback function that I have used in the example:
<script type="text/javascript">
function callBack(e)
{
alert(e.Element);
}
</script>
Click on the image to see the live demo:
For more information please have a look at the Visifire Documentation.
You can download the samples here.
Comments(3)
