If our X-axis is filled by numeric values, we don't want to navigate by date or by category or by logaritmic. We may want those values, the same shown in X-axis, determinating our chart.
For instance: latitude (X-axis) and longitude (Y-axis). We want to navigate by latitude and select view from lat. = 44 to lat. = 45. Date or datetime would be meaningless.
Will it be possible?

For the time being you can use a JavaScript function inside the template to cut the labels - http://docs.telerik.com/kendo-ui/dataviz/chart/how-to/shorten-chart-labels

Hello,

The RadHtmlCharts are great! One that is missing however -- a spectrum chart, aka a spectral chart. This takes in a set of data points and renders the values as color-dense shadings. Screenshot attached of one we made ourselves.

This would be useful for scientific applications.


thanks,
matt

For the time being the property can be set through the kendo widget:
		<script type="text/javascript">
			function pageLoad() {
				var kendoWidget = $find("<%=RadHtmlChart1.ClientID%>").get_kendoWidget();
				kendoWidget.options.series[0].color = function (e) {
					if (e.value > 20) {
						return "red";
					}
					else {
						return "green";
					}
				}
				kendoWidget.redraw();
			}
		</script>
		<telerik:RadHtmlChart ID="RadHtmlChart1" runat="server" Width="600" Height="400">
			<PlotArea>
				<Series>
					<telerik:ColumnSeries>
						<SeriesItems>
							<telerik:CategorySeriesItem Y="30" />
							<telerik:CategorySeriesItem Y="10" />
							<telerik:CategorySeriesItem Y="20" />
						</SeriesItems>
					</telerik:ColumnSeries>
				</Series>
			</PlotArea>
		</telerik:RadHtmlChart>

For the time being you can manually fetch the data and pass it to the chart:
		<script>
			function pageLoad() {
				var dataSource = $find('<%= RadClientDataSource1.ClientID %>');
				dataSource.fetch(function (args) {
					var data = args.get_data(),
						chart = $find('<%=RadHtmlChart1.ClientID%>');
					//workaround
					chart.set_dataSource(data);
					chart.repaint();
				});
			}
		</script>
		<telerik:RadClientDataSource ID="RadClientDataSource1" runat="server">
			<DataSource>
				<WebServiceDataSourceSettings>
					<Select Url="spain-electricity.json" DataType="JSON" />
				</WebServiceDataSourceSettings>
			</DataSource>
			<Schema>
				<Model>
					<telerik:ClientDataSourceModelField FieldName="year" DataType="String" />
					<telerik:ClientDataSourceModelField FieldName="solar" DataType="Number" />
				</Model>
			</Schema>
		</telerik:RadClientDataSource>

		<telerik:RadHtmlChart ID="RadHtmlChart1" runat="server" ClientDataSourceID="RadClientDataSource1">
			<PlotArea>
				<Series>
					<telerik:LineSeries DataFieldY="year" Name="year">
					</telerik:LineSeries>
				</Series>
				<XAxis DataLabelsField="year"></XAxis>
			</PlotArea>
		</telerik:RadHtmlChart>

For the time being the function can be set through the kendoWidget:

