Telerik blogs

RadChart for Silverlight in ASP.NET MVC Application

Vesselin Georgiev by Vesselin Georgiev
October 01, 2010 Web, ASP.NET MVC 0 Comments


The purpose of this blog post is to show how to incorporate RadChart for Silverlight in an ASP.NET MVC application. Manol has already shown how to do this for ASP.NET and things are not much different for ASP.NET MVC.

Let’s start with a simple Silverlight application with a single RadChart. For simplicity, I will populate it with a list of numbers, you can also use any of the techniques, supported by RadChart. The code is as simple as this

XAML:

<telerik:RadChart x:Name="RadChart1" />

And C#:

RadChart1.ItemsSource = new double[] { 3d, 4d, 6d };

 

I will create two write-only properties of the Silverlight user control -- ShowItemLabels and SeriesType. They are marked with  ScriptableMemberAttribute so that they can be altered by the script and they will influence the chart appearance as per our requirements:

[ScriptableMember]
public bool ShowItemLabels
{
    set
    {
        this.RadChart1.DefaultSeriesDefinition.ShowItemLabels = value;
    }
}

[ScriptableMember]
public string SeriesType 
{
    set
    {
        bool showLabels = this.RadChart1.DefaultSeriesDefinition.ShowItemLabels;
        switch (value)
        {
            case "bar":
                this.RadChart1.DefaultSeriesDefinition = new BarSeriesDefinition()  { ShowItemLabels = showLabels };
                break;
            case "line": 
                this.RadChart1.DefaultSeriesDefinition = new LineSeriesDefinition()  { ShowItemLabels = showLabels };
                break;
            case "pie":
                this.RadChart1.DefaultSeriesDefinition = new PieSeriesDefinition()  { ShowItemLabels = showLabels };
                break;
        }
        RadChart1.Rebind();
    }
}

 

Now, let’s go to the MVC application -- I will use the Index.aspx to add our Silverlight app with RadChart. Here is the markup:

<object data="data:application/x-silverlight-2," type="application/x-silverlight-2"
    width="100%" height="400">
    <param name="source" value="ClientBin/SilverlightApplication1.xap" />
    <param name="onError" value="onSilverlightError" />
    <param name="onLoad" value="pluginLoaded" />
    <param name="background" value="white" />
    <param name="minRuntimeVersion" value="4.0.50826.0" />
    <param name="autoUpgrade" value="true" />
    <a href="http://go.microsoft.com/fwlink/?LinkID=149156&v=4.0.50826.0" style="text-decoration: none">
        <img src="http://go.microsoft.com/fwlink/?LinkId=161376" alt="Get Microsoft Silverlight"
            style="border-style: none" />
    </a>
</object>

 

Now, we need to create pluginLoaded javascript function in order to obtain a reference to the silverlight object and to initialize the properties, which will define the chart state:

<script type="text/javascript">
        var chartPage;
        function pluginLoaded(sender, args) {
            chartPage = sender.getHost().content.ChartPage;
            chartPage.ShowItemLabels = true;
            chartPage.SeriesType = "Bar";
        }
</script>

 

Then add the controls, which will configure the chart:

<input id="Checkbox1" type="checkbox" onclick="CheckBoxClick(this);" checked="checked" />
    Show Item Labels
    <br />
    <input id="Radio1" type="radio" name="Series Type" value="bar" checked="checked" onclick="RadioClick(this);" /> Bar<br />
    <input id="Radio2" type="radio" name="Series Type" value="line" onclick="RadioClick(this);" /> Line<br />
    <input id="Radio3" type="radio" name="Series Type" value=pie" onclick="RadioClick(this);"/> Pie<br />

 

And then add the corresponding javascript functions, which will interact with the Silverlight user control:

<script type="text/javascript">
   function CheckBoxClick(sender) {
       chartPage.ShowItemLabels = sender.checked;
   }
  function RadioClick(sender) {
       chartPage.SeriesType = sender.value;
   }
</script> 


The final bit is to register the Silverligth object as scriptable in the user control’s Loaded event handler:

void MainPage_Loaded(object sender, RoutedEventArgs e)
        {
            HtmlPage.RegisterScriptableObject("ChartPage", this);
            RadChart1.ItemsSource = new double[] { 3d, 4d, 6d};
        }

 

And this is the result:

RadChartInMVC 

You can find the complete example here:

XAML
Vesselin Georgiev
About the Author

Vesselin Georgiev

Vesselin Georgiev is a principal software developer at Progress on the Telerik Xamarin & UWP Team. He started here back in 2006 as a support officer on the ASP.NET team. Later, he moved to Silverlight, WPF, UWP, and Xamarin development but kept his passion for customer satisfaction. He also loves traveling, hiking and good food.

Comments

Comments are disabled in preview mode.