Click here to Skip to main content
Click here to Skip to main content

Tagged as

Go to top

Loading multiple charts dynamically

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

Introduction

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.

Solution

  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.

338217/3.png

338217/4.png

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)
{
    LoadCharts();
}

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

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

    //Rows
    for (int i = 0; i < rowCount; i++)
    {
        RowDefinition objRowDefinition = new RowDefinition();
        objRowDefinition.Height = GridLength.Auto;
        dynamicGrid.RowDefinitions.Add(objRowDefinition);
    }

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

    //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);
            cellStackPanel.Children.Add(chart1);
            dynamicGrid.Children.Add(cellStackPanel);
        }
    }
    MainPanel.Children.Add(dynamicGrid);
}

Chart User Control XAML

<chartingtoolkit:chart name="scatterChart" height="400" width="500">
    <chart.series>
        <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()
    {
        InitializeComponent();
    }

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

    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)
    {
        CallAsync();
    }

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

    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;
    }
}

Conclusion

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.

License

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

Share

About the Author

Manjunath Shrikantiah
Architect
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

Comments and Discussions

 
QuestionScreens PinmemberSachin_coder29-Feb-12 18:00 

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

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

| Advertise | Privacy | Mobile
Web03 | 2.8.140916.1 | Last Updated 30 Mar 2012
Article Copyright 2012 by Manjunath Shrikantiah
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid