Hi , help to change the RadChart To RadHtmlChart for line chart series , below is the existing code used RadChart . i need to update to RadHtmlChart

hartAnalysis_BLL objBLL = new ChartAnalysis_BLL();
DataTable dt = objBLL.GetMonthlySSMTotalQuantityImported(arrParameters);

// Create new chart
RadChart2.ChartTitle.TextBlock.Appearance.TextProperties.Font = new System.Drawing.Font(RadChart2.ChartTitle.TextBlock.Appearance.TextProperties.Font.FontFamily, 11, System.Drawing.FontStyle.Bold);
RadChart2.ChartTitle.TextBlock.Text = "Extended Monthly SSM Total Quantity Imported \n(" + ssm[0] + ")";
RadChart2.Width = AppConstants.CONST_CHART_WIDTH;
RadChart2.ChartTitle.Visible = true;
RadChart2.Chart.DefaultType = ChartSeriesType.Line;
RadChart2.PlotArea.Appearance.Dimensions.Margins.Left = Telerik.Charting.Styles.Unit.Percentage(10);
RadChart2.PlotArea.Appearance.Dimensions.Margins.Right = Telerik.Charting.Styles.Unit.Percentage(15);
RadChart2.PlotArea.Appearance.Dimensions.Margins.Bottom = Telerik.Charting.Styles.Unit.Percentage(30);

RadChart2.DataManager.ValuesXColumn = "Date";
RadChart2.DataManager.ValuesYColumns = new string[1] { "SSM Quantity" };
RadChart2.IntelligentLabelsEnabled = true;
RadChart2.DataSource = dt;
RadChart2.DataBind();
RadChart2.Skin = AppConstants.CONST_TELERIK_CHARTSKIN;

RadChart2.PlotArea.XAxis.Clear();
RadChart2.PlotArea.XAxis.IsZeroBased = false;
RadChart2.PlotArea.XAxis.AutoScale = false;
RadChart2.PlotArea.XAxis.Appearance.ValueFormat = ChartValueFormat.ShortDate;
RadChart2.PlotArea.XAxis.Appearance.CustomFormat = "MMM yy";
RadChart2.PlotArea.XAxis.AxisLabel.Visible = true;
RadChart2.PlotArea.XAxis.AxisLabel.TextBlock.Text = "Month \n(" + AppFunctions.GetDisclaimer() + ")";
RadChart2.PlotArea.XAxis.AxisLabel.TextBlock.Appearance.TextProperties.Color = System.Drawing.Color.Black;
RadChart2.PlotArea.XAxis.Appearance.LabelAppearance.RotationAngle = -45;

RadChart2.PlotArea.YAxis.AxisLabel.Visible = true;
RadChart2.PlotArea.YAxis.AxisLabel.TextBlock.Text = "Total Quantity of SSM Imported (" + dt.Rows[0]["UOM"] + ")";
RadChart2.PlotArea.YAxis.AxisLabel.TextBlock.Appearance.TextProperties.Color = System.Drawing.Color.Black;

RadChart2.Series.GetSeries(0).Appearance.PointMark.Dimensions.Width = 1;
RadChart2.Series.GetSeries(0).Appearance.PointMark.Dimensions.Height = 1;
RadChart2.Series.GetSeries(0).Appearance.PointMark.FillStyle.MainColor = System.Drawing.Color.Black;
RadChart2.Series.GetSeries(0).Appearance.PointMark.FillStyle.FillType = FillType.Solid;
RadChart2.Series.GetSeries(0).Appearance.PointMark.Visible = true;
RadChart2.Series.GetSeries(0).Appearance.LineSeriesAppearance.Color = System.Drawing.Color.Orange;
RadChart2.Series.GetSeries(0).Appearance.LineSeriesAppearance.Width = 3;

int intYear = dt_SelDateFrom.Year;
int intMonth = dt_SelDateFrom.Month;
DateTime start = new DateTime(intYear, intMonth, 1);
TimeSpan ts = dt_SelDateTo - dt_SelDateFrom;
int intMthDiff = Convert.ToInt32(Math.Ceiling((ts.TotalDays / 30)));

for (int i = 0; i < intMthDiff; i++)
{
    ChartAxisItem item = new ChartAxisItem();
    item.Value = (decimal)start.AddMonths(i).ToOADate();
    RadChart2.PlotArea.XAxis.AddItem(item);
}

DataTable dt_avg = objBLL.GetSSMTotalImportedLastYearAverage(arrParameters);

