Hi! I don't know if could be a other type for the html chart control. I want a donut with only 2 series like a points in a exam for example 100/120 and the points 100 shows in the center of the donut, maybe I would like to change the 100 points with a image 

For the time being the following events can be handled through the chartObject.

Select event is fired when the range of the selector from the navigator pane is changed.

JavaScript:

    <telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
        <script>
            function pageLoad() {
                var chart = $find('<%=RadHtmlChart1.ClientID%>');
                chart._chartObject.bind("selectEnd", OnSelectEnd);
            }

            function OnSelectEnd(e) {
                alert("OnSelectEnd triggered: \nFrom: " + e.from + "\n To: " + e.to);
            }

        </script>
    </telerik:RadCodeBlock>
ASPX:

        <telerik:RadHtmlChart runat="server" ID="RadHtmlChart1" Layout="Stock" Width="800" Height="400"
            Transitions="true">
            <PlotArea>
                <XAxis Name="mainAxis" DataLabelsField="SellDate" Type="Date">
                </XAxis>
                <Series>
                    <telerik:ColumnSeries DataFieldY="SellQuantity">
                    </telerik:ColumnSeries>
                </Series>
            </PlotArea>
            <Navigator Visible="true">
                <XAxis Name="navAxis"></XAxis>
                <SelectionHint Visible="true" />
                <Series>
                    <telerik:AreaSeries DataFieldY="SellQuantity">
                    </telerik:AreaSeries>
                </Series>
            </Navigator>
        </telerik:RadHtmlChart>

C#:

    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(2011, 06, 12));
        dt.Rows.Add(1, 5, new DateTime(2011, 12, 12));
        dt.Rows.Add(2, 6, new DateTime(2012, 06, 17));
        dt.Rows.Add(3, 4, new DateTime(2012, 09, 18));
        dt.Rows.Add(4, 7, new DateTime(2013, 03, 18));

        return dt;
    }

For the time being you can use the following JavaScript workaround:

		<telerik:RadHtmlChart ID="RadHtmlChart1" runat="server" Width="600" Height="300">
			<PlotArea>
				<Series>
					<telerik:LineSeries Name="series 1">
						<SeriesItems>
							<telerik:CategorySeriesItem Y="30" />
							<telerik:CategorySeriesItem Y="10" />
							<telerik:CategorySeriesItem Y="25" />
							<telerik:CategorySeriesItem Y="20" />
						</SeriesItems>
					</telerik:LineSeries>
				</Series>
				<XAxis MinValue="1">
				</XAxis>
			</PlotArea>
		</telerik:RadHtmlChart>
		<script>

                       //JavaScript workaround

			function isNumber(val) {
				return typeof val === "number" && !isNaN(val);
			}


			var dataviz = kendo.dataviz,
				inArray = dataviz.inArray,
				deepExtend = kendo.deepExtend,
				math = Math,
				AREA = "area",
				VERTICAL_AREA = "verticalArea",
				VERTICAL_LINE = "verticalLine",
				LINE = "line";

			kendo.dataviz.CategoricalPlotArea.fn.filterSeries = function (currentSeries, categoryAxis) {
				var range = categoryAxis.totalRangeIndices();
				var justified = categoryAxis.options.justified;
				var outOfRangePoints = inArray(currentSeries.type, [LINE, VERTICAL_LINE, AREA, VERTICAL_AREA]);
				var categoryIx;

				range.min = isNumber(categoryAxis.options.min) ? math.floor(range.min) : 0;
				range.max = isNumber(categoryAxis.options.max) ? (justified ? math.floor(range.max) + 1 : math.ceil(range.max)) : currentSeries.data.length;

				currentSeries = deepExtend({}, currentSeries);

				if (outOfRangePoints) {
					var minCategory = range.min - 1;
					var srcCategories = categoryAxis.options.srcCategories || [];
					if (minCategory >= 0 && minCategory < currentSeries.data.length) {
						categoryIx = minCategory;
						currentSeries._outOfRangeMinPoint = {
							item: currentSeries.data[categoryIx],
							category: srcCategories[categoryIx],
							categoryIx: -1
						};
					}

					if (range.max < currentSeries.data.length) {
						categoryIx = range.max;
						currentSeries._outOfRangeMaxPoint = {
							item: currentSeries.data[categoryIx],
							category: srcCategories[categoryIx],
							categoryIx: range.max - range.min
						};
					}
				}

				categoryAxis._seriesMax = math.max(categoryAxis._seriesMax || 0, currentSeries.data.length);

				currentSeries.data = (currentSeries.data || []).slice(range.min, range.max);

				return currentSeries;
			}
		</script>

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

