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
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
3 Answers, 1 is accepted
0
Hello ,
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:
C#:
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
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>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.
0
madhavi
Top achievements
Rank 1
Rank 1
answered on 07 Aug 2014, 02:12 PM
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.
0
Accepted
Hi ,
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
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.