Bind DataSet to Chart

Thread is closed for posting
5 posts, 0 answers
  1. ric c
    ric c avatar
    55 posts
    Member since:
    Mar 2005

    Posted 13 Apr 2011 Link to this post

    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

  2. Evgenia
    Admin
    Evgenia avatar
    1437 posts

    Posted 18 Apr 2011 Link to this post

    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

    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.

  3. ric c
    ric c avatar
    55 posts
    Member since:
    Mar 2005

    Posted 18 Apr 2011 Link to this post

    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)
  4. ric c
    ric c avatar
    55 posts
    Member since:
    Mar 2005

    Posted 20 Apr 2011 Link to this post

    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
  5. Evgenia
    Admin
    Evgenia avatar
    1437 posts

    Posted 25 Apr 2011 Link to this post

    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.
     
Back to Top