<telerik:RadHtmlChart runat="server" ID="ColumnChart1" Transitions="true">
    <PlotArea>
        <Series>
            <telerik:ColumnSeries Name="Product 1">
                <TooltipsAppearance BackgroundColor="Orange" DataFormatString="{0} sales" />
                <SeriesItems>
                    <telerik:CategorySeriesItem Y="15000" />
                    <telerik:CategorySeriesItem Y="23000" />
                    <telerik:CategorySeriesItem Y="10000" />
                    <telerik:CategorySeriesItem Y="16000" />
                </SeriesItems>
            </telerik:ColumnSeries>
        </Series>
        <XAxis AxisCrossingValue="0" Color="Black" MajorTickType="Outside" MinorTickType="Outside"
            Reversed="false">
            <Items>
                <telerik:AxisItem LabelText="1" />
                <telerik:AxisItem LabelText="2" />
                <telerik:AxisItem LabelText="3" />
                <telerik:AxisItem LabelText="4" />
            </Items>
            <LabelsAppearance DataFormatString="Q{0}" RotationAngle="0" />
            <MajorGridLines Color="#EFEFEF" Width="1" />
            <MinorGridLines Color="#F7F7F7" Width="1" />
            <TitleAppearance Position="Center" RotationAngle="0" Text="Quarters" />
        </XAxis>
        <YAxis AxisCrossingValue="0" Color="Black" MajorTickSize="1" MajorTickType="Outside"
            MaxValue="50000" MinorTickSize="1" MinorTickType="Outside" MinValue="0" Reversed="false"
            Step="10000">
            <LabelsAppearance DataFormatString="{0} sales" RotationAngle="0" />
            <TitleAppearance Position="Center" RotationAngle="0" Text="Sales" />
        </YAxis>
    </PlotArea>
    <ChartTitle Text="Product Sales for 2011">
    </ChartTitle>
    <Legend>
        <Appearance Position="Bottom" />
    </Legend>
</telerik:RadHtmlChart>
<script>
    function pageLoad() {
        $ = $telerik.$;
        var kendoWidget = $find("<%=ColumnChart1.ClientID%>").get_kendoWidget();
        kendoWidget.options.series[0].labels.position = function (point) {
            if (point.value < 20000) {
                console.log(1);
                return "insideEnd";
            } else {
                console.log(2);
                return "outsideEnd";
            }
        }
        kendoWidget.redraw();
    }
</script>

