-1

I have displayed a column chart using asp Chart control on a button click. It is working. Now I want to set some timer to display each column (like animated) using timer when the page loads. How is it possible without using any libraries? 

<asp:Chart ID="Chart1" Visible="false" runat="server" 
    BackColor="DarkRed" BackImageAlignment="Center" 
        BackImageTransparentColor="MediumVioletRed" BackSecondaryColor="White" 
        BorderlineDashStyle="DashDotDot" Palette="Excel" Height="390px" 
        Width="800px">
        <Titles>
    <asp:Title Font="Times New Roman, 12pt, style=Bold" Name="Title1"  ForeColor="White"
        Text="Sample Test">
    </asp:Title>
</Titles>
 <Series>
 <asp:Series Name="Series1" XValueMember="month" YValueMembers="sales"  ChartType="Column"
CustomProperties="DrawingStyle=LightToDark, DrawSideBySide=True" Color="#800033" IsValueShownAsLabel="True"  LabelForeColor="#800033">
</asp:Series> 
    </Series>
  <ChartAreas>
   <asp:ChartArea Name="ChartArea1" BorderColor="Transparent">               
   </asp:ChartArea>
   </ChartAreas>
   </asp:Chart>


    public void BindDatatoChart1()
{
    Chart1.Visible = true;
    DataTable dt = new DataTable();
    using (SqlConnection cn = obj.getcon())
    {
        string sql = "select * from sample1 order by id";
        using (SqlCommand cmd = new SqlCommand(sql, cn))
        {
            using (SqlDataAdapter da = new SqlDataAdapter(cmd))
            {
                da.Fill(dt);
            }

        }
    }
    System.Timers.Timer timer = new System.Timers.Timer();
    timer.Interval = 15;
    timer.Start();
    Chart1.DataSource = dt;
    Chart1.DataBind();
    }
user2431727
  • 877
  • 2
  • 15
  • 46

1 Answers1

0

This is not really an ASP.NET question. I think you should be considering this purely from the client side. You can accomplish what you want using pure CSS animation - and you also probably need to, since ASP.NET is a server-side technology and therefore not going to handle animation for you. You can use css keyframes to set the initial height of the columns to 0, then transition to 100% over a given time. See this Stack Overflow question.

Community
  • 1
  • 1
see sharper
  • 11,505
  • 8
  • 46
  • 65
  • Good idea. Can you help? – user2431727 Apr 05 '17 at 06:13
  • Well the thing is, you need CSS selectors for the columns you want to animate and that is why ASP.NET WebForms is not ideal for the problem, because you don't have full control of the HTML. You would need to examine the markup for the chart and find a way to select the columns. If you can do that, then the method I linked above should show you how to do it. You could use the transform: scale(x,y) CSS property to animate the height. – see sharper Apr 05 '17 at 23:52