Working with JavaScript Events in Visifire Charts
somnathVisifire 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.
You can download the source from here.
[...] 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 [...]