change color of bars for selected user

Thread is closed for posting
6 posts, 0 answers
  1. Keith Stephens
    Keith Stephens avatar
    83 posts
    Member since:
    May 2010

    Posted 29 Apr 2011 Link to this post

    Hello all,

    On my page I have a list of employees on the left side of the page, and as the user selects different employees I want to change the colors of the employee selected in the bar chart that I have.

    In the attached you will see 2 bar charts, the chart I am talking about is the "Branch Sales Compparision" chart. The chart that shows multiple employees.

    So in the attachment I have choosen Ian F. Jones so in the bar chart I want to make his bar colors a darker color.
    Thanks,
    KS
  2. Evgenia
    Admin
    Evgenia avatar
    1437 posts

    Posted 04 May 2011 Link to this post

    Hi Keith,

    You can change the Color of the Series like this for example:
    radChart1.Series[0].Appearance.FillStyle.MainColor = Color.Red;

    The colors you specify for the chart have FillType - Gradient which means that each element is filled by two colors (Main Color and Second Color). You should set them to Solid (Element is filled by one color.) :
    radChart1.Series[0].Appearance.FillStyle.FillType = Telerik.Charting.Styles.FillType.Solid;

    Best wishes,
    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. Keith Stephens
    Keith Stephens avatar
    83 posts
    Member since:
    May 2010

    Posted 06 May 2011 Link to this post

    but wont that change the color for all of the bars?  I just want to change the color/or highlight the employee that was selected.

    Maybe highlighting the employee name might work for the client, if I can't change the color of the bars.

    Thanks,
    Keith
  4. Evgenia
    Admin
    Evgenia avatar
    1437 posts

    Posted 12 May 2011 Link to this post

    Hi Keith,

    I'm sorry for misunderstanding your requirement. Yes, you can change the color of a single bar by using predefined colors as shown in our help topic. You can set the colors to have Solid FillType so that the MainColor and SecondColor are the same (no gradient). Here is how you can achieve this:

    foreach (ChartSeriesItem item in RadChart1.Series[0].Items)
            {
                item.Appearance.FillStyle.MainColor = barColors[i++];
                item.Appearance.FillStyle.FillType = Telerik.Charting.Styles.FillType.Solid;
            }

    All the best,
    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.

  5. Keith Stephens
    Keith Stephens avatar
    83 posts
    Member since:
    May 2010

    Posted 13 May 2011 Link to this post

    Would it be too much to ask for a working example.  Where you have a list of employees and when you select an employee, their bar graph bars change colors so you know that thats the persons info.

    I will enclose a copy of my code that is populating my bar chart.
    I am not sure where to put your code, and also how to read the values from the chart in order to know if it's the right employee.
    Also I have 2 series. 2 bars per employee.

    private void PopulateChartBranchSales(string BranchID)
          {
              try
              {
                  this.SqlDataSourceActivityChart.DataSourceMode = SqlDataSourceMode.DataSet;
                  if (Page.User.IsInRole("RegionManager"))
                  {
                      //Disable Region validation also, 8/5/2010
                      if (((OSP.controls.HierarchyControl)(UserControlReportGenerator)).RegionID == string.Empty)
                      {
                          //This functionality was not constructed from the get go to drive by a hierarchy so using the "~" char and parse out in SQL to represent division versus branch
                          this.SqlDataSourceActivityChart.SelectParameters["BusinessUnitID"].DefaultValue = "~" + ((OSP.controls.HierarchyControl)(UserControlReportGenerator)).DivisionID;
                      }
                      else if (((OSP.controls.HierarchyControl)(UserControlReportGenerator)).BranchID == string.Empty)
                      {
                          //This functionality was not constructed from the get go to drive by a hierarchy so using the "|" char and parse out in SQL to represent region versus branch
                          this.SqlDataSourceActivityChart.SelectParameters["BusinessUnitID"].DefaultValue = "|" + ((OSP.controls.HierarchyControl)(UserControlReportGenerator)).RegionID;
                      }
                      else
                      {
                          this.SqlDataSourceActivityChart.SelectParameters["BusinessUnitID"].DefaultValue = ((OSP.controls.HierarchyControl)(UserControlReportGenerator)).BranchID;
                      }
                  }
                  else
                  {
                      this.SqlDataSourceActivityChart.SelectParameters["BusinessUnitID"].DefaultValue = ((OSP.controls.HierarchyControl)(UserControlReportGenerator)).BranchID;
                  }
                  this.SqlDataSourceActivityChart.SelectParameters["EmployeeID"].DefaultValue = string.Empty;
                  this.SqlDataSourceActivityChart.SelectParameters["CustomerID"].DefaultValue = string.Empty;
                  this.SqlDataSourceActivityChart.SelectParameters["Party"].DefaultValue = string.Empty;
                  this.SqlDataSourceActivityChart.SelectParameters["PartyAddress"].DefaultValue = string.Empty;
                  this.SqlDataSourceActivityChart.SelectParameters["StartDate"].DefaultValue = UCSearchDateTime.FromDate.ToString();
                  this.SqlDataSourceActivityChart.SelectParameters["EndDate"].DefaultValue = UCSearchDateTime.ToDate.ToString();
                  this.SqlDataSourceActivityChart.SelectParameters["DocumentStatusID"].DefaultValue = string.Empty;
                  DataView dataView = (DataView)SqlDataSourceActivityChart.Select(DataSourceSelectArguments.Empty);
                  RadChartBranchSalesComparision.Series[0].Clear();
                  RadChartBranchSalesComparision.Series[1].Clear();
                  TableLabelBranchSales.Width = Unit.Pixel(385);
                  RadChartBranchSalesComparision.Width = Unit.Pixel(350);
                  if (dataView.Count != 0)
                  {
                      DataTable dataTable = new DataTable();
                      //dataTable.Columns.Add("Proposed", typeof(int));
                      //dataTable.Columns.Add("Sold", typeof(int));
                      dataTable.Columns.Add("Proposed", typeof(decimal));
                      dataTable.Columns.Add("Sold", typeof(decimal));
                      dataTable.Columns.Add("Employee", typeof(string));
                      string EmployeeName = string.Empty;
                      for (int i = 0; i <= dataView.Count - 1; i++)
                      {
                          if ((decimal)dataView.Table.Rows[i]["AvgProposalsperDay"] != 0 || (decimal)dataView.Table.Rows[i]["AvgSoldperDay"] != 0)
                          {
                              EmployeeName = dataView.Table.Rows[i]["Employee"].ToString();
                              if (EmployeeName.Length > 12)
                              {
                                  EmployeeName = dataView.Table.Rows[i]["Employee"].ToString().Substring(0, 11);
                              }
                              dataTable.Rows.Add((decimal)dataView.Table.Rows[i]["AvgProposalsperDay"], (decimal)dataView.Table.Rows[i]["AvgSoldperDay"], EmployeeName);
                          }
                      }
                      if (dataTable.Rows.Count > 10 && dataTable.Rows.Count <= 20)
                      {
                          TableLabelBranchSales.Width = Unit.Percentage(100);
                          RadChartBranchSalesComparision.Width = Unit.Pixel(890);
                          //RadChartBranchSalesComparision.Height = Unit.Pixel(200);
                          RadChartBranchSalesComparision.Height = Unit.Pixel(276);
                      }
                      else if (dataTable.Rows.Count > 20 && dataTable.Rows.Count <= 30)
                      {
                          TableLabelBranchSales.Width = Unit.Percentage(100);
                          RadChartBranchSalesComparision.Width = Unit.Pixel(1090);
                          //RadChartBranchSalesComparision.Height = Unit.Pixel(200);
                          RadChartBranchSalesComparision.Height = Unit.Pixel(276);
                      }
                      else if (dataTable.Rows.Count > 40 && dataTable.Rows.Count <= 50)
                      {
                          TableLabelBranchSales.Width = Unit.Percentage(100);
                          RadChartBranchSalesComparision.Width = Unit.Pixel(1190);
                          //RadChartBranchSalesComparision.Height = Unit.Pixel(200);
                          RadChartBranchSalesComparision.Height = Unit.Pixel(276);
                      }
                      else if (dataTable.Rows.Count > 50)
                      {
                          TableLabelBranchSales.Width = Unit.Percentage(100);
                          RadChartBranchSalesComparision.Width = Unit.Pixel(1390);
                          //RadChartBranchSalesComparision.Height = Unit.Pixel(200);
                          RadChartBranchSalesComparision.Height = Unit.Pixel(276);
                      }
                      else
                      {
                          TableLabelBranchSales.Width = Unit.Percentage(100);
                          RadChartBranchSalesComparision.Width = Unit.Pixel(590);
                          //RadChartBranchSalesComparision.Height = Unit.Pixel(200);
                          RadChartBranchSalesComparision.Height = Unit.Pixel(276);
                      }
                      RadChartBranchSalesComparision.DataSource = dataTable;
                      RadChartBranchSalesComparision.Series[0].DataYColumn = "Proposed";
                      RadChartBranchSalesComparision.Series[1].DataYColumn = "Sold";
                      RadChartBranchSalesComparision.PlotArea.XAxis.DataLabelsColumn = "Employee";
                      RadChartBranchSalesComparision.PlotArea.YAxis.Appearance.ValueFormat = Telerik.Charting.Styles.ChartValueFormat.Currency;
                      RadChartBranchSalesComparision.PlotArea.YAxis.Appearance.LabelAppearance.Visible = true;
                      RadChartBranchSalesComparision.Series[0].DefaultLabelValue = "#Y{C}";
                      RadChartBranchSalesComparision.Series[1].DefaultLabelValue = "#Y{C}";
                      //if (EmployeeName == "ZACHARY, TO")
                      //{
                      //    // RadChart1.Series[0].Items[0].Label.TextBlock.Appearance.TextProperties.Font = new Font("Century Gothic", 10, FontStyle.Italic); 
                      //   // RadChartBranchSalesComparision.Series[0].Items[0].Appearance.FillStyle.MainColor = System.Drawing.Color.Red;
                      //}
                      RadChartBranchSalesComparision.DataBind();
                  }
                  //foreach (ChartSeriesItem item in RadChartSalesStatistics.Series[0].Items)
                  //{
                  //    //if (Context.Items["empname"] == item.Label.TextBlock.Text)
                  //    //{
                  //    //    //item.Appearance.FillStyle.MainColor = //Telerik.Charting
                  //    //    item.Appearance.FillStyle.MainColor = System.Drawing.Color.AliceBlue;
                  //    //}
                  //    //item.Label.TextBlock.Text 
                  //    // item.Appearance.FillStyle.MainColor = barColors[i++];
                  //}
              }
              catch (Exception ex)
              {
                  utility.LogExceptionToDB(ex, Request.Path.ToString());
                  utility.CallAssuranceTracker(ex, Request.Path.ToString());
              }
          }

    Thanks,
    Keith.
  6. Evgenia
    Admin
    Evgenia avatar
    1437 posts

    Posted 19 May 2011 Link to this post

    Hi Keith,

    You can review the sample project that my colleague Polina created in this forum thread started by you.

    All the best,
    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