RadHtmlChart Series Category duplicates

2 posts, 0 answers
  1. Satish
    Satish avatar
    3 posts
    Member since:
    Oct 2014

    Posted 30 Sep 2014 Link to this post

    Hi,

    I am creating a chart with two ColumnSeries with X-Axis containing Date and Y-Axis containing Item count. Now I want to create a stacked chart for the two series. Below is the program i have got. When I ran this, I am getting attached Chart which has X-Axis items not overlapping. For Series2, X-Axis items are again added. Even though, I am checking for the duplicates, it is adding the x-axis item. 

    I cannot use Date as X-Axis type because, it only supports Databound objects. Is there a way to achieve my desired behavior without X-Axis values overlapping?

    Satish



            private void UpdateOperationsChart()
            {
                SqlDataClient prodClient = new SqlDataClient(DataSource.Prod);
                prodClient.Init();

                DataTable table200 = prodClient.GetProvisioningOperations(OperationType.SelectedText,200);
                DataTable table500 = prodClient.GetProvisioningOperations(OperationType.SelectedText,500);

                ProvisioningChart.PlotArea.XAxis.TitleAppearance.Text = "Day";
                ProvisioningChart.PlotArea.YAxis.TitleAppearance.Text = "Request Duration In Mins";

                AxisY axisY = new AxisY();
                axisY.Name = "Operation Count";
                ProvisioningChart.PlotArea.AdditionalYAxes.Add(axisY);

                ProvisioningChart.PlotArea.XAxis.Type = Telerik.Web.UI.HtmlChart.AxisType.Category;
                ProvisioningChart.PlotArea.XAxis.AxisCrossingPoints.Add(0);
                ProvisioningChart.PlotArea.XAxis.AxisCrossingPoints.Add(100);

                LineSeries durationAvgSeries = new LineSeries();
                durationAvgSeries.Appearance.FillStyle.BackgroundColor = System.Drawing.Color.Blue;

                ColumnSeries request200Series = new ColumnSeries();
                ColumnSeries request500Series = new ColumnSeries();
                //request200Series.AxisName = "200";
                //request500Series.AxisName = "500";
                request200Series.Appearance.FillStyle.BackgroundColor = System.Drawing.Color.Green;
                request500Series.Appearance.FillStyle.BackgroundColor = System.Drawing.Color.Red;

                foreach (DataRow row in table200.Rows)
                {
                    //durationAvgSeries.SeriesItems.Add(Decimal.Parse(row["AvgDurationInMin"].ToString()));
                    request200Series.SeriesItems.Add(Decimal.Parse(row["OperationCount"].ToString()));
                    AxisItem xAxisItem = new AxisItem(Convert.ToDateTime(row["Day"].ToString()).Month + "/" + Convert.ToDateTime(row["Day"].ToString()).Day);
                    if (!ProvisioningChart.PlotArea.XAxis.Items.Contains(xAxisItem))
                        ProvisioningChart.PlotArea.XAxis.Items.Add(xAxisItem);
                }

                foreach (DataRow row in table500.Rows)
                {
                    //durationAvgSeries.SeriesItems.Add(Decimal.Parse(row["AvgDurationInMin"].ToString()));
                    request500Series.SeriesItems.Add(Decimal.Parse(row["OperationCount"].ToString()));
                    AxisItem xAxisItem = new AxisItem(Convert.ToDateTime(row["Day"].ToString()).Month + "/" + Convert.ToDateTime(row["Day"].ToString()).Day);
                    if (!ProvisioningChart.PlotArea.XAxis.Items.Contains(xAxisItem))
                        ProvisioningChart.PlotArea.XAxis.Items.Add(xAxisItem);
                }
                
                ProvisioningChart.PlotArea.Series.Add(request200Series);
                ProvisioningChart.PlotArea.Series.Add(request500Series);            
                //ProvisioningChart.PlotArea.Series.Add(durationAvgSeries);

                request200Series.Stacked = true;

                request500Series.Name = "500";
                request200Series.Name = "200";
                durationAvgSeries.Name = "AvgDurationInMin";

                prodClient.Close();
            }
  2. Danail Vasilev
    Admin
    Danail Vasilev avatar
    1494 posts

    Posted 03 Oct 2014 Link to this post

    Hi Satish,

    I can suggest that you do the following:
      - Series labels for missing items are displayed as undefined, so you can prevent them from showing by using templates.
      - Set particular step for x-axis labels in order to avoid labels cluttering.
    For example:
    ASPX:
    <telerik:RadHtmlChart runat="server" ID="RadHtmlChart1" Width="640px" Height="480px">
        <PlotArea>
            <Series>
                <telerik:ColumnSeries DataFieldY="SellQuantity">
                    <LabelsAppearance>
                        <ClientTemplate>
                            #if(value != undefined){# #=kendo.format(\'{0:dd/MM}\',value)# #}#
                        </ClientTemplate>
                    </LabelsAppearance>
                    <TooltipsAppearance Color="White" DataFormatString="{1} cars sold on<br/>{0:D}" />
                </telerik:ColumnSeries>
            </Series>
            <XAxis BaseUnit="Months"  DataLabelsField="SellDate">
                <TitleAppearance Text="Sell Date">
                </TitleAppearance>
                <LabelsAppearance DataFormatString="d" Step="3">
                </LabelsAppearance>
                <MajorGridLines Color="#EFEFEF" Width="1"></MajorGridLines>
                <MinorGridLines Color="#F7F7F7" Width="1"></MinorGridLines>
            </XAxis>
            <YAxis>
                <TitleAppearance Text="Quantity">
                </TitleAppearance>
                <MajorGridLines Color="#EFEFEF" Width="1"></MajorGridLines>
                <MinorGridLines Color="#F7F7F7" Width="1"></MinorGridLines>
            </YAxis>
        </PlotArea>
        <ChartTitle Text="Sold Cars per Date">
        </ChartTitle>
    </telerik:RadHtmlChart>

    C#:
    protected void Page_Load(object sender, EventArgs e)
    {
        RadHtmlChart1.DataSource = GetData();
        RadHtmlChart1.DataBind();
    }
      
    protected DataTable GetData()
    {
        DataTable dt = new DataTable();
      
        dt.Columns.Add("ID", typeof(int));
        dt.Columns.Add("SellQuantity", typeof(int));
        dt.Columns.Add("SellDate", typeof(DateTime));
      
        dt.Rows.Add(1, 2, new DateTime(2011, 06, 12));
        dt.Rows.Add(2, 5, new DateTime(2011, 12, 12));
        dt.Rows.Add(3, 6, new DateTime(2012, 06, 17));
        dt.Rows.Add(4, 4, new DateTime(2012, 09, 18));
        dt.Rows.Add(5, 7, new DateTime(2013, 03, 18));
      
        return dt;
    }



    Regards,
    Danail Vasilev
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  3. UI for ASP.NET Ajax is Ready for VS 2017
Back to Top