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.


Working with JavaScript Events in Visifire Charts

somnath

Visifire 1.0.10 beta comes with JavaScript Event handling feature. If you don’t have the latest version of the Visifire, download it here.

In the tutorial below, I will explain how to handle Visifire events in JavaScript. For simplicity, I have chosen MouseLeftButtonDown for this exercise. We are going to attach an event handler for MouseLeftButtonDown and  whenever we click on a DataPoint, event handler function pops up an alert box  displaying some of the event arguments.

Step 1:

Create an HTML page named JsEventTest.html which contains the code to creates a chart. Code looks as below.

<html>
<head>
    <title>Visifire Test Page</title>
    <script type="text/javascript" src="Visifire.js"></script>
</head>
<body>
    <div id="VisifireChart0">
        <script type="text/javascript">                     
        // Create new Visifire Chart      
        var vChart1 = new Visifire('Visifire.xap', 500,300);             
        // Set Data.xml file source                 
        vChart1.setDataUri("Data.xml");              
        // Render Chart               
        vChart1.render("VisifireChart0");           
        </script>
    </div>
</body>
</html>

Step 2:

Now create an XML file in the same directory where HTML page is present. Name the XML file as Data.xml. The XML file contains data required for creating the chart. Below is the chart XML.

<vc:Chart xmlns:vc="clr-namespace:Visifire.Charts;assembly=Visifire.Charts" >

  <vc:Title Text="Sample Chart"></vc:Title>

  <vc:DataSeries RenderAs="Column" >
    <vc:DataPoint AxisLabel="A" YValue="80"/>
    <vc:DataPoint AxisLabel="B" YValue="86"/>
    <vc:DataPoint AxisLabel="C" YValue="70"/>
    <vc:DataPoint AxisLabel="D" YValue="80"/>
    <vc:DataPoint AxisLabel="E" YValue="95"/>
  </vc:DataSeries>

</vc:Chart>

Step 3:

Lets write an event handler for the MouseLeftButtonDown event and name it as onDataPointMouseLeftButtonDown.  

Bellow is the code for the Event handler. Add the following JavaScript script code block inside the <head> tag in “JsEventTest.html".

<script type="text/javascript">
    // Function to be called on mouse left button down over any DataPoint.    
    function onDataPointMouseLeftButtonDown(e)    
    {        
        var str;             
        str =  "Element = " + e.Element + "\n";        
        str += "Name =" + e.Name + "\n";        
        str += "Index =" + e.Index + "\n";        
        str += "AxisLabel = " + e.AxisLabel + "\n";        
        str += "YValue = " + e.YValue + "\n";             
        alert(str);    
    }
</script>

Whenever the event is fired, an event argument “e” is passed to  onDataPointMouseLeftButtonDown. It contains information about DataPoint like DataPoint Index, Name, AxisLabel, XValue, YValue etc. So that we can easily identify which DataPoint has been clicked. Each of the chart elements sends different set of arguments. For more information regarding argument list you can look into the Visifire documentation.

Step 4:

Now we shall attach the event handler with DataPoint for the MouseLeftButtonDown event. So that whenever we click on DataPoint, function onDataPointMouseLeftButtonDown will be invoked.

Lets add the following code just before calling render function of the chart.  

// Attach MouseLeftButtonDown event with DataPoint. 
vChart1.attachEvent('DataPoint','MouseLeftButtonDown', onDataPointMouseLeftButtonDown); 

 

Now the final HTML in JsEventTest.html looks like this.

<html>
<head>
    <title>Visifire Test Page</title>
    <!-- Helper files for initializing and creating the Silverlight plug-in -->

    <script type="text/javascript" src="Visifire.js"></script>

    <script type="text/javascript">

    // Function to be called on mouse left button down over any DataPoint.
    function onDataPointMouseLeftButtonDown(e)
    {
        var str;
     
        str =  "Element = " + e.Element + "\n";
        str += "Name =" + e.Name + "\n";
        str += "Index =" + e.Index + "\n";
        str += "AxisLabel = " + e.AxisLabel + "\n";
        str += "YValue = " + e.YValue + "\n";
     
        alert(str);
    }
    </script>

</head>
<body>
    <div id="VisifireChart0">

        <script type="text/javascript"> 
        
                // Create new Visifire Chart
                var vChart1 = new Visifire('Visifire.xap', 500,300);

                // Set Data.xml file source  
                vChart1.setDataUri("Data.xml");
                
                // Attach MouseLeftButtonDown event with DataPoint.
                vChart1.attachEvent('DataPoint','MouseLeftButtonDown', onDataPointMouseLeftButtonDown);

                // Render Chart
                vChart1.render("VisifireChart0");
                
        </script>

    </div>
</body>
</html>

Step 5:

Make sure that Visifire.xap and Visifire.js are present in the same directory where JsEventTest.html is present.

 

Step 6:

Now browse JsEventTest.html from web server. In my case the address is http:/ /localhost/myproject/JsEventTest.html

Click on the image below  to see live demo.

jsevents2

 

You can download the source from here.


Visifire now supports event handling in JavaScript

admin

We have released Visifire 1.0.10 Beta with some major features and bug fixes. With this release we have introduced JavaScript based event handling support. This was one of the most requested feature. You can download the latest release from the download page.

Visifire now supports MouseEvents like  MouseLeftButtonDown, MouseLeftButtonUp, MouseMove, MouseEnter, MouseLeave. You can refer to our documentation for further details. Below is a summary of this release.

Bug Fixes:

  • ToolTip was not appearing on the beveled region of DataPoint. Now it has been fixed.
  • Whenever relative path is used in Href, XAP file path was getting used as the base URI. Now the path of web page in which the chart is embedded is taken as base URI. So all paths are relative to the web page.
  • When all values are negative in 100% stacked charts the Axis would take the limit as 150 to -100 instead of 0 to -100.
  • In order to create step chart, users had to write the DataPoints with same XValue in Reverse order.
  • TitleBackground and TitleFontColor for the Legend Title were not working.
  • In Stacked charts if all YValues are zero then AxisManager used to throw exception. Now it is handled properly.
  • If animation was type4 and if the Pie/Doughnut was clicked before the Type4 animation was complete, then it would cause an improper positioning of Pie/Doughnut.

New Features:

  • Event handling support in JavaScript.
  • Cursor Property for all Chart elements – Sets the mouse cursor type when it moves over an element
  • MarkerImageStretch property in DataSeries and DataPoint – Sets how the image should be stretched inside the marker to fill it.
  • StartFromZero property for AxisX. In previous version, it was applicable only for AxisY.

 

Thanks for your attention,

Team Visifire