// Define chart series
ChartSeries avg_series = new ChartSeries();
avg_series.Appearance.LabelAppearance.Visible = false;
avg_series.Name = "Last Year Average";
avg_series.Type = ChartSeriesType.Line;
avg_series.Appearance.PointMark.Dimensions.Width = 1;
avg_series.Appearance.PointMark.Dimensions.Height = 1;
avg_series.Appearance.PointMark.FillStyle.MainColor = System.Drawing.Color.Black;
avg_series.Appearance.PointMark.FillStyle.FillType = FillType.Solid;
avg_series.Appearance.PointMark.Visible = true;
avg_series.Appearance.LineSeriesAppearance.Color = System.Drawing.Color.Red;

foreach (DataRow row in dt_avg.Rows)
{
    foreach (DataColumn col in dt_avg.Columns)
    {
        Decimal dec_data = Convert.ToDecimal(row[col]);
        Double dbl_data = Convert.ToInt32(dec_data);
        avg_series.AddItem(dbl_data);
    }
}

RadChart2.AddChartSeries(avg_series);

ArrayList arrParameterBaseline = new ArrayList();
arrParameterBaseline.Add(dt_SelBaselineFrom);
arrParameterBaseline.Add(dt_SelBaselineTo);
arrParameterBaseline.Add(dt_SelSSMSeqID);
SqlDataReader dr_baseline = objBLL.GetSSMTotalImportedBaseline(arrParameterBaseline);

ChartSeries baseline_series = new ChartSeries();
baseline_series.Appearance.LabelAppearance.Visible = false;
baseline_series.Name = "Baseline Average";
baseline_series.Type = ChartSeriesType.Line;
baseline_series.Appearance.PointMark.Dimensions.Width = 1;
baseline_series.Appearance.PointMark.Dimensions.Height = 1;
baseline_series.Appearance.PointMark.FillStyle.MainColor = System.Drawing.Color.Black;
baseline_series.Appearance.PointMark.FillStyle.FillType = FillType.Solid;
baseline_series.Appearance.PointMark.Visible = true;
baseline_series.Appearance.LineSeriesAppearance.Color = System.Drawing.Color.Chartreuse;

Double dbl_baseline = 0;

if (dr_baseline == null)
{
    dbl_baseline = 0;
}
else
{
    try
    {
        while (dr_baseline.Read())
        {
            if (dr_baseline["TotalImportedBaseline"] == DBNull.Value)
                dbl_baseline = 0;
            else
            {
                Decimal dec_baseline = dr_baseline.GetDecimal(dr_baseline.GetOrdinal("TotalImportedBaseline"));
                dbl_baseline = Convert.ToDouble(dec_baseline);
            }
        }
    }
    catch (Exception ex)
    {
        AppFunctions.SetMessageError(this.Page, AppConstants.CONST_ERROR_LOAD_CHART);
        AppFunctions.ErrorLog(ex);
    }
    finally
    {
        if (dr_baseline != null)
        {
            dr_baseline.Close();
            dr_baseline.Dispose();
        }
    }
}

for (int i = 0; i < intMthDiff; i++)
{
    baseline_series.AddItem(dbl_baseline);
}

RadChart2.AddChartSeries(baseline_series);

Panel1.Controls.Add(RadChart2);

}
catch (Exception ex)
{
    AppFunctions.SetMessageError(this.Page, AppConstants.CONST_ERROR_LOAD_CHART);
    AppFunctions.ErrorLog(ex);
}

Currently labels for SeriesItems having Y of 0 are not displayed in PieSeries and DonutSeries due to visual considerations. Improve the handling of such labels.

Label position dynamic. I'm currently using "InsideBase", but if those values are so small it's not very visible, so i'd like place those on the outside end.

I get a lot of work creating BI/KPI UIs which are basically converting what you can do in Excel Charts into a Web UI.   Which means anything they can do in Excel they expect the web to do. 
Since there is a drive to automate as much mundane human activity in the business and reduce human error (cut and paste error). 
I need to reproduce a graph with 'standard' Tend Lines. 
That is not my interpretation of a trend, but standard best practice.
I want this as a checkbox, and attribute to a series for the DataFieldY value.
Initially a code solution would be fine (once its got the data from the data source).

http://www.telerik.com/blogs/how-to-plot-a-simple-linear-regression-in-telerik-asp.net-web-form-chart
 

