This is a migrated thread and some comments may be shown as answers.

RadHtmlChart Series Category duplicates

1 Answer 64 Views
Chart (HTML5)
This is a migrated thread and some comments may be shown as answers.
Satish
Top achievements
Rank 1
Satish asked on 01 Oct 2014, 03:27 AM
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();
        }

1 Answer, 1 is accepted

Sort by
0
Danail Vasilev
Telerik team
answered on 03 Oct 2014, 08:02 AM
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.

 
Tags
Chart (HTML5)
Asked by
Satish
Top achievements
Rank 1
Answers by
Danail Vasilev
Telerik team
Share this question
or