Event Handling

Visifire Charts supports events from managed code and JavaScript.

Events handling in JavaScript:

There are a predefined set of elements in Visifire Charts which support JavaScript event handling. To attach a event handler you'll have to use attachEvent function. For a complete list of supported events please refer to JavaScript Events List. The sample code below shows how to attach an event handler (that part of the code is highlighted in blue):

<html>

<head>

<title>MouseButtonDown Javascript Event Sample.</title>

function onMouseLeftButtonDown(e)

{

alert(e.Element);

}

</script>

</head>

<body>

// Create a Chart

vChart1 = new Visifire('Visifire.xap', 500, 300);

// Set Data xml

vChart1.setDataUri("Data.xml");

// Attach MouseLeftButtonDown event to DataPoint.

vChart1.attachEvent('DataPoint','MouseLeftButtonDown', onMouseLeftButtonDown);

// Attach MouseLeftButtonDown event to Chart.

vChart1.attachEvent('Chart','MouseLeftButtonDown', onMouseLeftButtonDown);

// Attach MouseLeftButtonDown event to Title.

vChart1.attachEvent('Title','MouseLeftButtonDown', onMouseLeftButtonDown);

// Attach MouseLeftButtonDown event to Legend.

vChart1.attachEvent('Legend','MouseLeftButtonDown', onMouseLeftButtonDown);

// Render chart

vChart1.render("VisifireChart");

</script>

</div>

</body>

</html>

The arguments received will depend on the element which fired the event. For a list of elements and arguments please refer to the JavaScript Arguments List.

Event handling in Managed Code:

Visifire Charts supports all the mouse events like; MouseLeftButtonUP, MouseMove. Since Chart Elements are inherited from Canvas, they should support all events of the Canvas, but this is not guaranteed. The following code will show how to attach an event to the chart. Create a new Silverlight application project and add references to Visifire.Charts.dll and Visifire.Commons.dll.

Contents of Page.xaml :

<UserControl x:Class="ManagedCodeExample.Page"

xmlns="http://schemas.microsoft.com/client/2007"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

Width="400" Height="300">

</Grid>

</UserControl>

Contents of Page.xaml.cs (events related part is highlighted in blue):

public partial class Page : UserControl

{

public Page()

{

InitializeComponent();

// Call function to create chart

CreateChart();

}

private void CreateChart()

{

// Remove all existing child elements

LayoutRoot.Children.Clear();

// Create a Chart element

Chart chart = new Chart();

// Set chart width and height

chart.Width = 400;

chart.Height = 300;

// Create new DataSeries

DataSeries dataSeries = new DataSeries();

// Number of DataPoints to be generated

int numberOfDataPoints = 10;

// To set the YValues of DataPoint

Random random = new Random();

// Loop and add a few DataPoints

for (int loopIndex = 0; loopIndex < numberOfDataPoints; loopIndex++)

{

// Create a DataPoint

DataPoint dataPoint = new DataPoint();

// Set the YValue using random number

dataPoint.YValue = random.Next(1, 100);

// Attaching events

dataPoint.MouseLeftButtonUp += new MouseButtonEventHandler(dataPoint_MouseLeftButtonUp);

// Add DataPoint to DataSeries

dataSeries.Children.Add(dataPoint);

}

// Add DataSeries to Chart

chart.Children.Add(dataSeries);

// Add chart to the LayoutRoot for display

LayoutRoot.Children.Add(chart);

}

void dataPoint_MouseLeftButtonUp(object sender, MouseButtonEventArgs e)

{

// Do something

}

The object that will be received as a sender in the event handler will be the chart element that fired that event.