The property (http://docs.telerik.com/kendo-ui/api/javascript/dataviz/ui/chart#configuration-categoryAxis.maxDateGroups) can be set through the kendoWidget:
JavaScript:

        <script>
            function OnLoad(args) {
                var kendoWidget = args.get_kendoWidget();
                kendoWidget.options.categoryAxis.maxDateGroups = 8;
                kendoWidget.options.categoryAxis.baseUnit = 'fit';
                kendoWidget.redraw();
            }
        </script>

ASPX:

        <telerik:RadHtmlChart runat="server" ID="RadHtmlChart2" Width="640px" Height="480px">
            <ClientEvents OnLoad="OnLoad" />
            <PlotArea>
                <Series>
                    <telerik:LineSeries DataFieldY="SellQuantity">
                        <LabelsAppearance DataFormatString="{1} cars sold on {0:m}">
                        </LabelsAppearance>
                        <TooltipsAppearance Color="White" DataFormatString="{1} cars sold on<br/>{0:D}" />
                    </telerik:LineSeries>
                </Series>
                <XAxis DataLabelsField="SellDate">
                    <TitleAppearance Text="Sell Date">
                    </TitleAppearance>
                    <LabelsAppearance DataFormatString="d">
                    </LabelsAppearance>
                    <MajorGridLines Color="#EFEFEF" Width="1"></MajorGridLines>
                    <MinorGridLines Color="#F7F7F7" Width="1"></MinorGridLines>
                </XAxis>
                <YAxis>
                    <TitleAppearance Text="Quantity">
                    </TitleAppearance>
                    <MajorGridLines Color="#EFEFEF" Width="1"></MajorGridLines>
                    <MinorGridLines Color="#F7F7F7" Width="1"></MinorGridLines>
                </YAxis>
            </PlotArea>
            <ChartTitle Text="Sold Cars per Date">
            </ChartTitle>
        </telerik:RadHtmlChart>

C#:

    protected void Page_Load(object sender, EventArgs e)
    {
        RadHtmlChart2.DataSource = GetData();
        RadHtmlChart2.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;
    }

For the time being the property can be set through the kendoWidget:
$find('chartID').get_kendoWidget().options.panes[1].height = 60;
$find('chartID').get_kendoWidget().redraw();

Was hoping for the functionality where the difference area between lines could be colored accordingly.

example: htmlchart with 3 lines 1:+standard 2:-standard and 3:Actual value. If the Actual value line is below the -standard, the difference area should be colored red. In case it crosses the +standard it should be green.

Likely the Actual value line would be an Area-serie but that aside.

Would be nice to be able to supply an image for the series background on bar and column charts, this would enable infographic style option to charts, i.e. displaying data for countries the bar series can be repeating national flags.

For the time being you can choose either approach:

1) Set the min and max dates on the kendo widget:
ASPX:
		<script>
			function pageLoad() {
				var chart = $find("<%=RadHtmlChart1.ClientID%>");
				chart._chartObject.options.xAxis.min = new Date(2013, 04, 01);
				chart._chartObject.options.xAxis.max = new Date(2013, 05, 01);
				chart.repaint();
			}
		</script>
		<telerik:RadHtmlChart runat="server" ID="RadHtmlChart1" Width="640px" Height="480px">
			<PlotArea>
				<Series>
					<telerik:ScatterLineSeries DataFieldY="SellQuantity" DataFieldX="SellDate">
						<LabelsAppearance DataFormatString="{1} cars sold on {0:m}">
						</LabelsAppearance>
						<TooltipsAppearance Color="White" DataFormatString="{1} cars sold on<br/>{0:D}" />
					</telerik:ScatterLineSeries>
				</Series>
				<XAxis BaseUnit="Days">
					<TitleAppearance Text="Sell Date">
					</TitleAppearance>
					<LabelsAppearance DataFormatString="d" RotationAngle="45">
					</LabelsAppearance>
					<MajorGridLines Color="#EFEFEF" Width="1"></MajorGridLines>
					<MinorGridLines Color="#F7F7F7" Width="1"></MinorGridLines>
				</XAxis>
				<YAxis>
					<TitleAppearance Text="Quantity">
					</TitleAppearance>
					<MajorGridLines Color="#EFEFEF" Width="1"></MajorGridLines>
					<MinorGridLines Color="#F7F7F7" Width="1"></MinorGridLines>
				</YAxis>
			</PlotArea>
			<ChartTitle Text="Sold Cars per Date">
			</ChartTitle>
		</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(2013, 05, 12));
		dt.Rows.Add(2, 5, new DateTime(2013, 05, 13));
		dt.Rows.Add(3, 6, new DateTime(2013, 05, 17));
		dt.Rows.Add(4, 4, new DateTime(2013, 05, 18));
		dt.Rows.Add(5, 7, new DateTime(2013, 05, 22));

		return dt;
	}

2) Set the JavaScript equivalent of min and max dates in the code behind like follows:
C#:
	protected void Page_Load(object sender, EventArgs e)
	{
		//Set min and max date for a datetime x-axis type
		RadHtmlChart1.PlotArea.XAxis.MinValue = ConvertToJavaScriptDateTime(new DateTime(2014, 02, 19));
		RadHtmlChart1.PlotArea.XAxis.MaxValue = ConvertToJavaScriptDateTime(new DateTime(2014, 04, 05));

		//Instantiate ScatterSeriesItem objects
		ScatterSeriesItem ssi1 = new ScatterSeriesItem();
		ScatterSeriesItem ssi2 = new ScatterSeriesItem();
		ScatterSeriesItem ssi3 = new ScatterSeriesItem();
		ScatterSeriesItem ssi4 = new ScatterSeriesItem();
		//Instantiate DateTime objects
		DateTime date1 = (new DateTime(2014, 03, 03, 0, 0, 0));
		DateTime date2 = (new DateTime(2014, 03, 10, 0, 0, 0));
		DateTime date3 = (new DateTime(2014, 03, 17, 0, 0, 0));
		DateTime date4 = (new DateTime(2014, 03, 24, 0, 0, 0));
		//Set the converted x values to the ScatterSeriesItem objects
		ssi1.X = ConvertToJavaScriptDateTime(date1);
		ssi2.X = ConvertToJavaScriptDateTime(date2);
		ssi3.X = ConvertToJavaScriptDateTime(date3);
		ssi4.X = ConvertToJavaScriptDateTime(date4);
		//Set the y values to the ScatterSeriesItem objects
		ssi1.Y = 3;
		ssi2.Y = 6;
		ssi3.Y = 5;
		ssi4.Y = 9;
		//Add the ScatterSeriesItem objects to the ScatterLineSeries
		(RadHtmlChart1.PlotArea.Series[0] as ScatterLineSeries).SeriesItems.Add(ssi1);
		(RadHtmlChart1.PlotArea.Series[0] as ScatterLineSeries).SeriesItems.Add(ssi2);
		(RadHtmlChart1.PlotArea.Series[0] as ScatterLineSeries).SeriesItems.Add(ssi3);
		(RadHtmlChart1.PlotArea.Series[0] as ScatterLineSeries).SeriesItems.Add(ssi4);
	}

	//A method that converts the .NET DateTime object to its JavaScript Date object representation
	protected decimal ConvertToJavaScriptDateTime(DateTime fromDate)
	{
		return (decimal)fromDate.Subtract(new DateTime(1970, 1, 1)).TotalMilliseconds;
	}
