Advanced JavaScript Event Handling in Visifire Charts

admin

Have 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:

image

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:

image

For more information please have a look at the Visifire Documentation.

You can download the samples here.


Comments

  1. May 29th, 2008 | 10:06 am

    Great first attemtpt..does this support drill downs and charts with multiple axes (x and y)? If not, any ideas on when it is planned for?

  2. June 4th, 2008 | 10:12 am

    1 .Does this support drill downs?

    Yes it supports drill downs. You can easily do it using Events.

    2. Multiple axes (x and y)?

    Yes it is coming within a fortnight.

  3. September 22nd, 2008 | 9:16 am

    well done, bro

  4. September 10th, 2009 | 9:11 am

    Hi! I was surfing and found your blog post… nice! I love your blog. :) Cheers! Sandra. R.

  5. September 10th, 2009 | 12:14 pm

    I love your site. :) Love design!!! I just came across your blog and wanted to say that I’ve really enjoyed browsing your blog posts. Sign: ndsam

  6. September 11th, 2009 | 11:43 am

    Sign: umsun Hello!!! rcuwwymhyw and 4971ssgfhphzye and 1495Hi! I was surfing and found your blog post… nice! I just came across your blog and wanted to say that Ive really enjoyed it.

  7. August 24th, 2010 | 2:33 pm

    Sign: zdbrw Hello!!! xnnat and 1630drfpdqtvmc and 9991 : Thanks. We look forward to hearing from you again and for your opinions on the world of work.

Leave a reply