Stacked Chart Bar binding with xml/db

Thread is closed for posting
6 posts, 2 answers
  1. Ravi Kumar
    Ravi Kumar avatar
    37 posts
    Member since:
    May 2010

    Posted 07 Mar 2011 Link to this post

    Hi,

    I ,m new bee for telerik charting. i want to display stacked chart from xml/database. i have attached chart pic to design by using xml file. Can you guys suggest how to implement the thing.

    XML File Data:

    <?xml version="1.0" encoding="utf-8" ?>
    <LaborHours>
      <LaborHour>
        <EmployeeID>100018</EmployeeID>
        <EmployeeName>Andrew Anderson</EmployeeName>
        <InTime>5/24/10 7:57 AM</InTime>
        <OutTime></OutTime>
        <OnClock>3:48</OnClock>
        <WTDTotal>29.30</WTDTotal>
        <WTDOvertime>1.50</WTDOvertime>
        <Total>42.68</Total>
        <Overtime>4.17</Overtime>
      </LaborHour>
      <LaborHour>
        <EmployeeID>100004</EmployeeID>
        <EmployeeName>Bob Barley</EmployeeName>
        <InTime>5/24/10 7:59 AM</InTime>
        <OutTime></OutTime>
        <OnClock>3:46</OnClock>
        <WTDTotal>42.60</WTDTotal>
        <WTDOvertime>4.60</WTDOvertime>
        <Total>46.50</Total>
        <Overtime>8.83</Overtime>
      </LaborHour>
      <LaborHour>
        <EmployeeID>100006</EmployeeID>
        <EmployeeName>Cathey Cantrell</EmployeeName>
        <InTime>5/24/10 7:57 AM</InTime>
        <OutTime></OutTime>
        <OnClock>3:46</OnClock>
        <WTDTotal>27.87</WTDTotal>
        <WTDOvertime>0.00</WTDOvertime>
        <Total>32.10</Total>
        <Overtime>0.00</Overtime>
      </LaborHour>
      <LaborHour>
        <EmployeeID>100009</EmployeeID>
        <EmployeeName>David Dyson</EmployeeName>
        <InTime>5/24/10 11:59 AM</InTime>
        <OutTime>5/24/10 8:02 AM</OutTime>
        <OnClock></OnClock>
        <WTDTotal>31.50</WTDTotal>
        <WTDOvertime>0.00</WTDOvertime>
        <Total>39.75</Total>
        <Overtime>0.00</Overtime>
      </LaborHour>
      <LaborHour>
        <EmployeeID>100015</EmployeeID>
        <EmployeeName>Eddie Edwords</EmployeeName>
        <InTime>5/24/10 12:01 AM</InTime>
        <OutTime>5/24/10 8:02 AM</OutTime>
        <OnClock></OnClock>
        <WTDTotal>31.50</WTDTotal>
        <WTDOvertime>0.00</WTDOvertime>
        <Total>39.50</Total>
        <Overtime>0.00</Overtime>
      </LaborHour>
      <LaborHour>
        <EmployeeID>100024</EmployeeID>
        <EmployeeName>Fiona Finegate</EmployeeName>
        <InTime>5/23/10 3:58 PM</InTime>
        <OutTime>5/24/10 12:01 AM</OutTime>
        <OnClock></OnClock>
        <WTDTotal>32.00</WTDTotal>
        <WTDOvertime>0.00</WTDOvertime>
        <Total>32.00</Total>
        <Overtime>0.00</Overtime>
      </LaborHour>
      <LaborHour>
        <EmployeeID>100061</EmployeeID>
        <EmployeeName>George Gilespy</EmployeeName>
        <InTime>5/23/10 4:00 PM</InTime>
        <OutTime>5/24/10 12:02 AM</OutTime>
        <OnClock></OnClock>
        <WTDTotal>41.50</WTDTotal>
        <WTDOvertime>1.50</WTDOvertime>
        <Total>41.50</Total>
        <Overtime>1.50</Overtime>
      </LaborHour>
      <LaborHour>
        <EmployeeID>100088</EmployeeID>
        <EmployeeName>Haana Henderson</EmployeeName>
        <InTime>5/23/10 4:01 PM</InTime>
        <OutTime>5/24/10 12:01 AM</OutTime>
        <OnClock></OnClock>
        <WTDTotal>32.40</WTDTotal>
        <WTDOvertime>0.00</WTDOvertime>
        <Total>40.00</Total>
        <Overtime>0.00</Overtime>
      </LaborHour>
    </LaborHours>




    Thanks
    Ravi
  2. Answer
    Missing user
    Missing user avatar

    Posted 10 Mar 2011 Link to this post

    Hello Ravi Kumar,

    You can create three ChartSeries which type is Stacked Bar and set the RadChart.SeriesOrientation to Horizontal. You can bind the RadChart to the XML file directly at run-time or at design-time. Other approach is to use LINQ to XML to read the XML file and create a custom data object which you can bind to the RadChart.DataSource. Thus you will be able to manipulate the data before the binding. More information about Data Binding to an XML file can be found here:
    http://www.telerik.com/help/aspnet-ajax/buildingdatabindxml.html
    http://demos.telerik.com/aspnet-ajax/chart/examples/databinding/xml/defaultcs.aspx

    Let me know if I can assist you further.

    Regards,
    Polina
    the Telerik team
    Registration for Q1 2011 What’s New Webinar Week is now open. Mark your calendar for the week starting March 21st and book your seat for a walk through all the exciting stuff we ship with the new release!
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Ravi Kumar
    Ravi Kumar avatar
    37 posts
    Member since:
    May 2010

    Posted 05 Apr 2011 Link to this post

    Thanks for reply.

    Can you provide sample code for above xml file? it will be more helpful to me.

    Regards
    Ravi
  5. Answer
    Missing user
    Missing user avatar

    Posted 11 Apr 2011 Link to this post

    Hi Ravi Kumar,

    As I can understand from the image provided you need additional calculations based on the data in the XML file in order to populate the Chart. This means that you need to read the XML file and make these calculations based on the taken data. After that you need to create a custom object with the modified data which will be bound to the chart.  As I mentioned in the previous post, the reading of the XML file with LINQ to XML is not related to the RadChart functionality. For example you can create a model class:
    public class LaborHour
    {
        public int EmployeeID { get; set; }
        public string EmployeeName { get; set; }
        public double Regular { get; set; }
        public double Overtime { get; set; }
        public double Projected { get; set; }
    }

    and read the XML file:
    private List<LaborHour> GetXMLData()
    {
        IEnumerable<XElement> xmlData = (from l in XElement.Load(Server.MapPath("~/MyXMLFile.xml")).Elements("LaborHour") select l);
        List<LaborHour> LaborHourData = new List<LaborHour>();
        foreach (XElement xmlItemData in xmlData)
        {
            LaborHour laborHour = new LaborHour();
             
            laborHour.EmployeeID = int.Parse(xmlItemData.Element("EmployeeID").Value);
            laborHour.EmployeeName = xmlItemData.Element("EmployeeName").Value;
            laborHour.Regular =
                double.Parse(xmlItemData.Element("WTDTotal").Value)
                - double.Parse(xmlItemData.Element("WTDOvertime").Value);
            laborHour.Overtime = double.Parse(xmlItemData.Element("WTDOvertime").Value);
            laborHour.Projected =
                double.Parse(xmlItemData.Element("Total").Value)
                - double.Parse(xmlItemData.Element("WTDTotal").Value);
     
            LaborHourData.Add(laborHour);
        }
     
        return LaborHourData;
    }

    You can create the StackedBar chart as followed:
    radChart.DataSource = GetXMLData();
    radChart.PlotArea.YAxis.Appearance.ValueFormat = ChartValueFormat.Number;
    radChart.PlotArea.YAxis.Appearance.CustomFormat = "#Y{##:00}";
    radChart.PlotArea.YAxis.AutoScale = false;
    radChart.PlotArea.YAxis.AddRange(0, 56, 8);
     
    radChart.PlotArea.XAxis.DataLabelsColumn = "EmployeeName";
     
    //add the series 1
    ChartSeries series1 = new ChartSeries();
    series1.DataYColumn = "Regular";
    series1.Name = "Regular";
    series1.Type = ChartSeriesType.StackedBar;
    series1.DefaultLabelValue = "";
    radChart.Series.Add(series1);
     
    //add the series 2
    ChartSeries series2 = new ChartSeries();
    series2.DataYColumn = "Overtime";
    series2.Name = "Overtime";
    series2.Type = ChartSeriesType.StackedBar;
    series2.DefaultLabelValue = "";
    radChart.Series.Add(series2);
     
    //add the series 3
    ChartSeries series3 = new ChartSeries();
    series3.DataYColumn = "Projected";
    series3.Name = "Projected";
    series3.Type = ChartSeriesType.StackedBar;
    series3.DefaultLabelValue = "";
    radChart.Series.Add(series3);
     
    radChart.DataBind();

    I hope this helps.

    Best wishes,
    Polina
    the Telerik team
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  6. Ravi Kumar
    Ravi Kumar avatar
    37 posts
    Member since:
    May 2010

    Posted 11 Apr 2011 Link to this post

    Thanks for reply.

    I have a secnario, let say 

                                     Issue1      Issue2   

    Regular Hours           25              35  
    Overtime Hours          7                7
    Projected Hours         60             10

    i,m setting YAxis2 range from 0 to Max Value of statcked bar value and step is 8.The problem is last YAxis2 text value is getting outside
    from ploa area. to know more about the problem. please find the attached images.

    Code for setting YAxis2 axis text value

     

     

     

    if (EmployeesChart.PlotArea.YAxis.MaxValue > EmployeesChart.PlotArea.YAxis2.MaxValue)

     

     

    {

    EmployeesChart.PlotArea.YAxis2.AutoScale = false;

     

     

    EmployeesChart.PlotArea.YAxis2.Visible = Telerik.Charting.Styles.

    ChartAxisVisibility.True;

     

     

    EmployeesChart.PlotArea.YAxis2.AddRange(0, EmployeesChart.PlotArea.YAxis.MaxValue, 8);

     

     

    int mins = 0;

     

     

     

    int hours = 0;

     

     

     

    int itemCount = EmployeesChart.PlotArea.YAxis2.Items.Count;

     

     

     

    for (int i = 0; i < itemCount; i++)

     

     

    {

     

    EmployeesChart.PlotArea.YAxis2[i].TextBlock.Text =

    String.Format("{0:0}", hours) + ":" + string.Format("{0:00}", mins); ;

     

     

    hours = hours + 8;

     

    }

     

    }

     

     

    Any help will be appriciated.
    Thanks
    Ravi

  7. Missing user
    Missing user avatar

    Posted 14 Apr 2011 Link to this post

    Hello Ravi Kumar,

    You can get the MaxValue for the second Y axis via the data, bound to the chart, rather than through the first Y axis max value. You can find an example in the attached project.

    I hope this helps.

    Best wishes,
    Polina
    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
UI for ASP.NET Ajax is Ready for VS 2017