A good improvement in the RadHtmlChart would be to add MaxSize and MinSize properties for the series, which would allow the control the scaling of the bubble chart item. The property can be set through the chartObject:

        <script>
            function pageLoad() {
                var chart = $find("<%=BubbleChart.ClientID%>");
                chart.get_kendoWidget().options.series[0].minSize = 1;
                chart.get_kendoWidget().options.series[0].maxSize = 10;
                chart.get_kendoWidget().redraw();
            }
        </script>
        ASPX:
        <telerik:RadHtmlChart runat="server" ID="BubbleChart" Width="500" Height="400">
            <PlotArea>
                <Series>
                    <telerik:BubbleSeries>
                        <Appearance FillStyle-BackgroundColor="#6ab2c9">
                        </Appearance>
                        <SeriesItems>
                            <telerik:BubbleSeriesItem Size="1" X="5" Y="5500" />
                            <telerik:BubbleSeriesItem Size="5" X="14" Y="12200" />
                            <telerik:BubbleSeriesItem Size="15" X="20" Y="39000" />
                        </SeriesItems>
                    </telerik:BubbleSeries>
                </Series>
            </PlotArea>
        </telerik:RadHtmlChart>


More detailed information regarding these properties can be found in the API reference of the Kendo UI Chart here:
http://docs.telerik.com/kendo-ui/api/javascript/dataviz/ui/chart#configuration-series.maxSize

For the time being the reversed properties can be set through the kendo widget:
		<script>
			function pageLoad(sender, args) {

				var radarChart = $find('<%=RadarLineChart.ClientID%>').get_kendoWidget();
				var polarChart = $find('<%=PolarAreaChart.ClientID%>').get_kendoWidget();


				radarChart.options.valueAxis.reverse = true;
				polarChart.options.yAxis.reverse = true;


				radarChart.options.categoryAxis.reverse = true;
				polarChart.options.xAxis.reverse = true;

				radarChart.redraw();
				polarChart.redraw();
			}
		</script>

		<telerik:RadHtmlChart runat="server" ID="RadarLineChart" Width="345" Height="345">
			<PlotArea>
				<XAxis Reversed="true">
					<Items>
						<telerik:AxisItem LabelText="January"></telerik:AxisItem>
						<telerik:AxisItem LabelText="February"></telerik:AxisItem>
						<telerik:AxisItem LabelText="March"></telerik:AxisItem>
						<telerik:AxisItem LabelText="April"></telerik:AxisItem>
						<telerik:AxisItem LabelText="May"></telerik:AxisItem>
					</Items>
				</XAxis>
				<YAxis Reversed="true">
				</YAxis>
				<Series>
					<telerik:RadarLineSeries Name="Avg Low" MissingValues="Gap">
						<SeriesItems>
							<telerik:CategorySeriesItem Y="1000"></telerik:CategorySeriesItem>
							<telerik:CategorySeriesItem Y="8000"></telerik:CategorySeriesItem>
							<telerik:CategorySeriesItem Y="11000"></telerik:CategorySeriesItem>
							<telerik:CategorySeriesItem Y="13000"></telerik:CategorySeriesItem>
							<telerik:CategorySeriesItem Y="12000"></telerik:CategorySeriesItem>
						</SeriesItems>
					</telerik:RadarLineSeries>
				</Series>
			</PlotArea>
		</telerik:RadHtmlChart>

		<telerik:RadHtmlChart runat="server" ID="PolarAreaChart" Width="345" Height="345">
			<PlotArea>
				<XAxis Reversed="true">
				</XAxis>
				<YAxis Reversed="true">
				</YAxis>
				<Series>
					<telerik:PolarAreaSeries Name=">12.3 knots">
						<SeriesItems>
							<telerik:PolarSeriesItem Angle="125" Radius="2.4"></telerik:PolarSeriesItem>
							<telerik:PolarSeriesItem Angle="138" Radius="7.5"></telerik:PolarSeriesItem>
							<telerik:PolarSeriesItem Angle="152" Radius="8.3"></telerik:PolarSeriesItem>
							<telerik:PolarSeriesItem Angle="166" Radius="4.3"></telerik:PolarSeriesItem>
						</SeriesItems>
					</telerik:PolarAreaSeries>
				</Series>
			</PlotArea>
		</telerik:RadHtmlChart>