ASPX:
		<telerik:RadHtmlChart runat="server" ID="RadHtmlChart1" Width="640px" Height="480px">
			<PlotArea>
				<Series>
					<telerik:ScatterLineSeries Name="Stock A">
						<LabelsAppearance>
							<ClientTemplate>
                        #= kendo.format(\'{0:d/MM/yyyy}\', new Date(value.x)) #,  #=kendo.format(\'{0:C0}\',value.y)#
							</ClientTemplate>
						</LabelsAppearance>
						<TooltipsAppearance Color="White">
							<ClientTemplate>
                        #= kendo.format(\'{0:d/MM/yyyy}\', new Date(value.x)) #,  #=kendo.format(\'{0:C0}\',value.y)#
							</ClientTemplate>
						</TooltipsAppearance>
					</telerik:ScatterLineSeries>
				</Series>
				<YAxis>
					<LabelsAppearance DataFormatString="C0"></LabelsAppearance>
					<TitleAppearance Text="Price"></TitleAppearance>
				</YAxis>
				<XAxis Type="Date" BaseUnit="Days">
					<TitleAppearance Text="Closing Date">
					</TitleAppearance>
					<LabelsAppearance DataFormatString="d">
					</LabelsAppearance>
				</XAxis>
			</PlotArea>
			<ChartTitle Text="Closing Stock Prices">
			</ChartTitle>
		</telerik:RadHtmlChart>

The property will control the distance between the corresponding series items.

For the time being you can use the following workaround:
		<script>
			function OnLoad(sender, args) {
				var kendoWidget = $find('<%=RadHtmlChart1.ClientID%>').get_kendoWidget();
				kendoWidget.options.legend.reverse = true;
				kendoWidget.redraw();
			}
		</script>
		<telerik:RadHtmlChart ID="RadHtmlChart1" runat="server" Width="600" Height="400">
			<ClientEvents OnLoad="OnLoad" />
			<PlotArea>
				<Series>
					<telerik:ColumnSeries Name="Series 1">
						<SeriesItems>
							<telerik:CategorySeriesItem Y="30" />
							<telerik:CategorySeriesItem Y="10" />
							<telerik:CategorySeriesItem Y="20" />
						</SeriesItems>
					</telerik:ColumnSeries>
					<telerik:ColumnSeries Name="Series 2">
						<SeriesItems>
							<telerik:CategorySeriesItem Y="2" />
							<telerik:CategorySeriesItem Y="5" />
							<telerik:CategorySeriesItem Y="7" />
						</SeriesItems>
					</telerik:ColumnSeries>
					<telerik:ColumnSeries Name="Series 3">
						<SeriesItems>
							<telerik:CategorySeriesItem Y="9" />
							<telerik:CategorySeriesItem Y="11" />
							<telerik:CategorySeriesItem Y="13" />
						</SeriesItems>
					</telerik:ColumnSeries>
				</Series>
				<XAxis>
					<LabelsAppearance RotationAngle="33"></LabelsAppearance>
					<Items>
						<telerik:AxisItem LabelText="Item 1" />
						<telerik:AxisItem LabelText="Item 2" />
						<telerik:AxisItem LabelText="Item 3" />
					</Items>
				</XAxis>
			</PlotArea>
		</telerik:RadHtmlChart>