When migrating from a GeckoBoard.com dashboard, I have a Area Chart where the values over the target are one colour and those below another colour, this is true of Area and Bar charts. At the moment  I can use the "'ColorField="ErrorsColor"> " to colour the whole column to a given colour, but not that part above its Target.
One approach could be is to have 2 plots one below the target and one above the target, I would prefer to be this in control of the HtmlChart and for me not to frig it.
Thanks

Hi,

What I see in the HTML chart control is almost what I need.  The closest that I can get to a "generic chart" (with everything specified in the data) is binding to the XMLDataSource, but even with that, it appears that the Series Name needs to be hard-coded (not included in the XML data) or we need to write code to replace a hard-coded value with an "out of band" supplied value for each of the series names.

I've been looking through all of the demos and it appears that in every one of them, labels or titles that appear on the graph show up in the code somewhere.  Then when I look at the documentation, there is no place where those labels or titles can be extracted from the data source.  This would indicate to me that every graph needs to be hard-coded.

Am I missing something?  I hope so.  We have potentially thousands of graphing possibilities that we need to implement and would like the user to be able to design their own and this control looks pretty good, except for the "hard-coding" thing.  If we could retrieve the series names from the XML input, the task would take days; if we need to individually code each chart, it will take months to staff-years.

Here is a sample of what the XML input could look like:

<chart caption='Error Summary by Day'>
	<categories>
		<category label='Nov+11' />
		<category label='Nov+12' />
		<category label='Nov+13' />
		<category label='Nov+14' />
		<category label='Nov+15' />
		<category label='Nov+16' />
		<category label='Nov+17' />
		<category label='Nov+18' />
		<category label='Nov+19' />
		<category label='Nov+20' />
		<category label='Nov+21' />
		<category label='Nov+22' />
		<category label='Nov+23' />
		<category label='Nov+24' />
		<category label='Nov+25' />
		<category label='Nov+26' />
		<category label='Nov+27' />
		<category label='Nov+28' />
		<category label='Nov+29' />
		<category label='Nov+30' />
	</categories>
	<dataset seriesname='Notes'>
		<set value='0' />
		<set value='0' />
		<set value='0' />
		<set value='3' />
		<set value='3' />
		<set value='4' />
		<set value='5' />
		<set value='5' />
		<set value='3' />
		<set value='3' />
		<set value='2' />
		<set value='2' />
		<set value='0' />
		<set value='0' />
		<set value='0' />
		<set value='0' />
		<set value='0' />
		<set value='0' />
		<set value='0' />
		<set value='0' />
	</dataset>
	<dataset seriesname='Warnings'>
		<set value='0' />
		<set value='0' />
		<set value='0' />
		<set value='0' />
		<set value='0' />
		<set value='2' />
		<set value='2' />
		<set value='3' />
		<set value='3' />
		<set value='4' />
		<set value='4' />
		<set value='5' />
		<set value='6' />
		<set value='4' />
		<set value='3' />
		<set value='2' />
		<set value='0' />
		<set value='0' />
		<set value='0' />
		<set value='0' />
	</dataset>
	<dataset seriesname='Errors'>
		<set value='74' />
		<set value='74' />
		<set value='74' />
		<set value='74' />
		<set value='76' />
		<set value='76' />
		<set value='76' />
		<set value='71' />
		<set value='71' />
		<set value='64' />
		<set value='64' />
		<set value='64' />
		<set value='54' />
		<set value='44' />
		<set value='44' />
		<set value='31' />
		<set value='31' />
		<set value='21' />
		<set value='22' />
		<set value='12' />
	</dataset>
</chart>

You would use an XML attribute to specify series and chart names.

Thanks,
Rob

Currently, the RadHtmlChart control allows you to create a spline series to display. But sometimes, we need the curve to follow more of a Bezier path because the points in the series aren't necessarily the local min/max for the neighborhood around them. This would function much like the smooth line that appears in Excel's scatter chart type or the ChartFX control's curve gallery type.

Add support for a secondary x-axis at the top of the chart.
Please use consistent axis types.
Why would the primary axes be of type Telerik.Web.UI.HtmlChart.PlotArea.Chart*Axis and the secondary y-axis be of type Telerik.Web.UI.AxisY?

I have an htmlchart using a scatter series and a radgrid, on the grid row hover event I call the below javascript function to show the relevant tooltip for the plotted point matching the id of the grid row.

This all works well, however I would like to also highlight the plotted point that the tooltip relates to, the same effect as the mouse over on the point within the chart.

Right now we do not have a way to show some tooltips over Axis Labels
This is useful when we have big names for Axis Labels, we can put some short cut names be default and then show full name over tool tip.

We can use Series tooltip, but it looks ugly for stacked series when you have 4 to 5 series

