Binding line chart with datasource

Thread is closed for posting
3 posts, 0 answers
  1. Mansi
    Mansi avatar
    63 posts
    Member since:
    Feb 2009

    Posted 18 Nov 2009 Link to this post

    Hi,

    I need to draw a chart based on the data fetched from the database runtime.
    There are two files attached, "Data" is the result which dataset say "ds1" contains.
    And "Chart", what I am getting by binding the chart with "ds1".
    The issue is, it does not show the 'x-axis' values properly in chart, 'y-axis' are displayed correctly.

    Here is a code, which i am using to display the chart. There is one panel on the form, and i am adding radChart at runtime to it.

        RadChart RadChart1 = new RadChart(); 
     
                     RadChart1.AutoLayout = true
                     RadChart1.Skin = "Vista"
     
                     RadChart1.Width = Unit.Pixel(720); 
                     RadChart1.Height = Unit.Pixel(450); 
     
                     RadChart1.ChartTitle.TextBlock.Text = "Details of date '" + Convert.ToDateTime(ds1.Tables[0].Rows[0]["TestDate"]).ToShortDateString() + "'"
     
                    ChartSeries chartSeries = new ChartSeries(); 
                     chartSeries.Appearance.LabelAppearance.Visible = false
                     chartSeries.Name = "CPM"
                     chartSeries.Type = ChartSeriesType.Line; 
                     chartSeries.Appearance.LineSeriesAppearance.Color = System.Drawing.Color.BlueViolet;              
                     // visually enhance the data points 
                     chartSeries.Appearance.PointMark.Dimensions.Width = 5; 
                     chartSeries.Appearance.PointMark.Dimensions.Height = 5; 
                     chartSeries.Appearance.PointMark.FillStyle.MainColor = System.Drawing.Color.Black; 
                     chartSeries.Appearance.PointMark.Visible = true;            
                     chartSeries.DataYColumn = "CPM"
                         
                     RadChart1.Series.Add(chartSeries); 
     
                     RadChart1.PlotArea.XAxis.Appearance.LabelAppearance.RotationAngle = 30; 
                     RadChart1.PlotArea.XAxis.Appearance.LabelAppearance.Position.AlignedPosition = Telerik.Charting.Styles.AlignedPositions.Right; 
              
                     RadChart1.PlotArea.XAxis.Appearance.TextAppearance.TextProperties.Color = Color.Black; 
                   
                     RadChart1.PlotArea.XAxis.AxisLabel.Visible = true
                     RadChart1.PlotArea.XAxis.AutoScale =false
                     RadChart1.PlotArea.XAxis.AddRange(1, 7, 1); 
             
                     RadChart1.PlotArea.XAxis[0].TextBlock.Text = "39"
                     RadChart1.PlotArea.XAxis[1].TextBlock.Text = "40"
                     RadChart1.PlotArea.XAxis[2].TextBlock.Text = "41"
                     RadChart1.PlotArea.XAxis[3].TextBlock.Text = "42"
                     RadChart1.PlotArea.XAxis[4].TextBlock.Text = "43"
                     RadChart1.PlotArea.XAxis[5].TextBlock.Text = "44"
                     RadChart1.PlotArea.XAxis[6].TextBlock.Text = "45"
     
                     RadChart1.PlotArea.XAxis.AxisLabel.TextBlock.Text = "Length"
                     RadChart1.PlotArea.XAxis.AxisLabel.Visible = true
     
                     RadChart1.PlotArea.YAxis.Appearance.TextAppearance.TextProperties.Color = Color.Black;          
                     RadChart1.PlotArea.YAxis.AxisLabel.TextBlock.Text = "CPM";             
                     RadChart1.PlotArea.YAxis.AxisLabel.Visible = true
                     RadChart1.PlotArea.YAxis.AxisMode = ChartYAxisMode.Extended;             
          
                       
                       RadChart1.DataSource = ds1; 
     
                       RadChart1.ItemDataBound += new EventHandler<ChartItemDataBoundEventArgs>(RadChart1_ItemDataBound); 
     
                     
                        RadChart1.DataBind(); 
                        pnlGraph.Controls.Add(RadChart1); 
                        RadToolTipManager1.ToolTipZoneID = "RadChart1"

    And the Event to display the tooltip.

     protected void RadChart1_ItemDataBound(object sender, Telerik.Charting.ChartItemDataBoundEventArgs e) 
        { 
            e.SeriesItem.ActiveRegion.Tooltip += "Length:" + ((DataRowView)e.DataItem)["Length"].ToString() + " and CPM: " + e.SeriesItem.YValue + " for Club: " + ((DataRowView)e.DataItem)["Club"].ToString(); 
        } 


    As, in Chart image, in tooltip, it is showing "Length" (x-axis) as "44", but showing point on "39".

    It seems, it assigns Y values to X values in sequence.
    Is it possible to display this kind of data in Rad Line Chart ?

    What changes should I need to do ?
  2. Ves
    Admin
    Ves avatar
    2927 posts

    Posted 20 Nov 2009 Link to this post

    Hello Mansi,

    I am not really sure about the expected result. According the data sheet you have attached it appears that the "1-wood" and "LW" points will coincide - they both have cpm=270 and length=41.00. In addition, "PW" and "2 hybrid" will form a vertical line from 280 to 300 as they both have length=40.00. Can you please attach a scratch of the expected result, so that we can provide you with instructions, focused on it? Thanks.

    Best regards,
    Ves
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
  3. Mansi
    Mansi avatar
    63 posts
    Member since:
    Feb 2009

    Posted 20 Nov 2009 Link to this post

    Hi,

    Thanks for the reply. I have solved the issue.

    Actually it is pointing to wrong x-values in graph. As you can see in tool tip, it is showing value - 44 for length, and in graph, it is at 39 - length.

    The problem was, i had assigned  ,
                        chartSeries.DataYColumn = "CPM";

    but not for X. So, I did that, and i think that thing was creating problem.

      chartSeries.DataXColumn = "Length"; - was missing.



Back to Top