Working with JavaScript Events

Before you start with Java Script events please familiarize yourself with the HTML part of the code. You can go through Working with JavaScript topic and create a simple HTML file to show charts.

 

In this example we'll show how to add the MouseLeftButtonDown event to the DataPoints. For complete list of Javascript events, please refer to JavaScript Event List.

 

When the user clicks on a DataPoint , the arguments returned will be displayed using an alert box.

 

First let's add the event to the DataPoint . This is the part of the code from the HTML page that displays the chart. The following code shows how to attach the event:

(attaching event part is shown in blue)

 

 

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title>Visifire Charts</title>

<script language="javascript" type="text/javascript" >

</script>

</head>

<body>

<!-- To embed in existing html copy the code below -->

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

<div id="VisifireChart">

<script language="javascript" type="text/javascript">

var vChart = new Visifire("SL.Visifire.Charts.xap " );

vChart.setDataUri("Data.xml"); // XAML file name goes in the place of Data.xml

 

// This event will be fired before loading the chart into Silverlight user-control.

vChart.preLoad = function(args)

{

      /* First Chart Reference. If there are multiple charts in a XAML file,

         array of chart references will be available as an event argument,

         e.g. args[0], args[1], args[2] etc. */

     var chart = args[0];

 

     chart.Series[0].MouseLeftButtonDown = OnDataPointMouseLeftButtonUp;

}

vChart.render("VisifireChart");

</script>

</div>

</body>

</html>

 

 

In above code snippet, preLoad event will be fired just before the Chart is loaded. Event handler function attached to preLoad event will receive array of chart references as an event argument. In our example we are working with only one chart so we are using args[0], as it represents very first chart object in argument list.

 

Now with statement var chart = args[0] we are giving reference of our chart object to variable chart.

 

Finally, we will access our DataSeries , which consists of DataPoints and attach event to it, shown in following code snippet:

 

chart.Series[0].MouseLeftButtonDown = OnDataPointMouseLeftButtonUp;

 

In above code snippet chart.Series[0] is chart's DataSeries , which consists of Datapoints, MouseLeftButtonDown is the event which we are going to attach to Datapoints and OnDataPointMouseLeftButtonDown is reference to the callback function which will be executed when event is fired.

 

Now that the event is attached, let's see the arguments that are received. To do this lets use an alert box to display the received arguments. Following code is written in the call back function to show received data:

 

<script language="text/javaScript" type="text/JavaScript">

 

/* Call back function for mouse left button up event. You will receive the corresponding element as an event argument. Using the event argument, you can get and set any properties present inside the element. */

 

function OnDataPointMouseLeftButtonUp(sender, eventArgs)

{

var str = "";

str += "AxisXLabel = " + sender.AxisXLabel+ "\n";

str += "XValue = " + sender.XValue+ "\n";

str += "YValue = " + sender.YValue+ "\n";

alert(str);

}

 

</script>

 

Run the chart and when you see the chart, click on a DataPoint and you'll see the alert box with arguments received for the DataPoint .

 

This screen shot shows the chart:

 

SL_defalult_chart.jpg

 

This is screen shot after the MouseLeftButtonDown event is fired:

 

SL_Working_With_JSEvents.jpg