Bind DataSet to Chart

[ric c]

Hi
I Have the following DataSet structure:

Price__MakeID__SourceID__Day
100______1________1_______1 
101______1________1_______2 
101______1________1_______3 
101______1________1_______4 
101______1________1_______5 
101______1________1_______6 
102______1________1_______7 
102______1________1_______8 
102______1________1_______9 
100______1________2_______1 
102______1________2_______2 
102______1________2_______3 
102______1________2_______4 
103______1________2_______5 
103______1________2_______6 
102______1________2_______7 
101______1________2_______8 
100______1________2_______9 

100______2________1_______1 
101______2________1_______2 
101______2________1_______3 
101______2________1_______4 
101______2________1_______5 
101______2________1_______6 
102______2________1_______7 
102______2________1_______8 
102______2________1_______9 
100______2________2_______1 
102______2________2_______2 
102______2________2_______3 
102______2________2_______4 
103______2________2_______5 
103______2________2_______6 
102______2________2_______7 
101______2________2_______8 
100______2________2_______9 

Basically I am tracking the price of products from a number of sources over a number of days.

How would I bind this dataset to a Line Grid so that the y axis shows the price, the x axis shows the Day and lines on the grid show the variation in price by make (different color line for each source)

Any pointers would be great!

Thanks

[Evgenia]

Hello ric,

The following sample code snippet demonstrates how you can create a DataSet with two DataTables and bind the Chart to them. Note that the RadChart's DataSource is set to be the DataSet and each ChartSeries is bound to the columns of the DataTables by the following properties;
        - DataLabelsColumn for the XAxis which specifies to what property the XAxis Labels should be bound.
       - DataYColumn - the YValues for the Line's datapoints.

protected void Page_Load(object sender, EventArgs e)
   {
       DataTable tbl = new DataTable();
       DataColumn col = new DataColumn("Day");
       col.DataType = typeof(int);
       tbl.Columns.Add(col);
       col = new DataColumn("Price");
       col.DataType = typeof(int);
       tbl.Columns.Add(col);
       DataTable tbl1 = new DataTable();
       DataColumn col1 = new DataColumn("Day");
       col1.DataType = typeof(int);
       tbl1.Columns.Add(col1);
       col1 = new DataColumn("Value");
       col1.DataType = typeof(int);
       tbl1.Columns.Add(col1);
       Random r = new Random();
       for (int i = 0; i < 9; i++)
       {
           tbl.Rows.Add(new object[] { i, r.Next(1, 100) });
           tbl1.Rows.Add(new object[] { i, r.Next(1, 100) });
       }
       ChartSeries firstSerie = new ChartSeries("First Line");
       firstSerie.Type = ChartSeriesType.Line;
       firstSerie.DataYColumn = "Price";
       RadChart1.Series.Add(firstSerie);
       ChartSeries secondSerie = new ChartSeries("Second Line");
       secondSerie.Type = ChartSeriesType.Line;
       secondSerie.DataYColumn = "Value";
       RadChart1.Series.Add(secondSerie);
       RadChart1.PlotArea.XAxis.DataLabelsColumn = "Day";
       DataSet ds = new DataSet();
       ds.Tables.Add(tbl);
       ds.Tables.Add(tbl1);
       RadChart1.DataSource = ds;
       RadChart1.DataBind();
   }

Feel free to customize the code sample so that it meets your requirements.

Kind regards,
Evgenia
the Telerik team

[ric c]

Hi Thanks for the reply.

I have tried your example but I seem to be having a problem. Please see the attached screen grab of the chart that is produced using your code. The second line does not seem to be created using the random data in the datatable??

With my original example I use the following code to create a dataset that contains a number of datatables (one for each MakeID)

DataTable dtMain = ds.Tables[0];
List<string> manufacturers = (from p in dtMain.AsEnumerable()
                         select p.Field<int>("MakeID").ToString()).Distinct().ToList();

DataSet dsNew = new DataSet();

foreach (string str in manufacturers)
{
    dsNew.Tables.Add((from d in dtMain.AsEnumerable()
                      where d.Field<int>("MakeID").ToString().Equals(str)
                   select d).CopyToDataTable());
}

I then use the following 

