.NET integration with Silverlight 4 (passing values to chart for plotting)

[James Bonnyman]

Hi!

I am looking to include the Silverlight Chart into an existing application but am struggling to do this (partly as many of the examples are in c# and I use VB, also many use the <asp:Silverlight> tag which is now depreciated (I am making use of the <object> approach).

My requirements are (hopefully simple).  I need to embed a chart in an asp.net (4.0) page,  to pass to the chart a  data series and have it plotted (it would be good to be able to send title & labels too). The data will be in the form of a list of x,y pairs which are determined at run time (following a button press at which point I would like the chart to update).

So in terms of steps

1. user pushes button on ASP.NET page
2. button_click event is called
3. Data is generated ( x&y pairs)
4. Data is sent to the SL chart control (with title & axis labels)
5. SL chart renders the graph

(steps 1-5 may be repeated more than once).

Is there a VB.net example that shows how to achieve this (or could a simple one be provided as an example).

[Evgenia]

Hi James,

You can find a sample project attached which integrates RadChart for Silverlight 4 into ASP.NET application. The sample project is based on our integration demo but is made under .NET 4 and Silverlight 4 where the <asp:silverlight> tag is substituted with <object> tag.

-  Using the <object> tag you should wire to OnLoad event in parameter where you will be able to get reference to the silverlight control on the page:

<param name="onload" value="onSilverlightLoaded" />

-  In the event's body call the getHost() method like this:

function onSilverlightLoaded(sender, args) {
           silverlightControl = sender.getHost();
       }

Feel free to modify the sample so that it fits your requirements.
P.S. The sample is made under C#. Let us know if you need help converting it to VB.NET.

Greetings,
Evgenia
the Telerik team

[James Bonnyman]

Hi

Many thanks for the posting (I had come across this) however it does not address the points I raised in my initial posting.

Currently with RadChart I am able, on a button _click event in the form's VB code  (note: not javascript on the page), to generate a series of values. I then use a chart which I populate by adding values to the series which is also done within the button press. It is this approach I need to be able to replicate (in the example provided the data values are embedded in  the silverlight chart and all the calls are made via javascript).

The code below shows how I currently achieve this using the aspnet/ajax chart control (this was my original test application which I have been trying to replicate with SL chart in an ASP.Net page)

Protected Sub btnGenerateAndPopulate_Click(ByVal sender As Object, ByVal e As EventArgs) Handles btnGenerateAndPopulate.Click

    ' Set up chart parameters
    RadChart1.Chart.Series.Clear()
    RadChart1.PlotArea.XAxis.Appearance.TextAppearance.TextProperties.Font = New Font("Arial", 10)
    RadChart1.PlotArea.XAxis.Appearance.TextAppearance.TextProperties.Color = Color.Black
    RadChart1.PlotArea.XAxis.AutoScale = False
    RadChart1.PlotArea.XAxis.AddItem("Group 1")
    RadChart1.PlotArea.XAxis.AddItem("Group 2")
    RadChart1.PlotArea.XAxis.AddItem("Group 3")
    RadChart1.PlotArea.XAxis.AddItem("Group 4")
    RadChart1.PlotArea.XAxis.LayoutMode = ChartAxisLayoutMode.Between

    Dim Income As ChartSeries = New ChartSeries("Income", ChartSeriesType.Pie)
    RadChart1.AddChartSeries(Income)

    Income.Appearance.Border.Color = Color.Black
    Income.Appearance.ShowLabels = False

    'Get the values to be plotted and pass to the chart control
    GetResearchIncome()


End Sub

Private Sub GetResearchIncome()

    ' The values to be plotted would normally be read from a DB and manipluated
    ' before adding to the series

    Dim salesDataSeries As ChartSeries = RadChart1.GetSeries("Income")
    Dim intIncome As Integer : intIncome = 0

    If Not (salesDataSeries Is Nothing) Then

        If salesDataSeries.Items.Count > 0 Then
            Dim seriesItem As ChartSeriesItem
            For Each seriesItem In salesDataSeries.Items
                seriesItem.YValue = intIncome * 100
                intIncome = intIncome + 1
            Next seriesItem
        Else
            Dim i As Integer
            For i = 0 To 3
                salesDataSeries.AddItem(intIncome * 100)
                intIncome = intIncome + 1
            Next i
        End If
    End If

End Sub 'GetResearchINcome

This approach provides a method of achieving my goal but lacks the 'flair' the SL chart control would bring to my application. Help on achieving this would be very much appreciated :-)

Kind regards,

James

[Ves]

Hello James,

This task actually consists of two separate sub-tasks:

• Gather data and send it to the Silverlight application
• Populate RadChart in the Silverlight application

That said, the first task is not directly related to RadChart, it is about accessing and populating managed objects from javascript. So, while Evgenia's example does not show directly how to populate the Chart, but it does show the basics of working with managed objects in javascript. So you can create a property in your Silverlight page, mark it with ScriptableMember attribute and populate it in javascript. Then use its value in Silverlight to populate RadChart. Here is a (really simple) example:

Create a custom class (in Silverlight app):

[ScriptableType]
    public class MyClass
    {
        public double Value { get; set; }
    }

Create a property in the Silverilght user control to hold such object:

[ScriptableMember]
public MyClass Data { get; set; }

Register your type for creation in scripts (you can put this in the SL application constructor):

HtmlPage.RegisterCreateableType("MyClass", typeof(MyClass));

Populate the object in javascript (this is where you will need to provide the data for the chart):

var obj = silverlightControl.Content.services.createObject("MyClass")
obj.Value = 5;
silverlightControl.content.slChartPage.Data = obj;

Best regards,
Ves
the Telerik team