Question

How can you bind data from an SQL Server to a telerik line chart?

At the moment my setup is that I have a scheduled task which retrieves some information (for the sake of simplicity, let’s say this is just an integer value). This information is then stored in my database, along with the datetime the scheduled task was run at.

What I would like to do is create a graph of this integer over time (with the value marked along the Y axis and time along the X).

Most of the bindings examples on the Teleriks website involve a static class, where data is hardcoded into the XAML file.

What is the best way for me to go about structuring and retrieving the data as I would like to ?

I was looking at this example, however it does not go into much detail for how the data is actually retrieved from the binding and how the binding works.

Thanks very much.

Answer 1

well recently I was involved in such a project and here is how I did mine(although mine was a little complicated as I had to show multiple lines on same chart), hope it helps you.

My Data table was in the following format :

Tours   dtMonthno   dtMonth               dtYear
115                1    Jan                 2012
102                2    Feb                 2012
105                3    Mar                 2012
78                 4    Apr                 2012

and my code is as follow, where the y-axis is Tours and x-axis is the dtMonthno(actual month number):

           DataTable dt = GetGroupChartData(Convert.ToDateTime(txtStartDate.Text), Convert.ToDateTime(txtEndDate.Text + " 23:59"));

            ChartSeries chartSeries = new ChartSeries();
            radGroups.Clear();
            chartSeries.DataYColumn = "Tours";
            radGroups.ChartTitle.TextBlock.Text = "Groups";
            chartSeries.Name = "Tours";

            radGroups.PlotArea.XAxis.LayoutMode = Telerik.Charting.Styles.ChartAxisLayoutMode.Inside;
            chartSeries.Appearance.LineSeriesAppearance.Color = System.Drawing.Color.Blue; 

            //set y axis color
            radGroups.PlotArea.YAxis.AxisLabel.TextBlock.Appearance.TextProperties.Color = System.Drawing.Color.Red;
            radGroups.PlotArea.YAxis.Appearance.Width = 3;
            radGroups.PlotArea.YAxis.Appearance.Color = System.Drawing.Color.Red; 
            chartSeries.Type = ChartSeriesType.Line;

            radGroups.PlotArea.XAxis.DataLabelsColumn = "dtMonth";
            radGroups.PlotArea.XAxis.AxisLabel.TextBlock.Text = "Months";

            //set x axis color
            radGroups.PlotArea.XAxis.AxisLabel.TextBlock.Appearance.TextProperties.Color = System.Drawing.Color.Red; 
            radGroups.PlotArea.XAxis.Appearance.Width = 3;
            radGroups.PlotArea.XAxis.Appearance.Color = System.Drawing.Color.Red;
            radGroups.AddChartSeries(chartSeries);

            // 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;

            radGroups.DataSource = dt;
            radGroups.DataBind();