foreach (DataTable d in dsNew.Tables)
            {
                ChartSeries cs = new ChartSeries(d.TableName);
                cs.Type = ChartSeriesType.Line;
                cs.DataYColumn = "Price";
                RadChart1.Series.Add(cs);
            }

            RadChart1.PlotArea.XAxis.DataLabelsColumn = "Day";

            RadChart1.DataSource = dsNew;
            RadChart1.DataBind();

but it only seem to create a graph with one line, Can you see what I'm doing wrong?

Thanks!
(using v2010.1.309.20)

[ric c]

Ok, I have got a little further but something weird is happening

foreach (DataTable d in dsNew.Tables)
            {
                string name = d.Rows[0]["Name"].ToString();
                ChartSeries series = new ChartSeries(name);//, Color.AntiqueWhite, Color.DarkBlue, ChartSeriesType.Line);
                series.Type = ChartSeriesType.Line;

                foreach (DataRow dr in d.Rows)
                {
                    ChartSeriesItem item = new ChartSeriesItem();
                    item.XValue = Convert.ToDouble(dr["Day"].ToString());
                    item.YValue = Convert.ToDouble(dr["Price"].ToString());
                    series.Items.Add(item);
                }

                RadChart1.Series.Add(series);
            }

            RadChart1.PlotArea.XAxis.DataLabelsColumn = "Day";

            RadChart1.DataSource = dsNew;
            RadChart1.DataBind();

 
using the above code will populate a bar chart showing all the columns in my dataset but only the data for the first datatable. If I comment out :
RadChart1.DataSource = dsNew;
            RadChart1.DataBind();

and reload the page (via postback from a button) the chart works as expected and shows the legend that lists all the names of all my datatables within the dataset and the line graph shows a line for each datatable with the correct data plotted. If I then refresh the page and cause the postback I just get an empty graph..

Not really sure what is going on. Surly binding a DataSet like this to a graph is a common task? Any help would be great!

Thanks

[Evgenia]

Hello ric,



The following source code is working as expected on our local tests - creates 2 Line Series where the data for each is taken from DataTable. Note that there is no need to set the DataSet as DataSource for the RadChart in this case since the Series Items are bound directly to DataTables:

protected void Page_Load(object sender, EventArgs e)
   {
       DataTable tbl = new DataTable();
       DataColumn col = new DataColumn("Value");
       col.DataType = typeof(double);
       tbl.Columns.Add(col);
       col = new DataColumn("XValue");
       col.DataType = typeof(double);
       tbl.Columns.Add(col);

       DataTable tbl1 = new DataTable();
       DataColumn col1 = new DataColumn("Value1");
       col1.DataType = typeof(double);
       tbl1.Columns.Add(col1);
       col1 = new DataColumn("XValue1");
       col1.DataType = typeof(double);
       tbl1.Columns.Add(col1);

       int size = 15;
       int maxLen = size.ToString().Length;
       for (int i = 1; i <= size; i++)
       {
           tbl.Rows.Add(new object[] { i * 2, i });
           tbl1.Rows.Add(new object[] { i * 3, i });
       }

       DataSet dsNew = new DataSet();
       dsNew.Tables.Add(tbl);
       dsNew.Tables.Add(tbl1);

       ChartSeries series1 = new ChartSeries("Series 1");

       series1.Type = ChartSeriesType.Line;

       foreach (DataRow dr in dsNew.Tables[0].Rows)
       {

           ChartSeriesItem item = new ChartSeriesItem();

           item.XValue = Convert.ToDouble(dr["XValue"].ToString());

           item.YValue = Convert.ToDouble(dr["Value"].ToString());

           series1.Items.Add(item);

       }
       RadChart1.Series.Add(series1);

       ChartSeries series2 = new ChartSeries("Series 2");

       series2.Type = ChartSeriesType.Line;
       foreach (DataRow dr in dsNew.Tables[1].Rows)
       {

           ChartSeriesItem item = new ChartSeriesItem();

           item.XValue = Convert.ToDouble(dr["XValue1"].ToString());

           item.YValue = Convert.ToDouble(dr["Value1"].ToString());

           series2.Items.Add(item);

       }
       RadChart1.Series.Add(series2);

       RadChart1.PlotArea.XAxis.DataLabelsColumn = "Day";
   }

Regards, Evgenia
the Telerik team



Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.