Silverlight Chart Example

Silverlight Chart Example : 
                         In this example i explained  how to create a Column series chart in silverilght. I directly go to the coding part.In this example i added 3 column series inside the chart.If you want to single column series you can just add one column series inside the chart.

OutPut Screen  : 

 Xaml Code :

Paste the following code between user control

 <Grid x:Name="LayoutRoot" Background="White">
        <toolkit:Chart HorizontalAlignment="Left" Margin="12,12,0,0" Name="chart1" Title="Chart Title" VerticalAlignment="Top" Height="266" Width="365">
            <toolkit:ColumnSeries DependentValuePath="X" IndependentValuePath="Y" ItemsSource="{Binding}" DependentValueBinding="{Binding Value1}" IndependentValueBinding="{Binding Name}"/>
            <toolkit:ColumnSeries DependentValuePath="X" IndependentValuePath="Y" ItemsSource="{Binding}" DependentValueBinding="{Binding Value2}" IndependentValueBinding="{Binding Name}"/>
            <toolkit:ColumnSeries DependentValuePath="X" IndependentValuePath="Y" ItemsSource="{Binding}" DependentValueBinding="{Binding Value3}" IndependentValueBinding="{Binding Name}"/>
        </toolkit:Chart>
    </Grid>



cs code : 


using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;

namespace ChartSample
{
    public partial class MainPage : UserControl
    {
        List<ChartData> lobjchart;
        public MainPage()
        {
            InitializeComponent();

            lobjchart = new List<ChartData>();
            lobjchart.Add(new ChartData() { Name = "Item1", Value1 = 10, Value2 = 50, Value3 = 30 });
            lobjchart.Add(new  ChartData() { Name = "Item2", Value1 = 20, Value2 = 05, Value3 = 30 });
            lobjchart.Add(new ChartData() { Name = "Item3", Value1 = 50, Value2 = 45, Value3 = 24 });
            lobjchart.Add(new ChartData() { Name = "Item4", Value1 = 20, Value2 = 22, Value3 = 44 });
            chart1.DataContext = lobjchart;
        }

    }

    public class ChartData
    {
        public string Name { get; set; }
        public double Value1 { get; set; }
        public double Value2 { get; set; }
        public double Value3 { get; set; }
    }
}

Comments

Popular posts from this blog

Upload Single/Multiple file by using the REST API and jQuery SharePoint 2013

A type named 'SP.Data. could not be resolved by the model error

Add content type to SharePoint List/Library using REST API