RadChart Stored Proc Binding

Thread is closed for posting
8 posts, 0 answers
  1. mahmoud
    mahmoud avatar
    13 posts
    Member since:
    Feb 2014

    Posted 02 Feb 2014 Link to this post

    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?

  2. mahmoud
    mahmoud avatar
    13 posts
    Member since:
    Feb 2014

    Posted 02 Feb 2014 in reply to mahmoud Link to this post

    no one here knows how to achieve this , or even give me reference link to help me with it!
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. mahmoud
    mahmoud avatar
    13 posts
    Member since:
    Feb 2014

    Posted 02 Feb 2014 Link to this post

    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
  5. mahmoud
    mahmoud avatar
    13 posts
    Member since:
    Feb 2014

    Posted 02 Feb 2014 Link to this post

    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 ?
  6. mahmoud
    mahmoud avatar
    13 posts
    Member since:
    Feb 2014

    Posted 02 Feb 2014 in reply to mahmoud Link to this post

    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();
  7. Danail Vasilev
    Admin
    Danail Vasilev avatar
    1490 posts

    Posted 05 Feb 2014 Link to this post

    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:
    <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>
    C#:
    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.
  8. mahmoud
    mahmoud avatar
    13 posts
    Member since:
    Feb 2014

    Posted 09 Feb 2014 in reply to Danail Vasilev Link to this post

    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
  9. Danail Vasilev
    Admin
    Danail Vasilev avatar
    1490 posts

    Posted 10 Feb 2014 Link to this post

    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
    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.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017