Telerik Html chart - Column series width is not working.

8 posts, 0 answers
  1. Mukesh
    Mukesh avatar
    5 posts
    Member since:
    Jun 2013

    Posted 07 Jun 2013 Link to this post

    Hi ,
    I created a column series Html chart. Binded with datasource (DataTable) .

    the problem is series width is very small in size than the actual chart display.

    Here, I attached the screen shot of the chart.

    Thanks in advance.

      
  2. Stamo Gochev
    Admin
    Stamo Gochev avatar
    157 posts

    Posted 11 Jun 2013 Link to this post

    Hello Mukesh,

    It seems like you get the empty spaces between the series items if some of the their values are null. The behavior of the RadHtmlChart in this case is to allocate a space for the item, but as it doesn't have a value, the series item is not displayed. However, the width of every series item is determined by their overall count (if you have 2 series items, each of them will be wider than the case, where there are 20 series items). What you could do in this case in order to increase the width of each series item is to check if its value is null and if this is the case, you should not create such a series item and you should not add it to the series. This way will ensure that you will not get any empty spaces between the series items and their width will be increased..

    I have also created a sample page, where I data bind a ColumnChart to a DataTable and use null values for some of the series items, so the low-width behavior is expected in this case. Could you have a look at it and inform me if you need any further clarification?

    Regards,
    Stamo Gochev
    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 RadControls for ASP.NET AJAX, subscribe to the blog feed now.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Aravind
    Aravind avatar
    41 posts
    Member since:
    Jun 2013

    Posted 24 Jun 2013 Link to this post

    Hi 
      i am not having support ticket so i post my problem here,i am new to html 5 chart i have bar chart and values in dataset
    my html code is(taken from http://demos.telerik.com/aspnet-ajax/htmlchart/examples/charttypes/barchart/defaultvb.aspx)

      <telerik:RadHtmlChart  runat="server" ID="BarChart" Width="800" Height="500" Transitions="true"
                        Skin="Forest">
                        <Appearance>
                             <FillStyle BackgroundColor="White"></FillStyle>
                        </Appearance>
                        <ChartTitle Text="Revenue">
                             <Appearance Align="Center" BackgroundColor="White" Position="Top"></Appearance>
                        </ChartTitle>
                        <Legend>
                             <Appearance BackgroundColor="White" Position="Bottom"></Appearance>
                        </Legend>
                        <PlotArea>
                             <Appearance>
                                  <FillStyle BackgroundColor="White"></FillStyle>
                             </Appearance>
                             <XAxis AxisCrossingValue="0" Color="#b3b3b3" MajorTickType="Outside" MinorTickType="Outside"
                                  Reversed="false">
                    
                                  <TitleAppearance Position="Center" RotationAngle="0" Text="Years"></TitleAppearance>
                             </XAxis>
                            <Series >
                                <telerik:BarSeries Name ="xaxis"></telerik:BarSeries>
                            </Series>
                             <YAxis AxisCrossingValue="0" Color="#b3b3b3" MajorTickSize="1" MajorTickType="Outside"
                                   MinorTickSize="1" MinorTickType="Outside" MinValue="0" Reversed="false"
                                  >
                               
                                  <TitleAppearance Position="Center" RotationAngle="0" Text="Sum"></TitleAppearance>
                             </YAxis>
                             <Series>
                                
                                      
                                  <telerik:BarSeries Name ="yaxis1">

                                      <SeriesItems >
                                        <telerik:CategorySeriesItem Y ="a" />

                                      </SeriesItems>
                                  </telerik:BarSeries>
                                       
                                  <telerik:BarSeries Name ="yaxis2">

                                      <SeriesItems >
                                        <telerik:CategorySeriesItem Y ="a" />

                                      </SeriesItems>
                                  </telerik:BarSeries>
          
                                  <telerik:BarSeries Name ="yaxis3">

                                      <SeriesItems >
                                        <telerik:CategorySeriesItem Y ="a" />

                                      </SeriesItems>
                                  </telerik:BarSeries>

                             </Series>
                        </PlotArea>
                   </telerik:RadHtmlChart>


    and serrver side code is 

      For Each row As DataRow In dt.Rows
             BarChart.PlotArea.XAxis.Items.Add(Convert.ToDateTime(row(0)).ToString("dd MMM"))
              BarChart.PlotArea.Series.Item("yaxis1").Items.Add(row(0))
              BarChart.PlotArea.Series.Item("yaxis2").Items.Add(row(0))
              BarChart.PlotArea.Series.Item("yaxis3").Items.Add(row(0))


    next
    my need is i need to plot 3 y axis ,x axis correctly plotted but y axis not plotted,pls tell me or give some sample code plotted in server side i mean for dataset.

  5. Stamo Gochev
    Admin
    Stamo Gochev avatar
    157 posts

    Posted 26 Jun 2013 Link to this post

    Hi Aravind,

    i have created a sample page, which demonstrates how you can programmatically  create three  BarSeries and three YAxes. You should be aware that adding more than one YAxis requires associating its name with the AxisName of at least one series (this also applies to the default YAxis). You can also have a look at our help article about Multiple Y-Axes. Could inform me if you could apply the approach in your scenario?

    I can also advice you to create a separate forum thread for your next questions as this separation helps other clients who might have the same issues.

    Regards,
    Stamo Gochev
    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 RadControls for ASP.NET AJAX, subscribe to the blog feed now.
  6. Aravind
    Aravind avatar
    41 posts
    Member since:
    Jun 2013

    Posted 26 Jun 2013 Link to this post

    Hi
      Sorry for post here,because  i am not having support ticket,thank u for ur reply ,but i have values in dataset i need plot barserie from dataset like this . 
       X        Y
    10 Apr ,20,32,44
    13 Apr, 30,54,12
    15 Apr,43,65,33
    1 May,22,56,12

    in each row i have above values,i mean in data row ("row") below the for each statemen
    like this i have in dataset,what need to plot x axis and 3 yaxis
      For Each row As DataRow In dt.Rows
              HOW TO PLOT X AXIS AND 3 Y AXIS HERE ?...............  PLS REPLY ME ASAP
     next


    Note: in vb coding ,not in c# code 
      Regards
          Aravind
  7. Danail Vasilev
    Admin
    Danail Vasilev avatar
    1490 posts

    Posted 28 Jun 2013 Link to this post

    Hello Aravind,

    Please find attached to this post an example on how to databind barseries to the mentioned data table, so that each barseries plots its values according to particular yaxis scale. You can also find useful HtmlChart - DataSet online demo.

    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 RadControls for ASP.NET AJAX, subscribe to the blog feed now.
  8. Mukesh
    Mukesh avatar
    5 posts
    Member since:
    Jun 2013

    Posted 12 Jul 2013 Link to this post

    Hi Stamo Gochev,

      In the following scenario, I am facing column width problem.
      I have given code to duplicate the problem what I had faced.
      And attached screen shot also.
      How to fix this? thanks in advance.

    Technical details:

    Version: Telerik.Web.UI.dll 2013.1.403.40
    Operating System: windows xp professional, service pack 3
    .Net Framework: 4.0
    Visual studio: 2012
    Browser: Firefox 22.0

    ------------------------------------------------------------------------------------------------------------

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="TestChart.aspx.cs" Inherits="TestApp.WebSite.TestChart" %>
     
    <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
     
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
     
    <head runat="server">
        <title></title>
    </head>
    <body>
        <form id="form1" runat="server">
        <div>
            <telerik:RadScriptManager ID="RadScriptManager1" runat="server">
            </telerik:RadScriptManager>
     
        <telerik:RadHtmlChart ID="MonthlyViewChart" runat="server" Transitions="true">
                        <Appearance>
                             <FillStyle BackgroundColor="White"></FillStyle>
                        </Appearance>
                       <ChartTitle>
                             <Appearance Align="Center" BackgroundColor="White" Position="Top">
                             <TextStyle  FontFamily="segoe ui" FontSize="15px" Bold="true"/>
                             </Appearance>
                        </ChartTitle>
                        <Legend>
                             <Appearance BackgroundColor="White" Position="Bottom">
                             </Appearance>
                        </Legend>
     
                         <PlotArea>                
                             <Appearance>
                                  <FillStyle BackgroundColor="White"></FillStyle>
                             </Appearance>
                             <XAxis AxisCrossingValue="0" Color="#696969"  MajorTickType="Outside" MinorTickType="Outside"
                                  Reversed="false" >                            
                                  <LabelsAppearance RotationAngle="270">
                                  <TextStyle  FontFamily="segoe ui" FontSize="12px"/>
                                  </LabelsAppearance>
                                  <MajorGridLines Width="0" Color="#FFFFFF"></MajorGridLines>
                                  <MinorGridLines Width="0" Color="#FFFFFF"></MinorGridLines>
                             </XAxis>
                             <YAxis AxisCrossingValue="0"  Color="#696969" MajorTickType="Outside"
                                  MaxValue="100" MinorTickType="Outside" MinValue="0" Reversed="false"
                                  Step="25">
                                  <LabelsAppearance DataFormatString="{0}%" RotationAngle="0">
                                  <TextStyle  FontFamily="segoe ui" FontSize="12px"/>
                                  </LabelsAppearance>
                                  <MajorGridLines Width="0" Color="#FFFFFF"></MajorGridLines>
                                  <MinorGridLines Width="0" Color="#FFFFFF"></MinorGridLines>
                             </YAxis>                        
                        </PlotArea>
     
                         
        </telerik:RadHtmlChart>
        </div>
        </form>
    </body>
    </html>
    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Web;
    using System.Web.UI;
    using System.Web.UI.WebControls;
    using System.Drawing;
    using System.Data;
    using Telerik.Web.UI;
     
    namespace TestApp.WebSite
    {
        public partial class TestChart : System.Web.UI.Page
        {
            protected void Page_Load(object sender, EventArgs e)
            {
     
                if (!Page.IsPostBack)
                {
                    DrawChart();
                }
     
     
            }
     
            private void DrawChart()
            {
                try
                {
                    DateTime endDate = DateTime.Now;
                    DateTime startDate = endDate.AddDays(-30);
     
     
                    MonthlyViewChart.ChartTitle.Text = string.Format("Monthly Sales Report - {0} to {1}", startDate.ToShortDateString(), endDate.ToShortDateString());
     
                    Dictionary<int, Color> seriesItemColor = new Dictionary<int, Color> { { 0, Color.FromArgb(0, 103, 56) }, { 1, Color.FromArgb(39, 170, 226) }, { 2, Color.FromArgb(191, 30, 46) }, { 3, Color.FromArgb(43, 182, 115) }, { 4, Color.FromArgb(142, 198, 63) }, { 5, Color.FromArgb(242, 90, 41) }, { 6, Color.FromArgb(43, 57, 145) }, { 7, Color.FromArgb(146, 39, 143) }, { 8, Color.FromArgb(238, 43, 122) }, { 9, Color.FromArgb(248, 237, 51) }, { 10, Color.FromArgb(0, 167, 157) }, { 11, Color.FromArgb(102, 46, 145) }, { 12, Color.FromArgb(252, 176, 64) }, { 13, Color.FromArgb(214, 223, 34) }, { 14, Color.FromArgb(158, 31, 100) }, { 15, Color.FromArgb(139, 119, 101) }, { 16, Color.FromArgb(99, 184, 255) }, { 17, Color.FromArgb(139, 87, 66) }, { 18, Color.FromArgb(139, 139, 0) }, { 19, Color.FromArgb(240, 128, 128) } };
     
                    MonthlyViewChart.PlotArea.Series.Clear();
                    MonthlyViewChart.PlotArea.XAxis.Items.Clear();
     
                    List<Department> departmentReports = new Department().MonthlySales();
     
     
                    //Create a DataTable with two columns
                    DataTable tbl = new DataTable();
                    tbl.Columns.Add(new DataColumn("DepartmentName"));
     
                    int j = 0;
                    Enumerable.Range(0, departmentReports.Count).ToList().ForEach(x =>
                    {
                        tbl.Rows.Add();
                        tbl.Rows[j]["DepartmentName"] = departmentReports[j].DepartmentName;
                        j++;
                    });
     
                    MonthlyViewChart.PlotArea.XAxis.DataLabelsField = "DepartmentName";
                    int i = 0;
                    foreach (var report in departmentReports)
                    {
                        ColumnSeries series = new ColumnSeries();
     
                        series.Name = report.DepartmentName;
     
                        series.Appearance.FillStyle.BackgroundColor = seriesItemColor.Where(x => x.Key == i).FirstOrDefault().Value;
                        series.TooltipsAppearance.BackgroundColor = Color.White;
                        series.LabelsAppearance.Visible = false;
     
                        //Create columns used for DataFieldY and ClientTemplate properties
                        string currDSColumn = "DataSourceColumn" + i;
                        string tooltipColumn = "ToolTipColumn" + i;
                        tbl.Columns.Add(new DataColumn(currDSColumn));
                        tbl.Columns.Add(new DataColumn(tooltipColumn));
     
                        series.DataFieldY = currDSColumn;
                        series.TooltipsAppearance.ClientTemplate = "#=dataItem." + tooltipColumn + "#";
                        MonthlyViewChart.PlotArea.Series.Add(series);
     
                        //Fill values for Series YValues and ToolTips               
                        tbl.Rows[i][currDSColumn] = report.SalesPercentage;
                        tbl.Rows[i][tooltipColumn] = string.Format(" Number of Employees: {0} <br /> Possible Sales: {1} <br /> Actual Sales: {2} ", report.NumberOfEmployees, report.NumberOfGoods, report.Sold);
                        i++;
                    }
                    MonthlyViewChart.DataSource = tbl;
                    MonthlyViewChart.DataBind();
                }
                catch (Exception ex)
                {
                    Response.Write(ex.Message);
                }
            }
        }
     
        public class Department
        {
            public int SalesPercentage { get; set; }
            public int Sold { get; set; }
            public string DepartmentName { get; set; }
            public int NumberOfGoods { get; set; }
            public int NumberOfEmployees { get; set; }
     
     
            public Department()
            {
     
            }
     
            public List<Department> MonthlySales()
            {
                List<Department> list = new List<Department>();
                list.Add(new Department { DepartmentName = "Department 1", NumberOfEmployees = 0, NumberOfGoods = 0, SalesPercentage = 0, Sold = 0 });
                list.Add(new Department { DepartmentName = "Department 2", NumberOfEmployees = 0, NumberOfGoods = 0, SalesPercentage = 0, Sold = 0 });
                list.Add(new Department { DepartmentName = "Department 3", NumberOfEmployees = 0, NumberOfGoods = 0, SalesPercentage = 0, Sold = 0 });
                list.Add(new Department { DepartmentName = "Department 4", NumberOfEmployees = 0, NumberOfGoods = 0, SalesPercentage = 0, Sold = 0 });
                list.Add(new Department { DepartmentName = "Department 5", NumberOfEmployees = 0, NumberOfGoods = 0, SalesPercentage = 0, Sold = 0 });
                list.Add(new Department { DepartmentName = "Department 6", NumberOfEmployees = 0, NumberOfGoods = 0, SalesPercentage = 0, Sold = 0 });
                list.Add(new Department { DepartmentName = "Department 7", NumberOfEmployees = 1, NumberOfGoods = 90, SalesPercentage = 22, Sold = 20 });
                list.Add(new Department { DepartmentName = "Department 8", NumberOfEmployees = 0, NumberOfGoods = 0, SalesPercentage = 0, Sold = 0 });
                list.Add(new Department { DepartmentName = "Department 9", NumberOfEmployees = 0, NumberOfGoods = 0, SalesPercentage = 0, Sold = 0 });
                list.Add(new Department { DepartmentName = "Department 10", NumberOfEmployees = 0, NumberOfGoods = 0, SalesPercentage = 0, Sold = 0 });
                list.Add(new Department { DepartmentName = "Department 11", NumberOfEmployees = 0, NumberOfGoods = 0, SalesPercentage = 0, Sold = 0 });
                list.Add(new Department { DepartmentName = "Department 12", NumberOfEmployees = 0, NumberOfGoods = 0, SalesPercentage = 0, Sold = 0 });
                list.Add(new Department { DepartmentName = "Department 13", NumberOfEmployees = 0, NumberOfGoods = 0, SalesPercentage = 0, Sold = 0 });
                list.Add(new Department { DepartmentName = "Department 14", NumberOfEmployees = 0, NumberOfGoods = 0, SalesPercentage = 0, Sold = 0 });
                list.Add(new Department { DepartmentName = "Department 15", NumberOfEmployees = 0, NumberOfGoods = 0, SalesPercentage = 0, Sold = 0 });
     
                return list.OrderBy(x => x.DepartmentName).ToList();
            }
     
        }
    }
  9. Stamo Gochev
    Admin
    Stamo Gochev avatar
    157 posts

    Posted 16 Jul 2013 Link to this post

    Hello Mukesh,

    Thank you for providing a runnable sample page - it really helped me investigate your issue. As I mentioned earlier, setting a value of 0 (zero) for a series' item will allocate space in the RadHtmlChart's PlotArea, but it will look like the item is not displayed (you could try changing the value of SalesPercentage to anything which is not equal to zero) in order to display it). What you could do in this situation is to check if the data bound value that you use (SalesPercentage ) is equal to zero and if this is the case you don't need to add such a series item in the RadHtmlChart. This could be done very easily like this:

    foreach (var report in departmentReports)
    {
        if (report.SalesPercentage != 0)
        {
            //Your ColumnSeries creation
                                ...

    Of course, you could apply the following approach for the XAxis' Items - you can create only the axis' items whose corresponding department has SalesPercentage not equal to zero.

    I also attach the modified version of your sample page with the if statement above and the change to SalesPercentage for two more items. You can have a look at it and inform me if you need further clarification.

    Regards,
    Stamo Gochev
    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 RadControls for ASP.NET AJAX, subscribe to the blog feed now.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017