For the time being the property can be set through the kendoWidget:
ASPX:
		<script>
			function pageLoad() {
				$ = $telerik.$;
				var kendoWidget = $find("<%=PieChart1.ClientID%>")._chartObject;
				kendoWidget.options.series[0].labels.visible = function (point) {
					if (point.value < 5) {
						return false;
					} else {
						return true;
					};
				}
				kendoWidget.redraw();
			}
		</script>

		<telerik:RadHtmlChart runat="server" ID="PieChart1" Transitions="true" Width="450px" Height="450px">
			<PlotArea>
				<Series>
					<telerik:DonutSeries StartAngle="90">
						<LabelsAppearance Position="OutsideEnd" DataFormatString="{0} %" />
						<TooltipsAppearance DataFormatString="{0} %" />
						<SeriesItems>
							<telerik:PieSeriesItem BackgroundColor="Purple" Exploded="true" Name="Internet Explorer" Y="18.3" />
							<telerik:PieSeriesItem BackgroundColor="Orange" Exploded="false" Name="Firefox" Y="35.8" />
							<telerik:PieSeriesItem BackgroundColor="Green" Exploded="false" Name="Chrome" Y="38.3" />
							<telerik:PieSeriesItem BackgroundColor="Blue" Exploded="false" Name="Safari" Y="4.5" />
							<telerik:PieSeriesItem BackgroundColor="Red" Exploded="false" Name="Opera" Y="2.3" />
						</SeriesItems>
					</telerik:DonutSeries>
				</Series>
			</PlotArea>
			<ChartTitle Text="Browser Usage for April 2012">
			</ChartTitle>
		</telerik:RadHtmlChart>

For the time being the function can be set through the kendoWidget:
ASPX:
		<telerik:RadScriptManager ID="RadScriptManager1" runat="server"></telerik:RadScriptManager>
		<script>
			function pageLoad() {
				var chart = $find("<%=RadHtmlChart1.ClientID%>");
				chart._chartObject.options.series[0].markers.type = function (point) {
					if (point.value > 2) {
						return "triangle";
					}
					else {
						return "circle";
					}
				};
				chart.repaint();
			}
		</script>
		<telerik:RadHtmlChart runat="server" ID="RadHtmlChart1" Width="600px" Height="400px">
			<PlotArea>
				<Series>
					<telerik:LineSeries Name="Product 1">
						<SeriesItems>
							<telerik:CategorySeriesItem Y="1" />
							<telerik:CategorySeriesItem Y="2" />
							<telerik:CategorySeriesItem Y="3" />
						</SeriesItems>
					</telerik:LineSeries>
				</Series>
				<XAxis>
					<Items>
						<telerik:AxisItem LabelText="1" />
						<telerik:AxisItem LabelText="2" />
						<telerik:AxisItem LabelText="3" />
					</Items>
				</XAxis>
			</PlotArea>
			<ChartTitle Text="Product sales for 2011">
			</ChartTitle>
			<Legend>
				<Appearance Position="Bottom" />
			</Legend>
		</telerik:RadHtmlChart>