When using the RadHtmlChart RadarSeries the axis are default drawn like a spiders web. (see screenshot)

A common request is that axis lines for this type of graph are drawn as circles (represending more a Radar type look).

This can currently be achieved by accessing the Kendo widget like so:

$find('RadarAreaChart').get_kendoWidget().options.valueAxis.majorGridLines.type="arc";
$find('RadarAreaChart').get_kendoWidget().options.valueAxis.minorGridLines.type="arc";
$find('RadarAreaChart').get_kendoWidget().redraw();

But it would be VERY convenient (and probably very easy to implement for you guys :-) if it was a setting on the RadarSeries itself (or perhaps on the axis of the RadarSeries.

E.g. property on RadarSeries called AxisType with values (Spider or Radar).

Best Regards

Thomas

JavaScript workaround:
		<telerik:RadHtmlChart runat="server" ID="LineChart" Width="800" Height="500" Transitions="true">
			<PlotArea>
				<Series>
					<telerik:LineSeries Name="Week 15" ZIndex="0">
						<SeriesItems>
							<telerik:CategorySeriesItem Y="15" />
							<telerik:CategorySeriesItem />
							<telerik:CategorySeriesItem Y="71" />
							<telerik:CategorySeriesItem Y="93" />
							<telerik:CategorySeriesItem Y="43" />
							<telerik:CategorySeriesItem Y="23" />
						</SeriesItems>
					</telerik:LineSeries>
				</Series>
			</PlotArea>
		</telerik:RadHtmlChart>
		<script>
			kendo.dataviz.LineChart.fn.animationPoints = function () {
				var series = this.seriesOptions;
				var points = [];
				var seriesPoints;
				var pointsIdx, idx;
				for (idx = 0; idx < series.length; idx++) {
					if (series[idx].markers.visible) {
						seriesPoints = this.seriesPoints[idx];
						for (pointsIdx = 0; pointsIdx < seriesPoints.length; pointsIdx++) {
							if (seriesPoints[pointsIdx] != null) {
								points.push(seriesPoints[pointsIdx].marker);
							}
						}
					}
				}
				return points.concat(this._segments);
			}
		</script>

The workaround is to convert the color names to HEX, for example through the following HexConverter() method:
ASPX:

        <telerik:RadClientExportManager runat="server" ID="RadClientExportManager1">
        </telerik:RadClientExportManager>
        <telerik:RadButton ID="RadButton1" runat="server" OnClientClicked="exportRadHtmlChart" Text="Export RadHtmlChart to PDF" AutoPostBack="false" UseSubmitBehavior="false"></telerik:RadButton>
        <telerik:RadHtmlChart ID="RadHtmlChart1" runat="server" Width="600" Height="400">
            <PlotArea>
                <Series>
                    <telerik:ColumnSeries Name="Series 1" DataFieldY="myValues" ColorField="Color">
                    </telerik:ColumnSeries>
                </Series>
            </PlotArea>
        </telerik:RadHtmlChart>
        <script>
            var $ = $telerik.$;
            function exportRadHtmlChart() {
                $find('<%=RadClientExportManager1.ClientID%>').exportPDF($(".RadHtmlChart"));
            }
        </script>

C#:

    protected void Page_Load(object sender, EventArgs e)
    {
        DataTable dt = GetData();

        for (int i = 0; i < dt.Rows.Count; i++)
        {
            //Not all Color Names can be exported
            // dt.Rows[i]["Color"] = ColorTranslator.ToHtml(GetColor(i));

            //Convert colors to HEX works properly
            dt.Rows[i]["Color"] = HexConverter(GetColor(i));
        }
        RadHtmlChart1.DataSource = dt;
        RadHtmlChart1.DataBind();
    }

    public static DataTable GetData()
    {
        DataTable dt = new DataTable("ChargeData");
        dt.Columns.Add("myValues", typeof(int));
        dt.Columns.Add("Color", typeof(string));


        dt.Rows.Add(11, "");
        dt.Rows.Add(12, "");
        dt.Rows.Add(13, "");
        dt.Rows.Add(14, "");
        dt.Rows.Add(15, "");
        dt.Rows.Add(16, "");
        dt.Rows.Add(17, "");
        dt.Rows.Add(18, "");
        dt.Rows.Add(19, "");
        dt.Rows.Add(20, "");
        return dt;
    }

    public static String HexConverter(System.Drawing.Color c)
    {
        return "#" + c.R.ToString("X2") + c.G.ToString("X2") + c.B.ToString("X2");
    }

    public static Color GetColor(int index)
    {
        return colors[index % colors.Length];
    }

    public static readonly Color[] colors =
    {
        Color.Orange,
        Color.Violet,
        Color.MediumSeaGreen,
        Color.HotPink,
        Color.Black,
        Color.DarkGoldenrod,
        Color.DarkMagenta,
        Color.Chocolate,
        Color.DarkOliveGreen,
        Color.DarkTurquoise
    };

For the time being you can use the following workaround:
1) Either hide the chart with visibility:hidden instead of display:none
2) Or use the following workaround:
		<div id="div1" style="display: none;">
			<telerik:RadHtmlChart runat="server" ID="ColumnChart1" Width="600px" Height="400px">
				<PlotArea>
					<Series>
						<telerik:ColumnSeries Name="Product 1">
							<SeriesItems>
								<telerik:CategorySeriesItem Y="1" />
								<telerik:CategorySeriesItem Y="2" />
								<telerik:CategorySeriesItem Y="3" />
							</SeriesItems>
						</telerik:ColumnSeries>
					</Series>
				</PlotArea>
			</telerik:RadHtmlChart>
		</div>
		<input type="button" onclick="showChart(); return false;" value="Show Chart" />
		<script>
			Telerik.Web.UI.RadHtmlChart.prototype._getMainConfig = function () {
				var that = this;
				//when visible is false - nothing is sent from the server to save transferred data
				//e.g - there are properties set but visible is false - we do not need to send those properties amyway
				//that is why - set visible: false when nothing is sent from the server
				that._options = $telerik._getPropertiesParameter(that, that.constructor);
				that._cleanUpConfigProperties();

				that._options["theme"] = that.get_skin();
				//that._options["visible"] = $(that.get_element()).is(':visible');
				that._options["title"] = that._chartTitle ? that._parseObject(that._chartTitle) : { visible: false };
				that._options["legend"] = that._legend ? that._parseObject(that._legend) : { visible: false };

				if (that._chartArea) {
					that._options["chartArea"] = that._parseObject(that._chartArea);
				}

				if (that._isSparklineChart()) {
					that._setMinimumSparklineWidth();
				}

				if (that._plotArea) {
					that._configurePlotArea();
				}

				if (that._series) {
					/*jshint evil: true */
					that._options["series"] = eval(that._series);
					/*jshint evil: false */
				}

				if (that._isStockChart()) {
					that._configureStockChart();
				}
			}
		</script>

In RadHtmlChart there is no property to specify Width for Bar/Column series. It automatically calculates series width based on chart width, number of series, number of items within series, gap and spacing, etc.,
If there is more than one bar/column chart in single page, there is no way to show Bar/Column series of exact width in all chart to make page consistent.