[Solved] Binding line chart with datasource

[Mansi]

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 ?

[Ves]

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.

[Mansi]

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.