Hello, 

I would like to highlight a GridLine based on a Labelled item when I have implemented skip in the HTML Chart. 

Essentially, I have a series of days and would like to step the labels on a weekly basis. At each step I would like to highlight the GridLine associated with the label.

Similar to the Scale Breaks functionality in RadChart - http://docs.telerik.com/devtools/aspnet-ajax/controls/chart/features/scale-breaks

We want the Kendo chart widget (RadHtmlChart actually) to blend in with the webpage we use it in. In this page, we use font-weight 300. Since there is no way to specify the font-weight in the chart, we have had to use a hack to specify it:

            function chartLoad(chart, args) {

                chart.get_kendoWidget().setOptions({ title: { font: "20px sans-serif; font-weight: 300" }});

            }

This is not only a clumpsy hack, but it also make use of a custom skin impossible (for setting the font).

For the time being the DateTime object can be set to the AxisCrossingPoint on the client. For example:

ASPX:

		<script>
			function OnLoadHandler(sender, args) {
				var kendoChart = sender.get_kendoWidget();
				var opts = kendoChart.options;
				opts.categoryAxis.axisCrossingValues = [0, new Date("2014, 11, 05, 19:15:00")];
				kendoChart.setOptions(opts);
			}
		</script>
		<telerik:RadHtmlChart runat="server" ID="RadHtmlChart1" Width="600px" Height="400px">
			<ClientEvents OnLoad="OnLoadHandler" />
			<PlotArea>
				<Series>
					<telerik:LineSeries Name="Product 1" DataFieldY="SellQuantity">
					</telerik:LineSeries>
				</Series>
				<XAxis DataLabelsField="SellDate" BaseUnit="Minutes">
					<LabelsAppearance Step="15"></LabelsAppearance>
					<MinorGridLines Visible="false" />
					<AxisCrossingPoints>
						<telerik:AxisCrossingPoint Value="10" />
					</AxisCrossingPoints>
				</XAxis>
				<AdditionalYAxes>
					<telerik:AxisY></telerik:AxisY>
				</AdditionalYAxes>
			</PlotArea>
			<ChartTitle Text="LineSeries"></ChartTitle>
		</telerik:RadHtmlChart>


C#:
	protected void Page_Load(object sender, EventArgs e)
	{
		if (!Page.IsPostBack)
		{
			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(2014, 11, 05, 18, 22, 22));
		dt.Rows.Add(2, 5, new DateTime(2014, 11, 05, 18, 56, 22));
		dt.Rows.Add(3, 6, new DateTime(2014, 11, 05, 19, 14, 22));
		dt.Rows.Add(4, 4, new DateTime(2014, 11, 05, 19, 48, 22));
		dt.Rows.Add(5, 7, new DateTime(2014, 11, 05, 20, 12, 22));

		return dt;
	}

The feature will be similar to Plot Bands (see http://demos.telerik.com/aspnet-ajax/htmlchart/examples/functionality/plot-bands/defaultcs.aspx demo), however, the width of lines will not be dependent on the y-axis scale.

The feature should be like the one in KendoUI' https://docs.telerik.com/kendo-ui/api/javascript/dataviz/ui/chart#configuration-series.aggregate
For the time being it can be set through the chartObject:
ASPX:
		<telerik:RadScriptManager ID="RadScriptManager1" runat="server"></telerik:RadScriptManager>
		<script type="text/ecmascript">
			function pageLoad() {
				var chart = $find("<%=RadHtmlChart1.ClientID%>");
				chart._chartObject.options.series[0].aggregate = "sum";
				chart.repaint();
			}
		</script>
		<telerik:RadHtmlChart runat="server" ID="RadHtmlChart1" Width="640px" Height="480px">
			<PlotArea>
				<Series>
					<telerik:LineSeries DataFieldY="SellQuantity">
					</telerik:LineSeries>
				</Series>
				<XAxis BaseUnit="months" DataLabelsField="SellDate">
					<LabelsAppearance DataFormatString="d">
					</LabelsAppearance>
				</XAxis>
			</PlotArea>
		</telerik:RadHtmlChart>
C#:
        using System.Data;
	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(2012, 06, 12));
		dt.Rows.Add(2, 5, new DateTime(2012, 06, 13));
		dt.Rows.Add(3, 6, new DateTime(2012, 06, 17));
		dt.Rows.Add(4, 4, new DateTime(2012, 07, 18));
		dt.Rows.Add(5, 7, new DateTime(2012, 07, 20));

		return dt;
	}