How to Apply animated image to background of visifire chart?

Aug 7, 2012 at 10:28 AM

my code is here!!!

 

<UserControl x:Class="dashboard.HolidayMailReportCard"
    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"
    xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation"
    xmlns:ed="http://schemas.microsoft.com/expression/2010/drawing"
    xmlns:System="clr-namespace:System;assembly=mscorlib"
    xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity"
    xmlns:ei="http://schemas.microsoft.com/expression/2010/interactions"
    xmlns:telerikData="clr-namespace:Telerik.Windows.Data;assembly=Telerik.Windows.Data"
    xmlns:telerikChart="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls.Charting"
    xmlns:telerikCharting="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls.Charting"
    xmlns:vw="clr-namespace:dashboard.ViewModel"
    xmlns:vg="clr-namespace:Visifire.Gauges;assembly=SLVisifire.Gauges"
             xmlns:it="clr-namespace:ImageTools.Controls;assembly=ImageTools.Controls"
    xmlns:local="clr-namespace:dashboard"
     xmlns:local1="clr-namespace:dashboard.Views"
    FontFamily="{Binding Source={StaticResource paletteManager}, Path=Palette.font,Mode=TwoWay}"
    xmlns:vc="clr-namespace:Visifire.Charts;assembly=SLVisifire.Charts"  
    mc:Ignorable="d"
    d:DesignHeight="300" d:DesignWidth="400">

 <UserControl.DataContext>
        <vw:MainPageViewModel></vw:MainPageViewModel>
    </UserControl.DataContext>

 

<UserControl.Resources>
        <it:ImageConverter x:Key="ImageConverter"/>
    </UserControl.Resources>

 

 

 

   <vc:Chart  x:Name="RACE"  Width="930" Height="280" Theme="Theme2"  BorderBrush="WhiteSmoke"  Style="{StaticResource ChartStyle}"  BorderThickness="0.5"
                                         AnimatedUpdate="true"   CornerRadius="7" Margin="0,20,0,0"  ToolBarEnabled="True"   View3D="False"  ScrollingEnabled="False"  >

                            <!--<vc:Chart.Titles>

                                <vc:Title Text=" Maui" FontSize="20"    HorizontalAlignment="Right" VerticalAlignment="Center" FontFamily="Segoe UI Light" FontColor="WhiteSmoke"/>
                            </vc:Chart.Titles>-->
                                <vc:Chart.Background>
                                 <it:AnimatedImage Source="{Binding ImageSource, Converter={StaticResource ImageConverter}}" />
                                </vc:Chart.Background>

                                <vc:Chart.AxesY >
                                <vc:Axis StartFromZero="True" Interval="20" AxisMinimum="0" AxisMaximum="100" MinHeight="50" MaxHeight="50"/>

                                <vc:Axis  Enabled="false"  >
                                    <vc:Axis.AxisLabels>
                                           
                                        <vc:AxisLabels FontColor="WhiteSmoke" Opacity="0"  />

                                    </vc:Axis.AxisLabels>
                                    <vc:Axis.Grids >
                                        <vc:ChartGrid  InterlacedColor="Transparent" Enabled="False"/>
                                    </vc:Axis.Grids>

                                  

                                </vc:Axis>

                            </vc:Chart.AxesY>
                            <vc:Chart.PlotArea>
                                <vc:PlotArea    Background="Transparent"   />
                              
                            
                            </vc:Chart.PlotArea>
                           

                           
                            <vc:Chart.AxesX>

                                <vc:Axis AxisMaximum="100" StartFromZero="true"  LineThickness="0" >
                                    <vc:Axis.AxisLabels >

                                        <vc:AxisLabels FontColor="WhiteSmoke" Opacity="0"   />


                                    </vc:Axis.AxisLabels>

                                    <vc:Axis.CustomAxisLabels>

                                        <vc:CustomAxisLabels>

                                            <vc:CustomAxisLabels.Labels>
                                                <vc:CustomAxisLabel  Text="21%"   To="21"  />
                                                <vc:CustomAxisLabel  Text="41%" From="21"  To="41"  />
                                                <vc:CustomAxisLabel  Text="61%" From="41"  To="61"  />
                                                <vc:CustomAxisLabel  Text="81%" From="61"  To="81"  />
                                                <vc:CustomAxisLabel  Text="100%" From="81"  To="100"  />
                                                <vc:CustomAxisLabel  Text="170%" From="100"  To="170"  />

                                            </vc:CustomAxisLabels.Labels>

                                        </vc:CustomAxisLabels>

                                    </vc:Axis.CustomAxisLabels>
                                    <vc:Axis.Grids >
                                        <vc:ChartGrid LineThickness="0" Visibility="Collapsed"/>
                                    </vc:Axis.Grids>

                                </vc:Axis>

                            </vc:Chart.AxesX>





                            <vc:Chart.Series>
                                <vc:DataSeries ShowInLegend="false"  LabelStyle="Outside" LabelFontColor="Black" RenderAs="Bubble" MarkerSize="5" AxisYType="Primary" MarkerType="Triangle" LabelEnabled="true"  >
                                  
                                       
                                
                                        <vc:DataSeries.Color>
                                         
                                        <ImageBrush ImageSource="../Images/boat1.png"  />
                                          
                                        </vc:DataSeries.Color>
                                 
                                    <vc:DataSeries.DataMappings>

                                        <vc:DataMapping MemberName="XValue" Path="DealerCount" ></vc:DataMapping>
                                        <vc:DataMapping MemberName="YValue" Path="DealerCount"  ></vc:DataMapping>
                                        <!--<vc:DataMapping MemberName="ZValue" Path="DealerCount"></vc:DataMapping>-->
                                        <vc:DataMapping MemberName="LabelText" Path="BDMname"></vc:DataMapping>

                                    </vc:DataSeries.DataMappings>

                                </vc:DataSeries>
                               
                               
                            </vc:Chart.Series>
                        </vc:Chart>

 

as of now i have added into background of vc chart.

btut its not working any one please tell me how to apply that to visifire bubblechart

?

Aug 8, 2012 at 9:37 AM

anyone give me reply plz

Coordinator
Aug 8, 2012 at 9:44 AM

You cannot use it directly as background, but this approach should work:

<Grid>
   <it:ExtendedImage Source="{Binding MyImage}" />
   <vc:Chart Background="Transparent" />
</Grid>

Aug 8, 2012 at 9:52 AM

亲,不能哦。

你可以试试把图片放到最底层。然后其他放到顶层。

Aug 8, 2012 at 9:53 AM

牛逼人物出现,膜拜一哈。

Aug 8, 2012 at 9:53 AM
malignate88 wrote:

You cannot use it directly as background, but this approach should work:

<Grid>
   <it:ExtendedImage Source="{Binding MyImage}" />
   <vc:Chart Background="Transparent" />
</Grid>

 

牛逼人物出现,膜拜一哈。

Aug 9, 2012 at 11:41 AM

Thnks malignate...Its working now.!!

thanks to badneo..