HTML Chart - Generate Data Table Below Chart

Progress® Telerik® UI for ASP.NET AJAX Feedback Portal

Create an account Log In

Back to Feed

Request a Feature Report a Bug

Declined

Last Updated: 01 Jun 2016 14:21 by cw

tlp

Created on: 23 Jul 2014 18:06

Category: HtmlChart

Type: Feature Request

HTML Chart - Generate Data Table Below Chart

The option to generate a chart data table (based on the chart series) below a chart is available when using the RadChart control. A similar option/properties would be nice within the RadHtmlChart control.

Thanks

4 comments

Posted on: 01 Jun 2016 14:21

I agree totally with Tony. 

This is a very useful and popular way of showing data in many companies I worked for, especially in Project Mgmt areas. 

Users do it in Excel Chart a lot, easily, as shown in the attached screen and at this URL:
       http://www.dummies.com/how-to/content/how-to-add-a-data-table-to-an-excel-2010-chart.html

We try to use your controls to do the same thing for them. TableChart is/was the solution.

Why remove a good and useful feature in the newer version anyway?

To manually put a Grid below the Chart as shown in the screen you provided at: http://screencast.com/t/QhbmS3FJP is kind of OK but not really a solution. It's because these 2 problems:
    - it shows the data, date usually, vertically instead of Horizontally. 
    - Thus they do NOT align the x-axis labels accordingly.

Thanks.

Attached Files:

ChartWithDataTable.png

tlp

Posted on: 01 Jun 2016 13:06

Hello Danail,

I don't believe that this should be declined. Currently, we are placing a grid below the chart but there are various formatting issues with this. For example, it is difficult to line-up the grid columns with the chart x-axis labels (especially if you have to work with numerous charting scenarios). Furthermore, it would be nice to include the series symbols/colors as a column in the data table. Again, this can be done with the grid but it would be nice if the data table was formatted consistently with the chart. The data table feature existed in the previous (now obsolete) chart control and this functionality is not available in the Html Chart control. It would have been nice if the feature was also provided in the Html control since competitors with similar controls do contain this feature.

ADMIN

Danail Vasilev

Posted on: 01 Jun 2016 11:30

Declined with the following reason - To display a data table below the chart you can simply place a RadGrid control below the RadHtmlChart and bind it to the same data source as the chart's data. The grid's AutoGenerateColumns property is true by default, so no additional configuration is required. The grid control also let you made further configuration/visual fine-tuning. For example the code below renders like that - http://screencast.com/t/QhbmS3FJP
ASPX:
		<telerik:RadHtmlChart ID="RadHtmlChart1" runat="server" Width="600" Height="400">
			<PlotArea>
				<Series>
					<telerik:ScatterLineSeries Name="Series 1" DataFieldX="SellDate" DataFieldY="SellQuantity">
					</telerik:ScatterLineSeries>
				</Series>
			</PlotArea>
		</telerik:RadHtmlChart>
		<telerik:RadGrid ID="RadGrid1" runat="server" Width="600"></telerik:RadGrid>
C#:
	protected void Page_Load(object sender, EventArgs e)
	{
		RadHtmlChart1.DataSource = GetData();
		RadHtmlChart1.DataBind();

		RadGrid1.DataSource = GetData();
		RadGrid1.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;
	}

Posted on: 31 May 2016 20:57

DataTable as shown in this page is VERY NICE. It's a very popular way to show data in many companies. Do not understand the logic of removing existing feature in the newer replacement of Chart. I hope this feature will be restored in the newer RadHtmlChart.

http://docs.telerik.com/devtools/aspnet-ajax/controls/chart/understanding-radchart-elements/data-table