locked
RealTime graphs with sql db - fetching updated data every few seconds RRS feed

  • Question

  • hi, I need to create a realtime graph with data coming from sql server. the server will need to be queried every few secs to fetch new data and update the live graph - how can i do this with ms charts. are there any examples??

    thankyou

    Friday, April 23, 2010 10:47 AM

All replies

  • Hi,

    You can download the sample source code for MS Chart control in the following link.

    Samples Environment for Microsoft Chart Controls

    You can download samples for web and windows environment in there.

    Download the Windows Forms Samples, extract it, open the solution in VS 2008 and run the project.

    You can find a good sample on Real Time Data implementation under Contents Tab->Working With Data->Real Time Data in the project output GUI.

    • Proposed as answer by le vu Friday, August 17, 2012 6:18 AM
    Friday, April 23, 2010 11:15 AM
  • hi thanks ramesh,

    I am developing in web application, I have looked at the example and the current code I have is:

    ------------------------------------------------------------c#
     protected void Timer1_Tick(object sender, EventArgs e)
     {
      Random rand = new Random();
    
      // Add several random point into each series
      foreach (Series series in this.Chart1.Series)
      {
       double lastYValue = series.Points[series.Points.Count - 1].YValues[0];
       double lastXValue = series.Points[series.Points.Count - 1].XValue + 1;
       for (int pointIndex = 0; pointIndex < 5; pointIndex++)
       {
        lastYValue += rand.Next(-3, 4);
        if (lastYValue >= 100.0)
        {
         lastYValue -= 25.0;
        }
        else if (lastYValue <= 10.0)
        {
         lastYValue += 25.0;
        }
        series.Points.AddXY(lastXValue++, lastYValue);
       }
      }
    
      // Remove points from the left chart side if number of points exceeds 100.
      while (this.Chart1.Series[0].Points.Count > 100)
      {
       // Remove series points
       foreach (Series series in this.Chart1.Series)
       {
        series.Points.RemoveAt(0);
       }
      }
    
      // Adjust categorical scale
      double axisMinimum = this.Chart1.Series[0].Points[0].XValue;
      this.Chart1.ChartAreas[0].AxisX.Minimum = axisMinimum;
      this.Chart1.ChartAreas[0].AxisX.Maximum = axisMinimum + 100;
    ------------------------------------------------------------------------------------aspx
    asp:UpdatePanel ID="UpdatePanel1" runat="server">
     <ContentTemplate>
    
      <asp:Chart ID="Chart1" runat="server" Height="295px" Width="567px"
       BackColor="#D3DFF0" BorderLineStyle="Solid" BackGradientEndColor="White"
       BackGradientType="TopBottom" BorderlineWidth="2" BorderlineColor="26, 59, 105"
       EnableViewState="true">
       <Series>
        <asp:Series XValueType="Double" Name="Series1" ChartType="Spline" BorderColor="180, 26, 59, 105"
         YValueType="Double" BorderWidth="2" ShadowColor="254, 0, 0, 0" ShadowOffset="1">
         <Points> 
          <asp:DataPoint XValue="0" YValues="32"/>
         </Points>
        </asp:Series>
       </Series>
       <ChartAreas>
        <asp:ChartArea Name="ChartArea1" BorderColor="64, 64, 64, 64" BorderDashStyle="Solid" BackSecondaryColor="White"
         BackColor="64, 165, 191, 228" ShadowColor="Transparent" BackGradientStyle="TopBottom">
         <Position Y="2" Height="94" Width="94" X="2"></Position>
         <AxisY LineColor="64, 64, 64, 64" Maximum="100">
          <LabelStyle Font="Trebuchet MS, 8.25pt, style=Bold"></LabelStyle>
          <MajorGrid LineColor="64, 64, 64, 64"></MajorGrid>
         </AxisY>
         <AxisX Title="sdfjkdhf" LineColor="64, 64, 64, 64" IsMarginVisible="False" Maximum="100" Minimum="0" IsStartedFromZero="False">
          <LabelStyle Font="Trebuchet MS, 8.25pt, style=Bold"></LabelStyle>
          <MajorGrid LineColor="64, 64, 64, 64" ></MajorGrid>
         </AxisX>
        </asp:ChartArea>
       </ChartAreas>
       <BorderSkin SkinStyle="Emboss" />
      </asp:Chart>
      
      <asp:Timer ID="Timer1" runat="server" Interval="1000" ontick="Timer1_Tick">
      </asp:Timer>
    
     </ContentTemplate>
     </asp:UpdatePanel>

     but how can i integrate this to use sql data source where the data is being updated.

    Friday, April 23, 2010 11:21 AM
  • It seems that some sample data is populated in the timer's tick event. You may need to retrieve data from sql database and populate it with chart in there.
    Friday, April 23, 2010 11:45 AM
  • hello again,

    i have changed the codebehind file slightly:

    protected void Timer1_Tick(object sender, EventArgs e)
      {
        DAL dal = new DAL();
        SqlDataReader reader = dal.GetLiveMeterReads();
    
        // Add several random point into each series
        foreach (Series series in this.Chart1.Series)
        {
          double lastYValue = series.Points[series.Points.Count - 1].YValues[0];
          double lastXValue = series.Points[series.Points.Count - 1].XValue + 1;
          for (int pointIndex = 0; pointIndex < 5; pointIndex++)
          {
            //series.Points.AddXY(lastXValue++, lastYValue);
            series.Points.DataBindXY(reader, "Reading_DateTime", reader, "Delivered_Or_Movement");
          }
        }
    
        // Remove points from the left chart side if number of points exceeds 100.
        while (this.Chart1.Series[0].Points.Count > 100)
        {
          // Remove series points
          foreach (Series series in this.Chart1.Series)
          {
            series.Points.RemoveAt(0);
          }
        }
    
        // Adjust categorical scale
        double axisMinimum = this.Chart1.Series[0].Points[0].XValue;
        this.Chart1.ChartAreas[0].AxisX.Minimum = axisMinimum;
        this.Chart1.ChartAreas[0].AxisX.Maximum = axisMinimum + 100;
    
      }

     it is still not working with the above code - it gives a index out of range error.

    Friday, April 23, 2010 12:42 PM