Stacked Chart Bar binding with xml/db

[Ravi Kumar]

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

[Missing User]

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

[Ravi Kumar]

Thanks for reply.

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

Regards
Ravi

[Missing User]

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

[Ravi Kumar]

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

[Missing User]

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