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.


Comments

  1. May 27th, 2008 | 10:39 am

    [...] 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 [...]

  2. Suraj air
    February 27th, 2012 | 2:12 am

    Wow..!! this tutorial was cool. I was banging my head with Visual Studio and messy IDE. I am more comfortable with JS. Thanks a lot.
    Can you please tell me whether we can do the same for other silverlight controls such as Grid or other controls.!!!!

  3. somnath
    March 6th, 2012 | 3:33 am

    Hi Suraj,

    Currently Visifire supports Charts and Gauge controls. But you can work with other controls in Silverlght using JavaScript also. Please check out the following links.

    http://msdn.microsoft.com/en-us/library/cc903928%28v=vs.95%29.aspx
    http://debugmode.net/2011/07/30/working-with-javascript-in-silverlight-4-0/

    Regards,
    Somnath

Leave a reply