none
SVG / Graph-animation

    Question

  • i'd like to animate a graph like:

    http://www.entwicklerforum.org/svgs/animated.html

    this works easy with HTML/XML, but i want to use graphs in a dashboard and to load them like a line, and when different data (numbers) is loadet, the graph should grow with an animation. (as the example)

    When the numbers(data) getting changed, like a new filter for prices or customers has been changed, the graph should change to the new data with animation.

    how to solve this?

    when i have paths like in the example, i get

    d="M0,146l9,-32L44,125l7-14l15-20l12,6l10-10l17,15 ...

    in silverlight (blend) it works with the same

    data="M0,146l9,-32L44,125l7-14l15-20l12,6l10-10l17,15

    ... for a path

    But i cannot animate it.

    Only case i can find is to make storyboard and manually to change every point like:

                <PointAnimationUsingKeyFrames Storyboard.TargetProperty="(Path.Data).(PathGeometry.Figures)[0].(PathFigure.Segments)[0].(LineSegment.Point)" Storyboard.TargetName="path_Copy">
                    <EasingPointKeyFrame KeyTime="0" Value="77,8"/>
                    <EasingPointKeyFrame KeyTime="0:0:0.7" Value="68,65"/>
                </PointAnimationUsingKeyFrames>


    /// i get this for every path-point, but i dont want to change them by hand of course. And specially not with such long code.

    ... i didnt find a good solution for graphs with animations, for possibility with changing content.

    would be helpfull for any idea!

    Tuesday, November 22, 2011 8:36 AM

Answers

  • Hi,

    please refer to the code below:

    <UserControl x:Class="SilverlightApplication146.MainPage"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        mc:Ignorable="d"
        d:DesignHeight="300" d:DesignWidth="400">
        <UserControl.Resources>
                <Storyboard x:Name="myStoryBoard" 
                AutoReverse="True" 
                Duration="0:0:5" >
                <PointAnimation To="50,350" Storyboard.TargetName="MyLineGeometry" 
                    Storyboard.TargetProperty="StartPoint" />
            </Storyboard>
        </UserControl.Resources>
        <Grid x:Name="LayoutRoot" Background="White">
            <Path Name="path" Stroke="Blue" StrokeThickness="3">
                <Path.Data>
                    <LineGeometry x:Name="MyLineGeometry" StartPoint="0,0" EndPoint="50,50"></LineGeometry>
                </Path.Data>
            </Path>
            <Button Content="Button" Height="23" HorizontalAlignment="Left" Margin="12,142,0,0" Name="button1" VerticalAlignment="Top" Width="75" Click="button1_Click" />
        </Grid>
    </UserControl>
    

    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 SilverlightApplication146
    {
        public partial class MainPage : UserControl
        {
            public MainPage()
            {
                InitializeComponent();
            }
    
            private void button1_Click(object sender, RoutedEventArgs e)
            {
                myStoryBoard.Begin();
            }
        }
    }
    

    Hope helpful

    Thursday, November 24, 2011 4:31 AM

All replies

  • maybe its easier to say...

    what i have in XAML/HTML

    <animate attributeName="d" to="M0,146l9,-32L44,125l7-14l15-20l12,6 ... " dur="1.25s" repeatCount="infinite" fill="freeze" />

    i would like to have for silverlight. Like to add a new string of an data and it gets the new graph by animation. (best would be: not fixed to the amount of path-points)

    Tuesday, November 22, 2011 8:50 AM
  • Do you talk about area charts like in the example from you link? If yes then you can use charts from the toolkit. They support animations out of of the box. Here an example http://www.silverlight.net/content/samples/sl4/toolkitcontrolsamples/run/default.html  go to "Area Series" and Scroll down to the "Value by Date" example. They also provide the source code for the samples.

    Tuesday, November 22, 2011 12:34 PM
  • hi bitdisaster,

    yes, exactly what they show at the place you describe...

    but i need this only without components :/

    we aim to make interfaces in/for XAML (Silverlight) which we can convert to XML pages for HTML5 as well.

    Wednesday, November 23, 2011 10:16 AM
  • ut i need this only without components :/

    Hi ,

    Create a Canvas

    Then create the Path in the code behind.

    Then add to the Canvas.

    If you want to change the Path value, remove the old Path,then add the new Path.

    Thursday, November 24, 2011 12:29 AM
  • and how should i animate the path changing its position while changing the value for the path?

    finally i dont want to collapse or disappear the path and show a new one,

    i would like to change the graph as in bitdisaster's link, with animation between the two different values Smile

    Thursday, November 24, 2011 3:54 AM
  • Hi,

    please refer to the code below:

    <UserControl x:Class="SilverlightApplication146.MainPage"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        mc:Ignorable="d"
        d:DesignHeight="300" d:DesignWidth="400">
        <UserControl.Resources>
                <Storyboard x:Name="myStoryBoard" 
                AutoReverse="True" 
                Duration="0:0:5" >
                <PointAnimation To="50,350" Storyboard.TargetName="MyLineGeometry" 
                    Storyboard.TargetProperty="StartPoint" />
            </Storyboard>
        </UserControl.Resources>
        <Grid x:Name="LayoutRoot" Background="White">
            <Path Name="path" Stroke="Blue" StrokeThickness="3">
                <Path.Data>
                    <LineGeometry x:Name="MyLineGeometry" StartPoint="0,0" EndPoint="50,50"></LineGeometry>
                </Path.Data>
            </Path>
            <Button Content="Button" Height="23" HorizontalAlignment="Left" Margin="12,142,0,0" Name="button1" VerticalAlignment="Top" Width="75" Click="button1_Click" />
        </Grid>
    </UserControl>
    

    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 SilverlightApplication146
    {
        public partial class MainPage : UserControl
        {
            public MainPage()
            {
                InitializeComponent();
            }
    
            private void button1_Click(object sender, RoutedEventArgs e)
            {
                myStoryBoard.Begin();
            }
        }
    }
    

    Hope helpful

    Thursday, November 24, 2011 4:31 AM