Click here to Skip to main content
12,748,323 members (38,768 online)
Click here to Skip to main content
Add your own
alternative version

Tagged as


6 bookmarked
Posted 29 Feb 2012

Loading multiple charts dynamically

, 30 Mar 2012 CPOL
Rate this:
Please Sign up or sign in to vote.
How to dynamically load multiple charts in Silverlight.


This article will cover how to dynamically load multiple charts in Silverlight. This is similar to the dashboard concept where you would want to load multiple charts on the same page. The following sections will cover the issues I faced while development and some of the solutions I figured out during the process.

Issues While Loading Multiple Charts Dynamically

  1. Do not know number of charts.
  2. Layout has to be designed at runtime.
  3. Screen renders white background until all charts are loaded.


  1. The main page will just have a StackPanel where all charts would be loaded.
  2. Create a grid dynamically with number of rows and columns set dynamically.
  3. Instantiate the Chart user control and add it to the cell. This user control can have public properties/constructor through which you can pass the data series from the main page.



Main Page XAML

<scrollviewer grid.row="1" grid.column="0" 
       horizontalscrollbarvisibility="Auto" borderbrush="Transparent"
       borderthickness="0" height="Auto">
    <stackpanel horizontalalignment="Stretch" orientation="Vertical" name="MainPanel" />
        </stackpanel />
</scrollviewer />

Main Page Code-Behind

private void UserControl_Loaded(object sender, RoutedEventArgs e)

private void LoadCharts()
    int rowCount = 2;
    int coulmnCount = 2;

    //dynamic grid
    Grid dynamicGrid = new Grid();

    for (int i = 0; i < rowCount; i++)
        RowDefinition objRowDefinition = new RowDefinition();
        objRowDefinition.Height = GridLength.Auto;

    //Coulmn count
    for (int i = 0; i < coulmnCount; i++)
        ColumnDefinition objColumnDefinition = new ColumnDefinition();
        objColumnDefinition.Width = GridLength.Auto;

    //Add charts dynamically
    for (int i = 0; i < rowCount; i++)
        for (int j = 0; j < coulmnCount; j++)
            StackPanel cellStackPanel = new StackPanel();
            cellStackPanel.Orientation = Orientation.Horizontal;
            cellStackPanel.SetValue(Grid.RowProperty, i);
            cellStackPanel.SetValue(Grid.ColumnProperty, j);

            //You can enhance Chart constuctor to take data series. 
            UCChart chart1 = new UCChart(1, 1000);

Chart User Control XAML

<chartingtoolkit:chart name="scatterChart" height="400" width="500">
        <scatterseries title="Series 1" name="series1" 
            independentvaluebinding="{Binding SerialNumber}" 
            dependentvaluebinding="{Binding Value}" />
    </chart.series />

Chart User Control Code-behind

public partial class UCChart : UserControl
    private Random random = new Random(20110810);
    private int _fromCount;
    private int _toCount;
    private delegate void AssignDataSeriesDelegate(
            ScatterSeries series, StackPanel spPanelProgress);

    public UCChart()

    public UCChart(int fromCount, int toCount)
        _fromCount = fromCount;
        _toCount = toCount;

    private List <datapoint> GenerateDataPoints(int from, int to)
        List<datapoint /> dataPoints = new List<datapoint />();

        for (int i = _fromCount; i <= _toCount; i++)
            dataPoints.Add(new DataPoint { SerialNumber = i, Value = (random.NextDouble() / 2) });
        return dataPoints;

    private void LayoutRoot_Loaded(object sender, RoutedEventArgs e)

    private void CallAsync()
        BackgroundWorker worker = new BackgroundWorker();
        worker.DoWork += new DoWorkEventHandler(worker_DoWork);

    void worker_DoWork(object sender, System.ComponentModel.DoWorkEventArgs e)
        Dispatcher.BeginInvoke(new AssignDataSeriesDelegate(AssignDataSeries), 
                  (ScatterSeries)scatterChart.Series[0], spPanelProgress);

    private void AssignDataSeries(ScatterSeries series, StackPanel spPanelProgress)
        spPanelProgress.Visibility = System.Windows.Visibility.Visible;
        ScatterSeries series1 = (ScatterSeries)scatterChart.Series[0];
        // Generate the random data points for the series
        series1.ItemsSource = GenerateDataPoints(1, 6000);
        spPanelProgress.Visibility = System.Windows.Visibility.Collapsed;


This article does not cover data retrieval from the database and chart creation at runtime even though it was implemented in my project. I wanted to keep things simpler for this article. There could be other ways for improving this, please put in your comments.


This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


About the Author

Manjunath Shrikantiah
India India
9+ plus years of experience in IT industry. This includes experience in architecting, designing and developing solutions on Web and desktop application platforms

You may also be interested in...

Comments and Discussions

QuestionScreens Pin
Sachin_coder29-Feb-12 19:00
memberSachin_coder29-Feb-12 19:00 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

Permalink | Advertise | Privacy | Terms of Use | Mobile
Web02 | 2.8.170215.1 | Last Updated 30 Mar 2012
Article Copyright 2012 by Manjunath Shrikantiah
Everything else Copyright © CodeProject, 1999-2017
Layout: fixed | fluid