Silverlight dynamic charts with Visifire components

Posted by on Comments (2)

Some weeks ago, I saw that Visifire (http://www.visifire.com/) was working on chart open source components for Silverlight 2 (currently in beta 1).

Here is a snapshot of a small Silverlight 2 beta 1 application I wrote with this components :

You can change the values in the textboxes and refresh the charts when clicking on the button.

You can test it there : http://www.renaldnollet.com/blogsamples/silverlightcharts1/testpage.html

This sample is easily done. Here is my XAML file :

<UserControl x:Class="SilverLightTests.SilverlightControl5"
xmlns="http://schemas.microsoft.com/client/2007"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Width="615" Height="483" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d">
<Grid x:Name="LayoutRoot" Background="White">
<Button x:Name="MyButton" Height="32" HorizontalAlignment="Stretch" Margin="260,5,223,0" VerticalAlignment="Top" Content="Refresh charts"/>
<TextBox x:Name="tb1" HorizontalAlignment="Left" Margin="5,5,0,0" Width="110" Text="1" VerticalAlignment="Top" Height="26"/>
<TextBox x:Name="tb2" HorizontalAlignment="Left" Margin="119,5,0,0" Text="2" VerticalAlignment="Top" Height="26" Width="110"/>
<TextBox x:Name="tb3" HorizontalAlignment="Left" Margin="5,35,0,0" Text="3" VerticalAlignment="Top" Height="26" Width="110"/>
<TextBox x:Name="tb4" HorizontalAlignment="Left" Margin="119,35,0,0" Width="110" Text="4" VerticalAlignment="Top" Height="26"/>
<TextBox x:Name="tb5" Height="26" HorizontalAlignment="Left" Margin="5,65,0,0" VerticalAlignment="Top" Width="110" Text="5"/>
<TextBox x:Name="tb6" HorizontalAlignment="Left" Margin="119,65,0,0" Text="6" Height="26" VerticalAlignment="Top" Width="110"/>
<TextBox x:Name="tb7" HorizontalAlignment="Left" Margin="5,95,0,0" Text="7" Height="26" VerticalAlignment="Top" Width="110"/>
<TextBox x:Name="tb8" HorizontalAlignment="Left" Margin="119,95,0,0" Text="8" Height="26" VerticalAlignment="Top" Width="110"/>
<Canvas HorizontalAlignment="Left" Margin="5,135,0,48" VerticalAlignment="Stretch" x:Name="MyCanvas" Width="300" Height="300" d:LayoutOverrides="Width"/>
<Canvas HorizontalAlignment="Right" Margin="0,135,6,48" VerticalAlignment="Stretch" x:Name="MyCanvas2" Height="300" Width="300" d:LayoutOverrides="Width"/>
Grid>
UserControl>

And here is my code-behind :

using System;
using System.Collections.Generic;
using System.Linq;
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 SilverLightTests
{
public partial class SilverlightControl5 : UserControl
{
public SilverlightControl5()
{
InitializeComponent();
this.Loaded += new RoutedEventHandler(Page_Loaded);
this.MyButton.Click += new RoutedEventHandler(MyButton_Click);
}
void MyButton_Click(object sender, RoutedEventArgs e)
{
CreateChart();
}
void Page_Loaded(object sender, RoutedEventArgs e)
{
CreateChart();
}
public void CreateChart()
{
Visifire.Charts.Chart visiChart = new Visifire.Charts.Chart();
Visifire.Charts.DataSeries dataSeries = new Visifire.Charts.DataSeries();
Visifire.Charts.DataPoint dataPoint;
visiChart.AnimationType = "Type4";
Visifire.Charts.Title title = new Visifire.Charts.Title();
title.Text = "";
visiChart.Children.Add(title);
visiChart.Width = 300;
visiChart.Height = 300;
Random rand = new Random(DateTime.Now.Millisecond);
for (int i = 1; i < 9; i++)
{
dataPoint = new Visifire.Charts.DataPoint();
TextBox tb = (TextBox)this.LayoutRoot.Children[i];
dataPoint.YValue = System.Convert.ToDouble(tb.Text);
dataPoint.LegendText = tb.Name;
dataSeries.Children.Add(dataPoint);
}
dataSeries.RenderAs = "Pie";
visiChart.Children.Add(dataSeries);
MyCanvas.Children.Clear();
MyCanvas.Children.Add(visiChart);
Visifire.Charts.Chart visiChart2 = new Visifire.Charts.Chart();
visiChart2.AnimationType = "Type4";
visiChart2.Width = 300;
visiChart2.Height = 300;
dataSeries = new Visifire.Charts.DataSeries();
for (int i = 1; i <9; i++)
{
dataPoint = new Visifire.Charts.DataPoint();
TextBox tb = (TextBox)this.LayoutRoot.Children[i];
dataPoint.YValue = System.Convert.ToDouble(tb.Text);
dataSeries.Children.Add(dataPoint);
}
dataSeries.RenderAs = "Column";
visiChart2.Children.Add(dataSeries);
MyCanvas2.Children.Clear();
MyCanvas2.Children.Add(visiChart2);
}
}
}
Posted in: Silverlight 2.0   Tags: