Hey Telerik,
I have a stored proc which is like this:
ALTER proc [dbo].[project_Users_Total_Time_Sheet_Report]
@Start_date datetime,
@Project_id int,
@Finish_date datetime,
@account_id int
as
declare @expensetype int
set @expensetype=(select id from accounts_expensestype
where account_id=@account_id and action=1)
select
sum(project_projects_expenses_user.expense_value) AS
total,project_companies_contacts.contact_name_en ,project_task.subject
from
project_projects_expenses_user
join project_companies_contacts on project_companies_contacts.id=project_projects_expenses_user.user_id
join project_task on project_task.id=project_projects_expenses_user.task_id
where project_projects_expenses_user.project_id=@Project_id and project_projects_expenses_user.doc_date between @Start_date and @Finish_date and project_projects_expenses_user.expense_type_id=@expensetype
group by project_companies_contacts.contact_name_en ,project_task.subject order by project_companies_contacts.contact_name_en ,project_task.subject
Now i want to select the task name as label x and y to be total and the bars to the chart to be contact name.. so i want for each task view bars to contacts with the same task for example programming task has con 1, con 2 , con 3 as bars.. i want it to be something like the attached picture with the question.
how can i achieve something like that by C# code with my proc?
I have a stored proc which is like this:
ALTER proc [dbo].[project_Users_Total_Time_Sheet_Report]
@Start_date datetime,
@Project_id int,
@Finish_date datetime,
@account_id int
as
declare @expensetype int
set @expensetype=(select id from accounts_expensestype
where account_id=@account_id and action=1)
select
sum(project_projects_expenses_user.expense_value) AS
total,project_companies_contacts.contact_name_en ,project_task.subject
from
project_projects_expenses_user
join project_companies_contacts on project_companies_contacts.id=project_projects_expenses_user.user_id
join project_task on project_task.id=project_projects_expenses_user.task_id
where project_projects_expenses_user.project_id=@Project_id and project_projects_expenses_user.doc_date between @Start_date and @Finish_date and project_projects_expenses_user.expense_type_id=@expensetype
group by project_companies_contacts.contact_name_en ,project_task.subject order by project_companies_contacts.contact_name_en ,project_task.subject
Now i want to select the task name as label x and y to be total and the bars to the chart to be contact name.. so i want for each task view bars to contacts with the same task for example programming task has con 1, con 2 , con 3 as bars.. i want it to be something like the attached picture with the question.
how can i achieve something like that by C# code with my proc?
7 Answers, 1 is accepted
0
mahmoud
Top achievements
Rank 1
answered on 02 Feb 2014, 12:22 PM
no one here knows how to achieve this , or even give me reference link to help me with it!
0
mahmoud
Top achievements
Rank 1
answered on 02 Feb 2014, 12:48 PM
To be clear so you can picture the whole thing.. look at the attached picture its to the page when i click view button it fills the grid but the chart no.. so can u think with me for a solution
0
mahmoud
Top achievements
Rank 1
answered on 02 Feb 2014, 03:23 PM
OK here's what i got so far ... take a look at the attached pic
now i want to merge task350 together with 2 bars for each accounts ahmed and admin with different colors.. can u help me please ?
now i want to merge task350 together with 2 bars for each accounts ahmed and admin with different colors.. can u help me please ?
0
mahmoud
Top achievements
Rank 1
answered on 02 Feb 2014, 03:26 PM
Here's the aspx page:
<telerik:RadChart ID="RadChart1" runat="server"
Width="465px" Height="260px" DefaultType="Bar" OnItemDataBound="RadChart1_ItemDataBound"
AutoLayout="true" AutoTextWrap="true" CreateImageMap="false">
<ChartTitle>
<TextBlock Text="Time Sheet">
</TextBlock>
</ChartTitle>
<Series>
<telerik:ChartSeries DataYColumn="total" Name="total" Type="Bar">
<Appearance LegendDisplayMode="ItemLabels">
</Appearance>
</telerik:ChartSeries>
</Series>
</telerik:RadChart>
Here's my code:
RadChart1.Series[0].DataYColumn = "total";
RadChart1.PlotArea.XAxis.DataLabelsColumn = "subject";
RadChart1.PlotArea.XAxis.Appearance.LabelAppearance.RotationAngle = 300;
RadChart1.PlotArea.XAxis.Appearance.TextAppearance.TextProperties.Color =
System.Drawing.Color.Blue;
RadChart1.PlotArea.Appearance.Dimensions.Margins.Bottom =
Telerik.Charting.Styles.Unit.Percentage(30);
RadChart1.DataSource = dt;
RadChart1.DataBind();
<telerik:RadChart ID="RadChart1" runat="server"
Width="465px" Height="260px" DefaultType="Bar" OnItemDataBound="RadChart1_ItemDataBound"
AutoLayout="true" AutoTextWrap="true" CreateImageMap="false">
<ChartTitle>
<TextBlock Text="Time Sheet">
</TextBlock>
</ChartTitle>
<Series>
<telerik:ChartSeries DataYColumn="total" Name="total" Type="Bar">
<Appearance LegendDisplayMode="ItemLabels">
</Appearance>
</telerik:ChartSeries>
</Series>
</telerik:RadChart>
Here's my code:
RadChart1.Series[0].DataYColumn = "total";
RadChart1.PlotArea.XAxis.DataLabelsColumn = "subject";
RadChart1.PlotArea.XAxis.Appearance.LabelAppearance.RotationAngle = 300;
RadChart1.PlotArea.XAxis.Appearance.TextAppearance.TextProperties.Color =
System.Drawing.Color.Blue;
RadChart1.PlotArea.Appearance.Dimensions.Margins.Bottom =
Telerik.Charting.Styles.Unit.Percentage(30);
RadChart1.DataSource = dt;
RadChart1.DataBind();
0
Hi Mahmoud,
In order to bind the RadChart you must associate each series and x-axis to the corresponding field from the data source. More information on the matter is available in Data Binding online demos. You may also find useful the Grouping databound items functionality of RadChart.
As for the association of the series items color to the x-axis items color you can handle the item data bound event of the chart where this can be done. For example:
ASPX:
C#:
You may also find the full VS example in the attached archive.
Regards,
Danail Vasilev
Telerik
In order to bind the RadChart you must associate each series and x-axis to the corresponding field from the data source. More information on the matter is available in Data Binding online demos. You may also find useful the Grouping databound items functionality of RadChart.
As for the association of the series items color to the x-axis items color you can handle the item data bound event of the chart where this can be done. For example:
ASPX:
<
telerik:RadChart
ID
=
"RadChart1"
runat
=
"server"
Width
=
"465px"
Height
=
"260px"
DefaultType
=
"Bar"
OnItemDataBound
=
"RadChart1_ItemDataBound1"
AutoLayout
=
"true"
AutoTextWrap
=
"true"
CreateImageMap
=
"false"
>
<
ChartTitle
>
<
TextBlock
Text
=
"Time Sheet"
>
</
TextBlock
>
</
ChartTitle
>
<
Series
>
<
telerik:ChartSeries
DataYColumn
=
"total"
Name
=
"total"
Type
=
"Bar"
>
<
Appearance
LegendDisplayMode
=
"ItemLabels"
>
</
Appearance
>
</
telerik:ChartSeries
>
</
Series
>
<
PlotArea
>
<
XAxis
AutoScale
=
"false"
>
</
XAxis
>
</
PlotArea
>
</
telerik:RadChart
>
protected
void
Page_Load(
object
sender, EventArgs e)
{
//RadChart1.Series[0].DataYColumn = "total";
//RadChart1.PlotArea.XAxis.DataLabelsColumn = "subject";
RadChart1.PlotArea.XAxis.Appearance.LabelAppearance.RotationAngle = 300;
RadChart1.PlotArea.XAxis.Appearance.TextAppearance.TextProperties.Color =
System.Drawing.Color.Blue;
RadChart1.PlotArea.Appearance.Dimensions.Margins.Bottom =
Telerik.Charting.Styles.Unit.Percentage(30);
RadChart1.DataSource = GetData();
RadChart1.DataBind();
}
protected
DataTable GetData()
{
DataTable dt =
new
DataTable();
dt.Columns.Add(
"ID"
);
dt.Columns.Add(
"total"
);
dt.Columns.Add(
"subject"
);
dt.Columns.Add(
"colorField"
,
typeof
(System.Drawing.Color));
dt.Rows.Add(1, 2,
"item 1"
, Color.Red);
dt.Rows.Add(2, 5,
"item 2"
, Color.Blue);
dt.Rows.Add(3, 6,
"item 3"
, Color.Green);
return
dt;
}
protected
void
RadChart1_ItemDataBound1(
object
sender, Telerik.Charting.ChartItemDataBoundEventArgs e)
{
int
currItem = RadChart1.Series[0].Items.Count -1;
Color currColor = (Color)(e.DataItem
as
DataRowView).Row[3];
//Set series items color
RadChart1.Series[0].Items[currItem].Appearance.FillStyle.MainColor = currColor;
ChartAxisItem cai1 =
new
ChartAxisItem();
cai1.TextBlock.Text = (String)(e.DataItem
as
DataRowView).Row[2];
//Add axis items
RadChart1.PlotArea.XAxis.Items.Add(cai1);
//Set axis item color
RadChart1.PlotArea.XAxis.Items[currItem].TextBlock.Appearance.TextProperties.Color = currColor;
}
You may also find the full VS example in the attached archive.
Regards,
Danail Vasilev
Telerik
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the UI for ASP.NET AJAX, subscribe to the blog feed now.
0
mahmoud
Top achievements
Rank 1
answered on 09 Feb 2014, 09:14 AM
Thanks for you help Danail Vasilev.. but now I'm facing another problem in my chart bars all the bars grouped to specific Xaxis like to one value .. take a look at my question in this thread if you can help me I'd really appreciate it.
http://www.telerik.com/forums/split-each-bar-chart-to-its-x-value-column
http://www.telerik.com/forums/split-each-bar-chart-to-its-x-value-column
0
Hello mahmoud,
I have already replied to your question in Split each bar chart to its x value column forum thread, so that you can find my answer there.
Regards,
Danail Vasilev
Telerik
I have already replied to your question in Split each bar chart to its x value column forum thread, so that you can find my answer there.
Regards,
Danail Vasilev
Telerik
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the UI for ASP.NET AJAX, subscribe to the blog feed now.