For the time being properties can be set to the kendoWidget on the client:
ASPX:
		<script>
			function pageLoad() {
				var chart = $find("<%=RadHtmlChart1.ClientID%>");
				chart._chartObject.options.xAxis.min = new Date(2013, 04, 01);
				chart._chartObject.options.xAxis.max = new Date(2013, 05, 01);
				chart.repaint();
			}
		</script>
		<telerik:RadHtmlChart runat="server" ID="RadHtmlChart1" Width="640px" Height="480px">
			<PlotArea>
				<Series>
					<telerik:ScatterLineSeries DataFieldY="SellQuantity" DataFieldX="SellDate">
						<LabelsAppearance DataFormatString="{1} cars sold on {0:m}">
						</LabelsAppearance>
						<TooltipsAppearance Color="White" DataFormatString="{1} cars sold on<br/>{0:D}" />
					</telerik:ScatterLineSeries>
				</Series>
				<XAxis BaseUnit="Days">
					<TitleAppearance Text="Sell Date">
					</TitleAppearance>
					<LabelsAppearance DataFormatString="d" RotationAngle="45">
					</LabelsAppearance>
					<MajorGridLines Color="#EFEFEF" Width="1"></MajorGridLines>
					<MinorGridLines Color="#F7F7F7" Width="1"></MinorGridLines>
				</XAxis>
				<YAxis>
					<TitleAppearance Text="Quantity">
					</TitleAppearance>
					<MajorGridLines Color="#EFEFEF" Width="1"></MajorGridLines>
					<MinorGridLines Color="#F7F7F7" Width="1"></MinorGridLines>
				</YAxis>
			</PlotArea>
			<ChartTitle Text="Sold Cars per Date">
			</ChartTitle>
		</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(2013, 05, 12));
		dt.Rows.Add(2, 5, new DateTime(2013, 05, 13));
		dt.Rows.Add(3, 6, new DateTime(2013, 05, 17));
		dt.Rows.Add(4, 4, new DateTime(2013, 05, 18));
		dt.Rows.Add(5, 7, new DateTime(2013, 05, 22));

		return dt;
	}

For the time being you can set the types through the kendoWidget:
		<telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
			<script>
				function pageLoad() {
					var chart = $find('<%=RadHtmlChart1.ClientID%>');
					chart._chartObject.options.series[0].type = "verticalLine";
					chart.repaint();
				}
			</script>
		</telerik:RadCodeBlock>
		<telerik:RadHtmlChart runat="server" ID="RadHtmlChart1" Width="600px" Height="400px">
			<PlotArea>
				<Series>
					<telerik:LineSeries Name="Product 1">
						<SeriesItems>
							<telerik:CategorySeriesItem Y="15000" />
							<telerik:CategorySeriesItem Y="23000" />
							<telerik:CategorySeriesItem Y="10000" />
						</SeriesItems>
					</telerik:LineSeries>
				</Series>
				<XAxis>
					<Items>
						<telerik:AxisItem LabelText="1" />
						<telerik:AxisItem LabelText="2" />
						<telerik:AxisItem LabelText="3" />
					</Items>
				</XAxis>
			</PlotArea>
			<ChartTitle Text="Product sales for 2011">
			</ChartTitle>
			<Legend>
				<Appearance Position="Bottom" />
			</Legend>
		</telerik:RadHtmlChart>

For the time being you can set the property through the kendoWidget. All available options are available at http://docs.telerik.com/kendo-ui/api/javascript/dataviz/ui/chart#configuration-series.connectors
        <script>
            function pageLoad() {
                var kendoWidget = $find("<%=RadHtmlChart1.ClientID%>")._chartObject;
                kendoWidget.options.series[0].connectors = {width: "3", color: "#ff0000"};
                kendoWidget.redraw();
            }
        </script>
        <telerik:RadHtmlChart ID="RadHtmlChart1" runat="server" Width="400px" Height="400px">
            <PlotArea>
                <Series>
                    <telerik:PieSeries>
                        <SeriesItems>
                            <telerik:PieSeriesItem Y="30" />
                            <telerik:PieSeriesItem Y="10" />
                            <telerik:PieSeriesItem Y="20" />
                        </SeriesItems>
                    </telerik:PieSeries>
                </Series>
            </PlotArea>
        </telerik:RadHtmlChart>