Unable to display my Line Chart

4 posts, 1 answers
  1. madhavi
    madhavi avatar
    22 posts
    Member since:
    Jul 2014

    Posted 06 Aug 2014 Link to this post

    Hi , 

    I am trying to display line chart dynamically and get displayed in my panel. I don't understand what I am doing wrong. Please help.

    I have this in my .aspx file
          <asp:Panel ID="Panel3" runat="server"  style="float:left;width:45%;">
                 <telerik:RadHtmlChart ID="RadHtmlChart3"  runat="server" ChartTitle-Text="Dynamic Line Series">
                 </telerik:RadHtmlChart>         
          </asp:Panel>

    and the following code in aspx.cs file
     if (DropDownList1.SelectedValue == "Line")
            {
                SqlConnection sqlConn3 = new SqlConnection(ConfigurationManager.ConnectionStrings["xxxx"].ConnectionString);
                SqlCommand SqlCmd3 = new SqlCommand("Select ST as state, count(*) as no_of_cust FROM CUSTOMER group by ST", sqlConn3);
                SqlCmd3.Connection.Open();
                SqlDataReader reader3 = SqlCmd3.ExecuteReader();

                DataTable dt = new DataTable();
                dt.Columns.Add("State_col");
                dt.Columns.Add("No_Customers");
                if (reader3.HasRows)
                {
                    while (reader3.Read())
                    {
                        dt.Rows.Add(reader3.GetValue(0).ToString(), reader3.GetInt32(1));
                    }
                }

                var columns = new List<string>();
                for (int i = 0; i < reader3.FieldCount; i++)
                {
                    columns.Add(reader3.GetName(i));
                }
                RadHtmlChart3.ChartTitle.Text = "My dynamic Line Chart";
                RadHtmlChart3.ChartTitle.Appearance.Align = Telerik.Web.UI.HtmlChart.ChartTitleAlign.Center;
                RadHtmlChart3.ChartTitle.Appearance.Position = Telerik.Web.UI.HtmlChart.ChartTitlePosition.Top;
                RadHtmlChart3.Legend.Appearance.BackgroundColor = System.Drawing.Color.White;
                RadHtmlChart3.Legend.Appearance.Position = Telerik.Web.UI.HtmlChart.ChartLegendPosition.Bottom;
                RadHtmlChart3.PlotArea.Appearance.FillStyle.BackgroundColor = System.Drawing.Color.White;
     //           RadHtmlChart3.PlotArea.XAxis.Color = System.Drawing.Color.Azure;
                RadHtmlChart3.PlotArea.XAxis.MajorTickType = Telerik.Web.UI.HtmlChart.TickType.Outside;
                RadHtmlChart3.PlotArea.XAxis.MinorTickType = Telerik.Web.UI.HtmlChart.TickType.Outside;
                RadHtmlChart3.PlotArea.XAxis.Reversed = false;
                RadHtmlChart3.PlotArea.XAxis.DataLabelsField = columns[0];

                RadHtmlChart3.Appearance.FillStyle.BackgroundColor = System.Drawing.Color.White;
                RadHtmlChart3.PlotArea.YAxis.LabelsAppearance.DataFormatString = "{0}";
                RadHtmlChart3.PlotArea.YAxis.LabelsAppearance.RotationAngle = 0;
                RadHtmlChart3.PlotArea.YAxis.LabelsAppearance.Color = System.Drawing.ColorTranslator.FromHtml("#000000");
                RadHtmlChart3.PlotArea.YAxis.MajorGridLines.Color =  System.Drawing.ColorTranslator.FromHtml("#EFEFEF");
                RadHtmlChart3.PlotArea.YAxis.MinorGridLines.Color = System.Drawing.ColorTranslator.FromHtml("#F7F7F7");
                RadHtmlChart3.PlotArea.YAxis.TitleAppearance.Position = Telerik.Web.UI.HtmlChart.AxisTitlePosition.Center;
                RadHtmlChart3.PlotArea.YAxis.TitleAppearance.RotationAngle = 0;
                RadHtmlChart3.PlotArea.YAxis.TitleAppearance.Text = columns[1];
                RadHtmlChart3.PlotArea.YAxis.TitleAppearance.TextStyle.Color = System.Drawing.ColorTranslator.FromHtml("#000000");
                RadHtmlChart3.PlotArea.XAxis.TitleAppearance.Text = columns[0];
                RadHtmlChart3.PlotArea.YAxis.TitleAppearance.Text = columns[1];

               ScatterLineSeries slineSeries = new ScatterLineSeries(); 
                slineSeries.LabelsAppearance.Visible = false;
                slineSeries.LabelsAppearance.Position = Telerik.Web.UI.HtmlChart.LineAndScatterLabelsPosition.Below;
                slineSeries.LabelsAppearance.DataFormatString = "{0}%";
                slineSeries.TooltipsAppearance.DataFormatString = "{0}%";
                slineSeries.DataFieldX = columns[0];
                slineSeries.DataFieldY = columns[1];
             
               RadHtmlChart3.PlotArea.Series.Add(slineSeries);
                RadHtmlChart3.DataSource = reader3;
                RadHtmlChart3.DataBind();
       }
    }


    Thank you
        







  2. Danail Vasilev
    Admin
    Danail Vasilev avatar
    1490 posts

    Posted 07 Aug 2014 Link to this post

    Hello Madhavi,

    I wasn't able to reproduce the mentioned issue. It may be possible that the passed data source is not the proper one or DataFieldX and DataFieldY properties do not refer to the right data source fields. I can suggest that you recheck these.

    If the above step, however, do not help could you please try to reproduce the issue with the code below and then tell us what changes you have made, so that I can proceed further with the investigation?
    ASPX:
    <form id="form1" runat="server">
        <telerik:RadScriptManager ID="RadScriptManager1" runat="server"></telerik:RadScriptManager>
        <asp:Panel ID="Panel3" runat="server" Style="float: left; width: 45%;">
            <telerik:RadHtmlChart ID="RadHtmlChart3" runat="server" ChartTitle-Text="Dynamic Line Series">
            </telerik:RadHtmlChart>
        </asp:Panel>
    </form>
    C#:
    protected void Page_Load(object sender, EventArgs e)
    {
        DataTable dt = new DataTable();
        dt.Columns.Add("State_col");
        dt.Columns.Add("No_Customers");
        for (int i = 0; i < 3; i++)
        {
            dt.Rows.Add(i, i);
        }
     
        RadHtmlChart3.ChartTitle.Text = "My dynamic Line Chart";
        RadHtmlChart3.ChartTitle.Appearance.Align = Telerik.Web.UI.HtmlChart.ChartTitleAlign.Center;
        RadHtmlChart3.ChartTitle.Appearance.Position = Telerik.Web.UI.HtmlChart.ChartTitlePosition.Top;
        RadHtmlChart3.Legend.Appearance.BackgroundColor = System.Drawing.Color.White;
        RadHtmlChart3.Legend.Appearance.Position = Telerik.Web.UI.HtmlChart.ChartLegendPosition.Bottom;
        RadHtmlChart3.PlotArea.Appearance.FillStyle.BackgroundColor = System.Drawing.Color.White;
        //           RadHtmlChart3.PlotArea.XAxis.Color = System.Drawing.Color.Azure;
        RadHtmlChart3.PlotArea.XAxis.MajorTickType = Telerik.Web.UI.HtmlChart.TickType.Outside;
        RadHtmlChart3.PlotArea.XAxis.MinorTickType = Telerik.Web.UI.HtmlChart.TickType.Outside;
        RadHtmlChart3.PlotArea.XAxis.Reversed = false;
        //RadHtmlChart3.PlotArea.XAxis.DataLabelsField = columns[0];
     
        RadHtmlChart3.Appearance.FillStyle.BackgroundColor = System.Drawing.Color.White;
        RadHtmlChart3.PlotArea.YAxis.LabelsAppearance.DataFormatString = "{0}";
        RadHtmlChart3.PlotArea.YAxis.LabelsAppearance.RotationAngle = 0;
        RadHtmlChart3.PlotArea.YAxis.LabelsAppearance.Color = System.Drawing.ColorTranslator.FromHtml("#000000");
        RadHtmlChart3.PlotArea.YAxis.MajorGridLines.Color = System.Drawing.ColorTranslator.FromHtml("#EFEFEF");
        RadHtmlChart3.PlotArea.YAxis.MinorGridLines.Color = System.Drawing.ColorTranslator.FromHtml("#F7F7F7");
        RadHtmlChart3.PlotArea.YAxis.TitleAppearance.Position = Telerik.Web.UI.HtmlChart.AxisTitlePosition.Center;
        RadHtmlChart3.PlotArea.YAxis.TitleAppearance.RotationAngle = 0;
        //RadHtmlChart3.PlotArea.YAxis.TitleAppearance.Text = columns[1];
        RadHtmlChart3.PlotArea.YAxis.TitleAppearance.TextStyle.Color = System.Drawing.ColorTranslator.FromHtml("#000000");
        //  RadHtmlChart3.PlotArea.XAxis.TitleAppearance.Text = columns[0];
        //  RadHtmlChart3.PlotArea.YAxis.TitleAppearance.Text = columns[1];
     
        ScatterLineSeries slineSeries = new ScatterLineSeries();
        slineSeries.LabelsAppearance.Visible = false;
        slineSeries.LabelsAppearance.Position = Telerik.Web.UI.HtmlChart.LineAndScatterLabelsPosition.Below;
        slineSeries.LabelsAppearance.DataFormatString = "{0}%";
        slineSeries.TooltipsAppearance.DataFormatString = "{0}%";
        slineSeries.DataFieldX = "State_col";
        slineSeries.DataFieldY = "No_Customers";
     
        RadHtmlChart3.PlotArea.Series.Add(slineSeries);
        RadHtmlChart3.DataSource = dt;
        RadHtmlChart3.DataBind();
    }

    Note also that XAxis.DataLabelsField is used only by category series like Line, Area, Bar, etc. not by numeric series like Scatter, ScatterLine and Bubble series.

    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
  4. madhavi
    madhavi avatar
    22 posts
    Member since:
    Jul 2014

    Posted 07 Aug 2014 in reply to Danail Vasilev Link to this post


    Thank you for your help. I have made changes to the code, and I was able to get the line chart with both X & Y values (0,0),(1,1), (2,2).
    Now, I don't understand, I was able to build pie, column graph 's with the same data dynamically.  I want X axis with all State Names, derived from the table column, and Y axis, with no. of customers in that state. Is this possible in ScatteredLineSeries. Could you suggest with any ideas how it is possible.

    Thank you.
  5. Answer
    Danail Vasilev
    Admin
    Danail Vasilev avatar
    1490 posts

    Posted 12 Aug 2014 Link to this post

    Hi Madhavi,

    Scatter, ScatterLine and BubbleSeries display continuous data(i.e., they have a numeric x-axis), so that you cannot display categories on the x-axis. Area, Column, Bar, etc. charts, however, display discrete data, so that you can have categories on their x-axis.

    If you display few values on the x-axis, however, you can use templates in order to replace numbers with custom text. See an example here. You may also find useful this help article.

    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.

     
Back to Top